Question: Is there a difference between these two useReducers in the following codesandbox?
https://codesandbox.io/s/frosty-dubinsky-no5rf?file=/src/App.js
import React, { useReducer } from "react"; export default function App() { const [state1, dispatch1] = useReducer(reducer1, 0); const [state2, dispatch2] = useReducer(reducer2, 0); return ( <div className="App"> <div>1: {`${state1}`}</div> <div>2: {`${state2}`}</div> <button onClick={() => { dispatch1(1); dispatch2(state2 + 1); }} > Click </button> </div> ); } function reducer1(state, action) { return state + action; } function reducer2(state, action) { return action; } Answer: yes. By using the state that is automatically passed in, reducer1 is safe to be called multiple times because it always gets the most up-to-date state.
reducer2 is not safe to call multiple times because it looks at stale state when it’s called subsequent times. Here's an example of where it breaks:
https://codesandbox.io/s/bitter-currying-bsx6g?file=/src/App.js
//answer: run this code import React, { useReducer } from "react"; export default function App() { const [state1, dispatch1] = useReducer(reducer1, 0); const [state2, dispatch2] = useReducer(reducer2, 0); return ( <div className="App"> <div>1: {`${state1}`}</div> <div>2: {`${state2}`}</div> <button onClick={() => { dispatch1(1); dispatch1(1); dispatch2(state2 + 1); dispatch2(state2 + 1); }} > Click </button> </div> ); } function reducer1(state, action) { return state + action; } function reducer2(state, action) { return action; } 
Top comments (0)