Cuando ejecuto el siguiente código y hago clic en el botón, logro activar la función useEffect:
const { useState, useEffect } = React; const Example = () => { const [bool, setBool] = useState(false); useEffect(() => { console.log(bool); }, [bool]); return ( <button type='button' onClick={() => { setBool(!bool); setBool(!bool); }} > Check </button> ); }; ReactDOM.render( <Example />, root ) <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>Sin embargo, cuando escribo:
const { useState, useEffect } = React; const Example = () => { const [bool, setBool] = useState(false); useEffect(() => { console.log(bool); }, [bool]); return ( <button type='button' onClick={() => { setBool(true); setBool(false); }} > Check </button> ); }; ReactDOM.render( <Example />, root ) <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>Entiendo que la función useEffect no se activa porque setBool es asíncrono, y React fusiona estos cambios para que el estado final no cambie (bool sigue siendo falso).
Mi pregunta es, ¿por qué React no puede detectarlo en el caso de !bool & !bool que aparecí.
Gracias
En el primer caso, está tomando el valor actual de bool (cualquiera que sea ese valor) y negándolo antes de establecerlo en el estado. Como resultado, el estado cambia, por lo que se activa useEffect .
En el segundo caso, está proporcionando un valor codificado. Si el valor de bool ya es false , entonces setBool(false) no tendrá ningún efecto en el estado; como resultado, useEffect no se activará.