Una cosa que recientemente me confundió es cuál es la mejor manera de ejecutar efectos después de una llamada a useState , cuando useState no cambia necesariamente el valor de estado anterior. Por ejemplo, supongamos que tengo una función de envío en un formulario. También diga que tengo un estado llamado randomNumber , y diga que en esa función de envío llamo a setRandomNumber y establezco el estado del número aleatorio en un número aleatorio de 1-2. Ahora digamos que, por alguna razón, cada vez randomNumber , independientemente de si su valor cambia o no, queremos actualizar el número en alguna base de datos y navegar a una página diferente. Si uso un useEffect(() => {updateDatabase(); }, [randomNumber]) , el problema es que esto actualizará la base de datos incluso cuando el componente funcional se muestre por primera vez, lo cual no quiero. Además, si el número randomNumber no cambia porque elegimos el mismo número aleatorio dos veces, no actualizaremos la base de datos después de la segunda llamada a setRandomNumber y no navegaremos a una página diferente que no quiero.
¿Cuál sería la mejor manera de 'esperar' una llamada de useState ? Leí algunos artículos que decían que potencialmente deberíamos usar flushSync , pero probé esto y parece que no funciona y parece que esta es una solución muy inestable a partir de ahora.
¡¡¡Gracias!!!
Tienes 2 solicitudes diferentes aquí.
useEffect de uso en el primer render. Para esto, podría emplear useRef ya que esto no desencadena una nueva representación const Comp = () => { const firstRender = useRef(true); useEffect(() => { if (firstRender.current) { firstRender.current = false; return } else { // do your stuff } }, [randomNumber]) }useEffect incluso si obtiene el mismo número. Probablemente la forma más sencilla sería envolver su número dentro de un objeto y siempre generar un nuevo objeto al generar un nuevo número. De esta manera, obtendrá una nueva referencia todo el tiempo y useEffect siempre se activará. Si ya tiene un objeto, puede crear una copia usando el operador de extensión . Algo como esto: const Comp = () => { const [randomNumber, setRandomNumber] = useState({number: 0}) useEffect(() => { console.log(randomNumber.number) }, [randomNumber]) // generate a new random number and set it like this setRandomNumber({number: Math.random() + 1)) }