Estoy aprendiendo a React.js y en particular estoy estudiando useEffect; No puedo entender por qué tan pronto como ejecuto el código, el registro de la consola se imprime dos veces, incluso si no se llama a useEffect.
export default function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("test");
}, [count]);
return (
<>
<button onClick={() => setCount(count + 1)}>+</button>
<p>Add: {count}</p>
</>
);
}
¡Gracias a los que me ayudarán!
El uso de React 18 en modo estricto hará que sus componentes se rendericen dos veces durante el desarrollo.
Esto se espera y no debería romper su código.
Este comportamiento de solo desarrollo lo ayuda a mantener los componentes puros. React usa el resultado de una de las llamadas e ignora el resultado de la otra llamada. Siempre que sus funciones de componente y cálculo sean puras, esto no debería afectar su lógica. Sin embargo, si son impuros accidentalmente, esto le ayuda a detectar los errores y corregirlos.
Referencia: React Docs