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…



Carolina Cobo

Frontend Software Engineer @ Genesys | Career switcher