⚛️ I don't like baking app or business logic directly in components. Instead, I use useReducer hook to separate the business logic from the UI. ✅ More predictable state changes ✅ Better architecture↓

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video tutorials just like this one. Check them out ↓

“Business logic” shouldn’t start with “use” because why would your business logic have anything to do with react?

Why not a hook for this?

I should probably use useReducer more often but usestate is easier for me to read

Fair enough, when you get used to use reducer I’d argue it’s easier to read, follow, debug and even test than useState.

Do you put the reducer function in the component file or in a separate file?

It depends really, if it gets too large yeah sure I separate that in a file, otherwise I like colocating the reducer in the component and exporting it from there to test it.

seperate file for use reducer?

That's how it should be done. To be honest, I would even try to move this business logic to backend whenever possible.

Agree whenever possible keep that in the backend!