useMemo

useMemo 🎒

Notes:

• useMemo returns a memoized value.
• Call signature: const memoizedValue = useMemo(functionThatReturnsValue, arrayDependencies)
• View the docs.

Starter Example

The example above is similar to the one for useCallback.

The only difference here is that someValue is an object NOT a string. Owing to this, the Instructions component still re-renders despite the use of React.memo.

Why?

Objects are compared by reference, and the reference to someValue changes whenever <App /> re-renders.

Any solutions?

Basic Usage

The object, someValue may be memoized using useMemo. This prevents the needless re-render.