How to efficiently refactor useState to useReducer in React

As your React app grows in complexity, managing state with useState hooks can become challenging to maintain. That's where useReducer comes in – a React hook that can help organise complex state logic

Hey, it’s Edvins. Happy Tuesday! The hump day is nearly here!

I recently refactored a big chunk of the code for one of the side projects I was working on. I’ve switched from using useState to useReducer and able to reduce the number of re-renders from 10 to 2, a considerable performance boost for the app. The code was much easier to understand and maintain, and it was much easier to test the reducer functions in isolation.

How to efficiently refactor useState to useReducer in React

In this blog post, we'll walk through the process of refactoring from useState to useReducer in React, using some concrete code examples (Counter and Shopping Cart) to illustrate the process.