{"id":9975,"date":"2022-09-07T13:25:37","date_gmt":"2022-09-07T18:25:37","guid":{"rendered":"https:\/\/upmostly.com\/?p=9975"},"modified":"2022-09-08T04:07:27","modified_gmt":"2022-09-08T09:07:27","slug":"react-uselayouteffect-hook","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/react-uselayouteffect-hook","title":{"rendered":"When should you use the useLayoutEffect hook in React?"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

React has, not so long ago, come with a major update to its Functional Components (In v16.8<\/strong>, back in March of 2019), which has finally provided those components with a way to become stateful<\/a><\/strong>.<\/p>\n\n\n\n

The addition of Hooks not only meant that Functional Components would be able to provide their own state<\/strong> but also manage their own lifecycle events<\/strong> through the introduction of the useEffect<\/strong> hook.<\/p>\n\n\n\n

Moreover, the update has also introduced a brand-new, useLayoutEffect<\/strong> hook, which, according to the React documentation<\/a><\/strong>, does a pretty similar thing to what the useEffect<\/a><\/strong> hook does; so this begs the question: what’s really the difference between the two?<\/em><\/strong><\/p>\n\n\n\n

If you aren’t already familiar with hooks, I do recommend checking out this article<\/strong><\/a> where you’ll get a good understanding of what they are, what they are used for, and how you can use them in your applications.<\/p>\n\n\n\n

In this article, we will be looking in more depth at what does each hook do, what are the differences between the two, and, towards the end, you should be having a better understanding of how each of them works, when you should be using one over the other, and some common pitfalls of falling in love with either.<\/p>\n\n\n\n

Overview of the useEffect<\/strong> hook<\/h2>\n\n\n\n

This hook has been initially added as an alternative way of handling side effects in Functional Components, similarly to the componentDidMount<\/strong> and componentDidUpdate<\/strong> methods in Class-based Components (They also run at the same time in comparison).<\/p>\n\n\n\n

Thus, its equivalent in Class-based Components would be a combination of the componentDidMount<\/strong>, componentDidUpdate<\/strong>, and<\/strong> componentWillUnmount<\/strong> methods, the latter being an effect of the return statement within the callback passed as an argument to the hook.<\/p>\n\n\n\n

Hook Flow<\/h3>\n\n\n\n
  1. You cause a render somehow (the state has been updated or the parent re-renders)<\/li>
  2. React renders your component (calls it)<\/li>
  3. The screen is visually updated<\/li>
  4. Then useEffect<\/strong> runs<\/li><\/ol>\n\n\n\n

    Overview of the useLayoutEffect<\/strong> hook<\/h2>\n\n\n\n

    Similarly to useEffect<\/strong>, it runs at the same time that componentDidMount<\/strong> and componentDidUpdate<\/strong> do in Class Components. However, useLayoutEffect<\/strong> runs synchronously, as opposed to useEffect<\/strong>, which means that the callback that it receives will only be invoked after the V-DOM computations have taken place in the component, but before they have been painted to the actual DOM.<\/p>\n\n\n\n

    That means that in case we do need to make any JavaScript queries for any DOM elements, useLayoutEffect<\/strong> is the hook we might need.<\/p>\n\n\n\n

    Hook Flow:<\/h3>\n\n\n\n
    1. You cause a render somehow (change state, or the parent re-renders)<\/li>
    2. React renders your component (calls it)<\/li>
    3. useLayoutEffect<\/strong> runs, and React waits for it to finish.<\/li>
    4. The screen is visually updated<\/li><\/ol>\n\n\n\n

      When to use the useLayoutEffect<\/strong> hook?<\/h2>\n\n\n\n

      There is a common issue when using the useEffect<\/strong> hook where a component might “flicker” when its state is updated. That’s because the component will first render in a partially-ready state as it’s continuing the async computations process, and only then will it re-render in its final state.<\/p>\n\n\n\n

      That’s a good indication that you might want to use the useLayoutEffect<\/strong> hook instead.<\/p>\n\n\n\n

      Such an example would be trying to generate and render an extremely high numeric value at the click of a button like in this example:<\/p>\n\n\n\n

      import<\/span> {<\/span> useState,<\/span> useEffect }<\/span> from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> '.\/App.css'<\/span>;<\/span>\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  const<\/span> [<\/span>value,<\/span> setValue]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>)<\/span>;<\/span>\n  useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>\n    if<\/span> (<\/span>value ===<\/span> 0<\/span>)<\/span> {<\/span>\n      setValue<\/span>(<\/span>10<\/span> +<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 200<\/span>)<\/span>;<\/span>\n    }<\/span>\n  }<\/span>,<\/span> [<\/span>value]<\/span>)<\/span>;<\/span>\n  console.<\/span>log<\/span>(<\/span>'render'<\/span>,<\/span> value)<\/span>;<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div className=<\/span>\"App\"<\/span>><\/span>\n      <<\/span>p><\/span>Value:<\/span> {<\/span>value}<\/span><<\/span>\/<\/span>p><\/span>\n      <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setValue<\/span>(<\/span>0<\/span>)<\/span>}<\/span>><\/span>\n        Generate Random Value\n      <<\/span>\/<\/span>button><\/span>\n    <<\/span>\/<\/span>div><\/span>\n  )<\/span>;<\/span>\n}<\/span>\nexport<\/span> default<\/span> App;<\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
      If we were to check how our application behaves, we shall see a changing flickering number each time we were to press the button:<\/p>\n\n\n\n