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
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (2)
The
useMemohook 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
useMemoto 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
useMemoto ensure that the computation is only run if a value has changed.Other frameworks have similar solutions. For example, Solid.js has a
createMemomethod 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).Thats a Gold ✨