function foo1() { return { bar: "hello" }; } function foo2() { return { bar: "hello"; } }Hay dos funciones 'foo1' y 'foo2', cuál será la posible salida y cuál es la diferencia clave entre estas funciones.
Prefacio: Como se muestra, ambos causarán infinitas re-renderizaciones. Las llamadas a setState solo deben ser una reacción a que suceda algo más.
setState(state + 1) usa el valor de state dentro del alcance (que podría estar obsoleto), agrega uno y lo establece como el nuevo valor. Si state es obsoleto (el valor del estado real se ha actualizado mientras tanto), eso sobrescribirá una actualización anterior.
setState(state => state + 1) le pide a setState que le devuelva la llamada con la versión actualizada garantizada de state , le agrega uno y luego lo establece como el valor.
Cualquiera de los dos está bien en una situación adecuada, pero por lo general desea el segundo formulario (devolución de llamada), no el primero, al actualizar el estado en función del estado existente.
Más aquí en la documentación de React.
Aquí hay un ejemplo artificial que demuestra la diferencia usando un valor state1 obsoleto:
const {useState, useEffect} = React; const Example = () => { const [state1, setState1] = useState(0); const [state2, setState2] = useState(0); useEffect(() => { const timer = setInterval(() => { // THIS IS INCORRECT (for this situation), it uses a stale value // of `state1` setState1(state1 + 1); // This is correct (for this situation) setState2(state2 => state2 + 1); }, 500); return () => { clearInterval(timer); }; }, []); return <div> <div>state1 = {state1}</div> <div>state2 = {state2}</div> </div>; }; ReactDOM.render(<Example />, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> Hay algunas herramientas (como ESLint con complementos apropiados) que le advertirán sobre algunas situaciones en las que está utilizando variables de estado obsoletas; por ejemplo, la regla de dependencias exhaustive-deps de eslint-plugin-react-hooks emitiría una advertencia por encima de que state1 faltaba en la matriz de dependencias useEffect .