Tal vez sea una pregunta simple, pero no entiendo completamente useState
Me confundí con cuándo usar la devolución de llamada con useState, por ejemplo, tengo un gancho
const[count,setCount] = useState(0)Podemos actualizar fácilmente, por ejemplo, si quiero actualizar el número, puedo hacer:
setCount(count+1)Pero si tenemos algún código como setInterval, queremos aumentar el conteo cada 1 segundo, cuando hacemos lo mismo que arriba
setTimeout(()=>{ setCount(count+1) },1000) console.log(count)No aumentará incluso 1s pasado
Pero lo hacemos
setTimeout(()=>{ setCount((count)=>{count+1} },1000) console.log(count)Pero porque funciona???
Mi pregunta es
¿Cuándo usar la devolución de llamada en useState?
En React, cuando actualiza una propiedad de estado, con respecto a su valor anterior, debe usar,
setState((state,props)=>{ return doSomethingWith(state.property)})
En su código (usando ganchos): setCount((count)=>(count+1))
Esto se debe al hecho de que las actualizaciones de estado pueden ser asíncronas en React .
Por cierto, setCount((count)=>(count+1)) no es lo mismo que setCount((count)=>{count+1}) . En el segundo caso, las llaves forman una declaración vacía y, por lo tanto, no se devuelve count+1 . En las funciones lambda, el retorno automático ocurre solo en el caso de una sola expresión .
Siempre que una actualización del valor del estado actual dependa del estado anterior, podemos usar una función de devolución de llamada.
si tenemos algún código como setInterval, queremos aumentar el conteo cada 1 segundo
Para setInterval , cada segundo necesitamos actualizar el recuento en función del estado anterior. Esto actualizará el recuento cada intervalo de 1 segundo.
setInterval(() => { setCount((count) => count + 1); }, 1000);
Utiliza la devolución de llamada cuando desea mantener el estado anterior y agregarle algo.
Por ejemplo, digamos que tenemos un contador en su caso
const [counter, setCounter] = useState(0);Si quiero que este valor aumente cada segundo o cuando presiono un botón, usaría lo siguiente:
setCounter(prev => (prev + 1); // Or setCounter(counter => (counter + 1); prev tendrá el mismo valor que counter , no importa cómo lo llames.
Y dado que usará setInterval, tendrá que hacer esta operación en un gancho useEffect es la razón por la que necesitará la devolución de llamada; de lo contrario, si sigue configurando el valor para counter + 1 sin usar la devolución de llamada, solo será 0 + 1 todo el tiempo.
A menos que quieras usarlo para algo como aumentar el recuento de un botón Me gusta. En ese caso, no necesita devoluciones de llamada.
Intente leer y comprender esos artículos y documentos: