What is the use of UseMemo

useMemo is a memorise hook that avoid rendering a Component if there is no change in props
let's take an example when a parent child renders all of it's children component will render but we can avoid rendering of children if there is no change in the props by wrapping
it with a React.useMemo hook

Comments

[Alex Lohr]

The useMemo hook has two functions: keeping object references and processing derived state.

Imagine you have a component that requires an object as argument that is derived from two properties. You want that object only to change if one or both properties changes, so you use useMemo to make sure it doesn't.

Or maybe you have a property that is calculated or otherwise derived from other properties, but computing it is very costly. You can use useMemo to ensure that the computation is only run if a value has changed.

Other frameworks have similar solutions. For example, Solid.js has a createMemo method for derived state (since it evaluates components only once to improve performance and compiles updates into side effects, keeping references is not a use case).

[john]

Thats a Gold ✨