React Hooks 2: useMemo, useCallback, useLayoutEffect, useImperativeHandle, useDebugValue & Custom Hooks
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.
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.
Memoizes expensive function calls so they will be only calculated when needed. useMemo will return a memoized value.
As mentioned, it’s quite similar to useMemo but useCallback returns a memoized function.
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.
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.