Clean Up React Code with useReducer | Code Renovation

In this video CJ shows how to refactor React code that has several useStates into a single useReducer. He talks about what useReducer is, shows how to create a reducer from the ground up and talks about when you should and should not reach for useReducer. We are refactoring the code here: https://github.com/w3cj/use-x The code was written in the original video here: https://www.youtube.com/watch?v=GDXsuoisg60 00:00 intro 01:12 code setup 02:05 when should we use a reducer? 02:52 convert a single useState to a useReducer 03:26 create a reducer function 03:38 create a state type for our reducer 04:47 a simple reducer 05:08 defining action types 06:32 updating reducer state with actions 07:46 review: what is a reducer? 08:13 use a reducer with useReducer 09:24 updating types and dispatching actions 11:13 when to use a reducer 11:21 refactor options state into reducer 14:38 when to use a reducer 14:59 continue refactoring options state 17:01 when to use useReducer 17:53 moving fetch state into reducer 19:15 finding and grouping actions 19:56 defining grouped actions 20:27 replacing setState with dispatch actions 21:41 when to define actions with no payload 22:29 combining action types with no payload 23:43 review usage of reducer and dispatch 24:04 other action type options 24:31 tradeoffs to choosing useReducer 25:02 benefits of useReducer 26:15 thanks! React useReducer | https://react.dev/reference/react/useReducer ------------------------------------------------------------------------------ Hit us up on Socials! https://www.syntax.fm/links Brought to you by Sentry - Use code "tastytreats" to get 2 months free - https://sentry.io/syntax #react #typescript #testing