In this post, we’ll look at a way to optimize React’s
useState hook called lazy initialization.
So there’s this method to optimize React’s performance that I think is less-known (maybe it’s just me ) called lazy initialization. It’s a way to optimize the React’s
Let’s start by looking at an example.
Let’s see what’s going on with the component. On render, we first check if there’s already a previously stored value in the local storage and use it as the initial value for the
useState hook. We also have a
useEffect hook that update the local storage every time the name value is changed. And finally, we render an input and the name value to the screen.
In short, it’s just a simple component with input that take in your name and display it on the screen.
In the example above, the
useState hook read the value from local storage every time it re-renders. In this case, every time you type with the input box.
As you know, reading from local storage is an IO operation, and it can potentially slow down our application.
Reading from local storage is just one example. The same potential performance issue apply to any expensive function you passed to
The argument you pass to
useState is supposed to be the initial value of the state. So, why is it that the function you passed need to re-run on every subsequent re-render? Is this React’s bug?
useState again, which is then ignored correctly by React.
As you can see, the problem occurred before you even reach the React land.
It’s just like passing an arrow function that executes your function instead of passing your function directly to event handlers when your function has argument.
The same principle comes into play here. In this case though, it’s called lazy initialization.
useState will truly only run once (on initial render, by React).
To fix the example above:
Instead of passing the initial value directly to the
useState hook, we passed in an anonymous function that returns the initial value instead.
useState hook will only get the value from local storage on initial render. Which is really what we want it to do.
This is a good performance optimization technique to use whenever the initial value for our
useState hook is an expensive computation.
Hope you find it useful 👍🏻.