Vigyata.AI
Is this your channel?

React 19 Tutorial - 30 - useReducer Lazy Initialization

3.4K views· 112 likes· 6:13· Dec 9, 2025

🛍️ Products Mentioned (2)

Github - https://github.com/gopinav/React-19-Tutorials Become a Fullstack Developer with Scrimba - https://scrimba.com/fullstack-path-c0fullstack?via=Codevolution Follow me + Twitter - https://twitter.com/CodevolutionWeb Business - codevolution.business@gmail.com React 19 useReducer Lazy Initialization

About This Video

Now that we’ve used useReducer with simple and complex state/action patterns, in this video I show you one more really useful feature: lazy initialization. You might remember this idea from useState—when calculating the initial value takes extra work, you can pass a function and React will call it only once on the first render. The exact same idea exists in useReducer too, just with a slightly different pattern. I stick with the counter example, but instead of always starting at 0, I initialize the count from localStorage (like resuming a previous session). With useReducer, you still pass the initial state as the second argument, but you add an optional third argument: an init function. React calls init once when the component mounts, passing it the second argument, and whatever init returns becomes the actual initial state. I log to the console so you can clearly see that the init function doesn’t run again on re-renders—only on mount (you’ll see it twice in development due to Strict Mode). This is perfect for expensive initial computations or reading from external sources like localStorage.

Frequently Asked Questions

🎬 More from Codevolution