React Hooks 2: useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue & Custom Hooks

Carolina Cobo
3 min readAug 15, 2022

In this second part of the series, I covered the rest of Hooks just as an FYI as it might not be likely you’ll encounter this unless you’re building a library or you have a complex edge case.

source React

What you’ll come across more often are Custom Hooks, so if you are not too interested in the other ones, skip to the end to see an example that I’m using in one of my projects.

Both 6. useCallback and 7. useMemo are similar as they both optimize performance. They should be used when a performance problem arises and not before or your application will have unnecessary complexity.

6. useMemo

Memoizes expensive function calls so they will be only calculated when needed. useMemo will return a memoized value.

7. UseCallBack

As mentioned, it’s quite similar to useMemo but useCallback returns a memoized function.

8. useLayoutEffect

This one is really similar to useEffect, nearly the same, being the only difference it is synchronous to render instead of scheduled as they are with useEffect. For example, if you are migrating from class components to hooks this can be very useful as it runs at the same time as componentDidMount and componentDidUpdate, useEffect will come after. Remember this should be a temporary fix and the only time it should be used is to measure DOM nodes, for example for animations.

9. useImperativeHandle

This one you might not ever use this one, but it might be in some libraries you use or to cover really rare scenarios.

useImperativeHandle is very similar to useRef, when you use it you are given the instance value of the component the ref is attached to, which lets you interact with the DOM element directly.

useImperativeHandle is very similar but also allows you to control the value that is returned instead of the instance element and you will explicitly state what return value it will be. And also lets you replace native functions such as blur or focus with your own.

10. useDebugValue

--

--

Carolina Cobo

Frontend Software Engineer @ Genesys | Career switcher