How to use useMemo React hook

React is built on properties, basically, you can pass to any child component any value. Which means you can pass also another component. And that makes it even more powerful.

But it can also cause some issues. Let’s say you have an input field that you are passing to the child component. In child components, you are mapping through some data and attaching the input field to that data.

1items.map((item, index) => (
2  <div className="repeater__options-item" key={item.id}>
3    <CustomInput
4      item={item}
5      index={index}
6      onItemChange={handleItemOnChange}
7    />
8... ))}

Now the issue here is, every time the user interacts with Input, this map is re-rendered, the component is re-rendered and the user loses focus of the input, To solve this we need to use useMemo hook.

1const MemoCustomInput = useMemo(() => CustomInput, []);

It works similarly to useCallback hook. In this example, useMemo takes a function that returns our CustomInput component and that function is called only on first render, ComponentDidMount lifecycle method. So every time the map is re-rendered it takes old component. Use memo is used for optimizations, it is very useful even though it is not as used as useState and useEffect hooks.

Until next time, happy coding.