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.
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…
