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.

useMemo

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

UseCallBack

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

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.

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.

useDebugValue

This hook extends the visualization of data about custom Hooks inside the component inspector of the React DevTools, here is the Chrome Extension to it and here is the npm package installation.

Bonus: Custom Hooks

You can also build your own hooks extracting the logic into reusable functions.

If you want to extract the logic and put it into a hook remember that it’s a JS function which name starts with the word “use” as you’ve seen above and the previous post.

Here’s a custom Hook I created in one of my projects and that I used for a Testimonial Carousel to show the different cards after 7 seconds

import React, { useState, useEffect, useRef } from "react";
export default function useInterval(callback, delay) {
  const savedCallback = useRef();
// Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
// Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

Thanks for reading, I appreciate your time. If you need any help please reach out!

If you have any questions feel free to drop me a message on LinkedIn or send me an email. 😊

Have a nice day!