export default function App() { // as the useState runs before useEffect, // it means count is avaliable to use in the useEffect // but why it is not running? useEffect(() => { console.log("I only run on first render.", count); },[count]); useEffect(() => { console.log("I runs on every render/re-render", count); }); // if i use const in place of var, it throws error of lexical scope // but as useState run before the effect the count is already in scope, right? var [count, setCount] = useState(0); useEffect(() => { console.log("run on first render and whenever the count changes", count); }, [count]); return ( <div className="App"> <p>Count: {count}</p> <button onClick={() => setCount((prev) => prev + 1)}>count +</button> </div> ); }Creo que este es el orden de ejecución para el primer render:
ejecutar inicializadores perezosos (o podemos decir ejecutar useState) -> redner -> dom update -> broser paint -> ejecutar efecto
Y para volver a renderizar: todo excepto los inicializadores perezosos y la limpieza de efectos antes de ejecutar nuevos efectos.
Eslint advierte así
var count: el número 'count' se usó antes de definirlo. (no usar antes de definir) eslint
Debe mover useState para la declaración de count antes de useEffect que lo usa como una dependencia.
var [count, setCount] = useState(0); useEffect(() => { console.log("I only run on first render.", count); }, [count]);Su primer efecto es usar count antes de que se haya definido, por lo que siempre está undefined .