From version 16.8.0, React introduced us to a way to use state and other React features without writing a class — . React Hooks It’s an amazing improvement around which allows us to reuse stateful logic between components. No surprise that it comes with a learning curve that could lead to performance pitfalls. the classic Class paradigm Let’s deep dive into the most popular ones and try to figure out how to avoid them. Re-Renders Matter Alright, we identified that we may encounter some performance issues while using Hooks, but where are they coming from? Essentially, most of the issues with Hooks come from unnecessary renders of your components. Have a look at the following example: Incrementor = { [, setA] = useState( ); [, setB] = useState( ); incrementA = setA( a + ); incrementB = setB( a + ); incrementAB = { incrementA(); incrementB(); }; incrementABLater = { setTimeout( { incrementA(); incrementB(); }, ); }; .log( ); ( <button onClick={incrementA}>a++</button> <button onClick={incrementB}>b++</button> <button onClick={incrementAB}>a++, b++</button> <button onClick={incrementABLater}>a++, b++ after 1s</button> ); }; const => () const 0 const 0 const => () => a 1 const => () => a 1 const => () const => () => () 1000 console "Re-rendered" return < > div </ > div This is a component that has two states, and , and four increment actions on them. I’ve added the method to see the message on every render. The first two actions are basic increments and just increase or values by one. A B console.log A B Let’s click on the button and have a look at the console: on each click, there should be only one render. This is really good because that’s what we wanted. a++, b++ Now press the button: on each click, you’d see two renders. If you’re wondering what’s happening underneath — the answer is simple. a++, b++ after 1s React batches synchronous state updates into one. On the other hand, for asynchronous functions, each function triggers a render method. setState But what if you want to have consistent behavior? Here comes the first rule of Hooks. Rule 1: Do Not Split State Between Several Methods for Connected Data Models useState Imagine you have two independent states. Then, the requirements changed, thus update of one state causes an update of another one. In this case, you have to join them in one object: . Or, take advantage of the function. const { A, B } = useState({ A: 0, B: 0}) useReducer Another good example of this rule is data loading. Usually, you need three variables to handle it: , , and . Don’t try to keep them separate, prefer instead. isLoading data error useReducer It allows you to separate state logic from components and helps you to avoid bugs. Having one object with these three properties will be a solution as well but would not be that explicit and error-prone. Trust me on that, I have seen so many people forgetting to set on error. isLoading: false Custom Hooks Now that we’ve figured out how to manage in a single component, let’s move increment functionality outside to be used in different places. useState useIncrement = { [value, setValue] = useState(defaultValue) increment = setValue( value + ) [value, increment] } ExampleWithCustomHook = { [a, incrementA] = useIncrement() useEffect( { incrementA() }, [incrementA]) .log( ) } const ( ) => defaultValue = 0 const const => () => value 1 return const => () const => () console 'Re-rendered' return {a} < > h1 </ > h1 We refactored the increment logic to its own Hook and then we run it once using the function. useEffect Note that we have to provide the setter in the dependency array because we’re using it inside and it’s enforced by . . incrementA Hook’s ESLint rules (Please enable them if you didn’t do that before!) If you try to render this component, your page will be frozen because of infinite re-renders. To fix it, we need to define the second rule of Hooks. Rule 2. Make Sure You Return New Objects From Custom Hooks Only If They’ve Changed The component above is always re-rendering because the Hook returns a new function every time. To avoid creating a new function every time, wrap it in the function. increment useCallback useIncrement = { [value, setValue] = useState(defaultValue); increment = useCallback( setValue( value + ), []); [value, increment]; }; ExampleWithCustomHook = { [a, incrementA] = useIncrement(); useEffect( { incrementA(); }, [incrementA]); .log( ); ; }; const ( ) => defaultValue = 0 const const => () => value 1 return const => () const => () console "Re-rendered" return {a} < > h1 </ > h1 Now it’s safe to use this Hook. Sometimes, you need to return a plain object from custom Hooks, make sure you update it only when its content changes using . useMemo How to Find These Re-Renders Before It’s Too Late? Normally, it’s troublesome to find these issues before it causes performance issues, so you have to use specific tools to detect them beforehand. One of them is the library that tells you about avoidable re-renders. why-did-you-render Mark your component as , start interacting with it, and look for messages in the console. MyComponent.whyDidYouRender = true I guarantee that you’ll discover something new in the next five minutes. Another option is to use the tab in . Although you have to think about how many re-renders you expect from your component— this tab only shows the number of re-renders. Profiler React Dev Tools extension Let me know what other challenges you’ve encountered with Hooks, let’s solve them together. References React Hooks API How to profile React apps with Dev Tools Profiler
