Estoy tratando de entender este extraño comportamiento:
const [counter, setCounter] = useState<number>(1); useEffect(() => { setCounter(2); setTimeout(function () { console.log('counter = ', counter); // => counter = 1 }, 1000); }, []);Se llamará a su efecto cuando su componente se monte por primera vez, porque está pasando una matriz vacía de deps ... donde su variable de counter es 1
La función setCounter es una función async , la interfaz de usuario react-native ui insertará esa llamada en la pila de llamadas de función que se supone que deben llamarse en orden, pero la primera llamada de función insertada en esa pila de llamadas es su console.log , con un copia del valor de la variable de counter que es 1
Si desea imprimir el valor actualizado de counter , coloque counter en la lista de deps como:
const [counter, setCounter] = useState<number>(1); useEffect(() => { setCounter(2); }, []); useEffect(() => { setTimeout(function () { console.log('counter = ', counter); // => counter = 1 }, 1000); }, [counter]);Lo que vale la pena mencionar es que está utilizando el valor del estado del contador dentro de useEffect. Esto está dirigido por ESLint con la configuración predeterminada. Su efecto de uso depende de ese estado y debe agregarse a la matriz de dependencia. [Error de ESLint] [1]
Este uso correcto de useEffect haría que useTimeout se ejecutara 2 veces. En el renderizado inicial y después del renderizado. [1]: https://i.stack.imgur.com/yiLJi.png
