Así que estoy tratando de entender useRef correctamente, pero hay una cosa que no puedo entender. Ver este ejemplo básico
function App() { const [counter, setCounter] = useState(0); const previousCountRef = useRef(null); useEffect(() => { previousCountRef.current = counter },[counter]) return( <> <h1>{counter}</h1> {previousCountRef.current !== null && (<h5>Prev: {previousCountRef.current}</h5>)} // check if previous is not null <button onClick={() => setCounter(counter + 1)}>CLICKME</button> ) </> }Entonces, en este ejemplo, incrementamos el contador en 1 si presionamos el botón. nuestro useEffect solo se actualiza si cambiamos el valor de contador. Nuestra variable ref puede almacenar el valor del contador antes de que se cambie.
Esa es la parte que me confunde. ¿Cómo puede useEffect almacenar el valor del contador anterior? Si hacemos clic en el botón, el contador se actualiza. Debido a que el contador se actualiza, useEffect puede ejecutarse y se establece igual al valor de contador. ¿Cómo está la variable ref 1 paso atrás?
En el procesamiento inicial, la variable de contador cambia de nulo a 0, por lo que también ejecuta useEffect en esa situación, configurando así prevCountRef.current = 0 también. Están sincronizados.
Creo que la respuesta tiene dos partes:
useEffect se ejecuta después del procesamiento. Entonces, este código previousCountRef.current = counter se ejecuta después de setCounter se haya completado y el componente se haya vuelto a procesar.previousCountRef.current = counter no activa una nueva representación para que vea el nuevo valor en su JSX.Esto lleva a que la referencia se imprima un paso atrás, aunque es posible que su valor actual actual ya se haya actualizado para que coincida con el estado.