En el pasado, se nos advirtió explícitamente que llamar a setState({myProperty}) es asíncrono y que el valor de this.state.myProperty no es válido hasta la devolución de llamada o hasta el siguiente método render() .
Con useState, ¿cómo obtengo el valor del estado después de actualizarlo explícitamente?
¿Cómo funciona esto con ganchos? Por lo que puedo decir, la función de establecimiento de useState no recibe una devolución de llamada, por ejemplo
const [value, setValue] = useState(0); setValue(42, () => console.log('hi callback');no da como resultado que se ejecute la devolución de llamada.
Mi otra solución en el viejo mundo es colgar una variable de instancia (eg this.otherProperty = 42) en la clase, pero eso no funciona aquí, ya que no hay una instancia de función para reutilizar (no this en modo estricto).
Puede usar useEffect para acceder al estado más reciente después de actualizarlo. Si tiene varios enlaces de estado y le gustaría realizar un seguimiento de la actualización solo en una parte de ellos, puede pasar el estado en una matriz como el segundo argumento de la función useEffect :
useEffect(() => { console.log(state1, state2)}, [state1]) El useEffect anterior solo se llamará cuando se actualice state1 y no debe confiar en el valor state2 desde dentro de esta función, ya que puede no ser el último.
Si tiene curiosidad acerca de si la función de actualización creada por useState es síncrona, es decir, si React procesa por lotes la actualización de estado cuando usa ganchos, esta respuesta le brinda una idea al respecto.
Bueno, si consulta los documentos relevantes, encontrará...
const [state, setState] = useState(initialState);Devuelve un valor con estado y una función para actualizarlo.
Durante la representación inicial, el estado devuelto (estado) es el mismo que el valor pasado como primer argumento (estado inicial).
La función setState se utiliza para actualizar el estado. Acepta un nuevo valor de estado y pone en cola una nueva representación del componente.
setState(newState);Durante las representaciones posteriores, el primer valor devuelto por useState siempre será el estado más reciente después de aplicar las actualizaciones.
Entonces, su nuevo estado, sea el que sea, es lo que acaba de establecer en useState , es decir, el valor de initialState . Va directamente al state , que se actualiza de forma reactiva a partir de entonces. Citando más de los documentos relevantes:
¿Qué hace llamar a useState? Declara una “variable de estado”. Nuestra variable se llama conteo pero podríamos llamarla de otra forma, como banana. Esta es una forma de "preservar" algunos valores entre las llamadas de función: useState es una nueva forma de usar exactamente las mismas capacidades que this.state proporciona en una clase. Normalmente, las variables "desaparecen" cuando la función sale, pero React conserva las variables de estado.
Si desea hacer algo cada vez que se actualice su estado, simplemente use componentDidUpdate . (docs)