¡Estoy probando la nueva API useEffect de React Hooks y parece seguir ejecutándose para siempre, en un bucle infinito! Solo quiero que la devolución de llamada en useEffect se ejecute una vez. Aquí está mi código de referencia:
Haga clic en "Ejecutar fragmento de código" para ver que la cadena "Ejecutar useEffect" se imprime infinitamente en la consola.
function Counter() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log('Run useEffect'); setCount(100); }); return ( <div> <p>Count: {count}</p> </div> ); } ReactDOM.render(<Counter />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>Esto sucede porque useEffect se activa después de cada procesamiento, que es la invocación de la función Counter() en este caso de componentes funcionales. Cuando realiza una llamada setX devuelta desde useState en un useEffect , React renderizará ese componente nuevamente y useEffect se ejecutará nuevamente. Esto provoca un bucle infinito:
Counter() → useEffect() → setCount() → Counter() → useEffect() → ... (bucle)
Para hacer que su useEffect se ejecute solo una vez, pase una matriz vacía [] como segundo argumento, como se ve en el fragmento revisado a continuación.
La intención del segundo argumento es decirle a React cuando cambia cualquiera de los valores en el argumento de la matriz:
useEffect(() => { setCount(100); }, [count]); // Only re-run the effect if count changes Puede pasar cualquier cantidad de valores a la matriz y useEffect solo se ejecutará cuando cambie cualquiera de los valores. Al pasar una matriz vacía, le decimos a React que no rastree ningún cambio, solo se ejecute una vez, simulando efectivamente el componentDidMount .
function Counter() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log('Run useEffect'); setCount(100); }, []); return ( <div> <p>Count: {count}</p> </div> ); } ReactDOM.render(<Counter />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>Lee más sobre useEffect .