Edvins' Newsletter

Share this post

How to efficiently refactor useState to useReducer in React

edvins.substack.com

Discover more from Edvins' Newsletter

A newsletter about front-end engineering.
Continue reading
Sign in

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

Edvins Antonovs
Apr 4, 2023
Share this post

How to efficiently refactor useState to useReducer in React

edvins.substack.com
Share

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.

Share this post

How to efficiently refactor useState to useReducer in React

edvins.substack.com
Share
Comments
Top
New

No posts

Ready for more?

© 2023 Edvins Antonovs
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing