DEV Community

john
john

Posted on

4 1

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

Top comments (2)

Collapse
 
lexlohr profile image
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).

Collapse
 
johnbabu021 profile image
john • Edited

Thats a Gold ✨

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more