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
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).Thats a Gold ✨