useState కి బదులుగా useReducer ఎప్పుడు ఉపయోగిస్తారు?

Question

Accepted Answer

`useReducer` అనేక `useState` setters-ను చెదరదీయడానికి బదులుగా, ఒక **pure reducer function**-లో state పరివర్తనలను కేంద్రీకరిస్తుంది. ఇది Redux pattern యొక్క React యొక్క నిర్మితమైన సంస్కరణ. ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## ఇది ఎలా పనిచేస్తుంది మీరు **action**-ను `dispatch` చేస్తారు (ఒక ఈవెంట్‌ను వివరించే సాధారణ object). React `reducer(currentState, action)` పిలుస్తుంది మరియు తిరిగి ఇచ్చిన object-ను కొత్త state-గా ఉపయోగిస్తుంది. Reducer **pure** (ఎటువంటి side effects లేదు, mutation లేదు), ఇది logic-ను predictable మరియు isolated-లో unit-testable చేస్తుంది. ## useState కంటే ఎప్పుడు సూచించాలి - తరువాతి state అతిశయం కాని విధాలలో **గత** state-పై **ఆధారపడి** ఉంటుంది. - అనేక విలువలు **కలిసి మారుతాయి** (ఉదా. `count` + `step` + `error`). - Update logic చాలా సంక్లిష్టమైనది, handlers-మధ్య దీనిని పునరావృతం చేస్తారు. ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` బోనస్: `dispatch` **stable identity**-ను కలిగి ఉంది, కాబట్టి context-ద్వారా లేదా memoized children-కి దీనిని పంపడం re-renders కలిగించదు. సరళమైన, స్వతంత్ర విలువల కోసం, plain `useState` ఇప్పటికీ స్పష్టంగా ఉంది.