Pro useReducer Hack For React

A big switch statement isn't the only way to use useReducer. You can also use this quick hack to make managing objects in your state a whole lot easier. This trick works on React 18, Remix, NextJS 13, and wherever else you use React.

#shorts

[ChillAutos]

This is so useful. I cant believe this pattern isnt more common.

[SpaghettiRealm]

Jack those shorts are great, please organize them in a long video (maybe later), smth like maybe React Pro Tips

[mikechurvis]

Excellent. Nice use of Partial<>. I've fallen in love with type safety. I might even pick up Rust one day.

[CFXTBogard]

I swear to God, we need a bookmark element for this videos.... or wait... I can do an extension for it lol.

[aliensoul]

Thank you so much sir, One suggestion kindly use mouse or pen to point out the code. could me more helpful for beginners like me. 💐

[akinsanmiakintunde]

I growth day by day here in this channel

[arakwar]

And sending that in a context makes it a lot easier to handle data trough a small app (like a form with some interaction and dynamic data that we decided to build in react to get some experience with the framework).

[henriquealmeida]

This is good. I like this is a no-bs channel about TS ;)

[pratamaa.s.]

Just know that, especially the Partial, cool!

[paveltretyakov]

Perfect knowledge bit. You are save my time. Thank you!

[beakerbkr]

I’m kicking myself for not seeing this myself. Thanks for the great tip!

[abdurrahman]

If we need the previous state for updating the state? How can we send the prev state for dispatching? Like in setState(prev => prev ....)

[Thorax]

This is a handy utility. Be cautious with overuse though.

This is creating a reducer that is basically just a setter for everything. Reducers in a complex environment are better as behavior driven.

I can see this being taken way too far.

[wezter]

What about using a function to handle updating part of a state using something like this? (If you are only updating one field at a time)
Would you still prefer using a reducer for updating part of the object instead of useState then?

const handleChangeText = (text: string, name: keyof UserProfile) => {
setProfile({ ...profile, [name]: text });
};

Then it would just look something like this in your JSX:
onChange: (text: string) => handleChangeText(text, 'lastName')

[omomer]

what is the difference between useredicer and usestate

[ayushjain]

But you still need to spread the state, which is where the pain is, lets make it more useful
const useCompState = <S>(initialState) => {
const [state, setState] = useReducer(
(prev: S, curr:Partial<S>) => mergeObjects(prev, curr),
initialState);

return {state, setState}
}

function mergeObjects(a, b) {
if(a === null || typeof a !== 'object') return b;
if(b === null || typeof b !== 'object') return b;

const obj = Array.isArray(a) ? [...a] : a;

for(const key in b) {
if(b.hasOwnProperty(key)) {
obj[key] = mergeObjects(obj[key], b[key]);
}
}

return obj;
}