React hooks introduce useState para establecer el estado del componente. Pero, ¿cómo puedo usar ganchos para reemplazar la devolución de llamada como el siguiente código?
setState( { name: "Michael" }, () => console.log(this.state) );Quiero hacer algo después de que se actualice el estado.
Sé que puedo usar useEffect para hacer las cosas adicionales, pero tengo que verificar el valor anterior del estado que requiere un código de bits. Estoy buscando una solución simple que pueda usarse con useState hook.
Necesita usar useEffect hook para lograr esto.
const [counter, setCounter] = useState(0); const doSomething = () => { setCounter(123); } useEffect(() => { console.log('Do something after counter has changed', counter); }, [counter]); Si desea que se ignore la devolución de llamada useEffect durante el primer procesamiento inicial , modifique el código en consecuencia:
import React, { useEffect, useRef } from 'react'; const [counter, setCounter] = useState(0); const didMount = useRef(false); const doSomething = () => { setCounter(123); } useEffect(() => { // Return early, if this is the first render: if ( !didMount.current ) { return didMount.current = true; } // Paste code to be executed on subsequent renders: console.log('Do something after counter has changed', counter); }, [counter]);Si desea actualizar el estado anterior, puede hacer esto en ganchos:
const [count, setCount] = useState(0); setCount(previousCount => previousCount + 1);setState devolución de llamada de setState con useEffect , solo activando las actualizaciones de estado (no el estado inicial):
const [state, setState] = useState({ name: "Michael" }) const isFirstRender = useRef(true) useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false // toggle flag after first render/mounting return; } console.log(state) // do something after state has updated }, [state])useEffectUpdate function useEffectUpdate(callback) { const isFirstRender = useRef(true); useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; // toggle flag after first render/mounting return; } callback(); // performing action after state has updated }, [callback]); } // client usage, given some state dep const cb = useCallback(() => { console.log(state) }, [state]); // memoize callback useEffectUpdate(cb);