Discuss 'useMemo' hook.

Skipping expensive recalculations

Skipping re-rendering of components

Memoizing a dependency of another Hook

Memoizing a function

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.

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}