#70: Best Practices for Using the useReducer Hook in React 19: Optimize Your State Management

[@ThapaTechnical]

💸 Get All My RUclips Videos' Source Code for just ₹199! Grab Now - thapatechnical.shop/source-code
🔥 Access React Course Source Code, PPT & Notes here for Free : github.com/thapatechnical/react-19-series-thapa-technical
📺 Discover React.js History in Just 10 Minutes - ruclips.net/video/MiK2bFqhg1U/видео.html
📺 Watch the complete Playlist here : ruclips.net/p/PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1

[@MakrandGurav]

Thanks, Vinod. You explained useReducer and optimsed reducer very nicely!

[@LearnerAbhi21]

Thank you so much for context and reducer hook

[@abhishektripathy1925]

DSA IN JAVASCRIPT is the need of the hour sir, plz do it by solving 100-200 questions of Leetcode from every topic.

[@user-om1iy8nu7z]

Best Series.👍👍👍👍👍👍

[@user-tu3ge4uu2v]

Please make video on payment gateway in node js please

[@user-om1iy8nu7z]

Good Series👍👍👍👍👍👍

[@TheBapi2010]

I know you did hard work ❤

[@TDMMaster918]

Sir, please upload 2 videos at a day❤

[@vikashanand2190]

awesome video

[@xyonxyt9170]

Nice video sirr

[@jahangirkhan3747]

Great tutorial ❤❤❤ Please start solving leetcode DSA problems using Javascript ❤️❤️❤️

[@UMAIRQASIM-oh6nn]

Thapa sir, ap i am from pakistan ap se request he react series jaldi complete karen ta ke hum apki react v19 series dekh kar job per lag saken or ap ne kal ki video me challenge kia tha ke count ko 2 se increment or decrement karna he to check karen import { useReducer } from "react";
export const UseReducerComp = () => {
const initalState = {
count: 0,
inc:2,
dec:2,
};
const reducer = (state, action) => {
console.log(state , action);
console.log(state, action);
switch (action.type) {
case "INCREMENT":
return {
...state,
count: state.count + 2 };
case "DECREMENT":
return { count: state.count - 2 };
case "RESET":
return {
...state,
count: 0 };
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, initalState);
return (
{state.count}
= 20}
onClick={() => dispatch({ type: "INCREMENT" })}
>
Increment
dispatch({ type: "DECREMENT" })}
disabled={state.count
Decrement
dispatch({ type: "RESET" })}
disabled={state.count
Reset

);
};

[@pxycknomdictator4483]

vote for redux toolkit

[@RNAGER09]

bro react hone ke baad Next js .... and also 3d wesites using Three js

[@AJ-krishna]

hello thapa bhai

[@RitikChoudhary-ql8xr]

Sir next playlist python 🎉 plz

[@shah4304]

Bro ❤️

[@MitulPanchal-q4j]

now i better understand what is useReducer hook in react js

[@prem_ium]

import { useReducer } from "react";
const Index = () => {
const initialState = {
count: 0,
inc: 2,
dec: 2,
};
const reducer = (state, action) => {
// if (action.type === "INCREMENT") {
// return state + 1;
// }
// if (action.type === "DECREMENT") {
// return state - 1;
// }
// if (action.type === "RESET") {
// return (state = 0);
// }
switch (action.type) {
case "INCREMENT":
return { ...state, count: state.count + state.inc };
case "DECREMENT":
return {
...state,
count: state.count - (typeof state.dec === "number" ? state.dec : 2),
};
case "RESET":
return { ...state, count: 0 };
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, initialState);
return (


{state.count}

dispatch({ type: "INCREMENT" })}
className="px-3 py-1 border rounded bg-zinc-700 text-slate-200"
>
Increment

dispatch({ type: "DECREMENT" })}
className="px-3 py-1 border rounded bg-zinc-700 text-slate-200"
>
Decrement

dispatch({ type: "RESET" })}
className="px-3 py-1 border rounded bg-zinc-700 text-slate-200"
>
Reset


);
};
export default Index;

[@yahia4537]

Next js soon

[@charanhr6433]

🎉🎉🎉🎉🎉

[@rishiraj2548]

👍🏻

[@Supreme.Speech29]

hallo ,thapa bro first comment please repally me , ma ap sa javascript dakh raha hu kitana mounth lag sakata hy master banana ma ,, please repaly me aur javascript ka bad kya karo ma please repally

[@ThapaTechnical]

master tho koi nai hota but yes 2month ache se kiya tho acha hoga

[@UMAIRQASIM-oh6nn]

and reply lazmi karna

[@BeymOsman_edits]

vote for redux toolkit + redux toolkit api

[@Moksh1128]

import { useReducer } from "react";
export const ReducerComp = () => {
const initialState = {
count: 0,
};
const Reducer = (state, action) => {
switch (action.type) {
case "INCREMENT":
return { count: state.count + 2 };
case "DECREMENT":
return { count: state.count - 2 };
case "RESET":
return { count: 0};
default:
return state;
}
};
const [state, dispatch] = useReducer(Reducer, initialState);
return (
{state.count}
dispatch({ type: "INCREMENT" })}>Increment
dispatch({ type: "DECREMENT" })}>Decrement
dispatch({ type: "RESET" })}>Reset
);
};

[@saquibkhan5172]

export const UseReducer = () => {
const initialState = {
count:0
}
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return {count: state.count + 2}

case 'DECREMENT':
return {count: state.count - 2}
case 'RESET':
return {count:0}

default:
break;
}
}
const [state, dispatch] = useReducer(reducer, initialState)
return(

{state.count}
dispatch({type:'INCREMENT'})}>INCREMENT
dispatch({type:'DECREMENT'})}>DECREMENT
dispatch({type:'RESET'})}>RESET

)
}