useMemo (1/4)
Discuss 'useMemo' hook.
useMemo is a React Hook used to cache the result of a costly calculation between re-renders.
Advantages:
- Skipping expensive recalculations
- Skipping re-rendering of components
- Memoizing a dependency of another Hook
- Memoizing a function
calculateValue: The function calculating the value that you want to cache.:
- It should be pure, should take no arguments, and should return a value of any type.
- React will call this function during the initial render.
- React will return the same value on the next renders if the dependencies have not changed since the last render.
- Otherwise, it will call the calculatevalue function, return its result, and store it so it can be reused later.
- By default, React re-renders all of its children recursively when a component re-renders. useMemo can also help you optimise the performance of re-rendering child components.
dependencies:
- The list of all reactive values that are referenced inside the calculateValue code.
- Reactive values include props, state, and all the variables and functions declared directly inside your component body.
- Dependencies should also be memoised if they might be created on every render : const dependencyVariable={x:3, y:5}