0
133
VistasReact Hooks - usando useState vs solo variables
React Hooks nos da la opción useState, y siempre veo comparaciones entre Hooks y Class-State. Pero, ¿qué pasa con los Hooks y algunas variables regulares?
Por ejemplo,
function Foo() { let a = 0; a = 1; return <div>{a}</div>; }No utilicé Hooks, y me dará los mismos resultados que:
function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; }Entonces, ¿cuál es la diferencia? Usar Hooks aún más complejo para ese caso... Entonces, ¿por qué empezar a usarlo?
3 Respuestas
Responde la pregunta0
La razón es que si useState vuelve a mostrar la vista. Las variables por sí mismas solo cambian bits en la memoria y el estado de su aplicación puede desincronizarse con la vista.
Compara estos ejemplos:
function Foo() { const [a, setA] = useState(0); return <div onClick={() => setA(a + 1)}>{a}</div>; } function Foo() { let a = 0; return <div onClick={() => a + 1}>{a}</div>; } En ambos casos, a cambio al hacer clic, pero solo cuando usa useState , la vista muestra correctamente el valor actual de a .
0
Las variables locales se restablecerán cada vez que se produzca una mutación, mientras que el estado se actualizará:
function App() { let a = 0; // reset to 0 on render/re-render const [b, setB] = useState(0); return ( <div className="App"> <div> {a} <button onClick={() => a++}>local variable a++</button> </div> <div> {b} <button onClick={() => setB(prevB => prevB + 1)}> state variable b++ </button> </div> </div> ); } 
0
Actualizar el estado hará que el componente se vuelva a renderizar, pero los valores locales no.
En su caso, representó ese valor en su componente. Eso significa que, cuando se cambia el valor, el componente se debe volver a representar para mostrar el valor actualizado.
Por lo tanto, será mejor usar useState que el valor local normal.
function Foo() { let a = 0; a = 1; // there will be no re-render. return <div>{a}</div>; } function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // re-render required return <div>{a}</div>; }