Tengo un par de estados establecidos en los proveedores que activan una serie de efectos en mi aplicación de reacción. Se suceden espalda con espalda en un gancho. El segundo estado establecido tiene algunos efectos que activa que necesitan asegurarse de que el primer gancho se haya propagado completamente a través de la aplicación. Actualmente, el primero no ha realizado todos los cambios necesarios, por lo que algunas funciones activadas por el segundo provocan un comportamiento extraño. ¿Cómo se asegura de que el segundo solo ocurra después de que el primero se propague por completo?
setSomeStateValue(x); setValueToTriggersEffectsThatRelyOnUpdatesFromTheOther(y);Aquí hay algunas cosas que he hecho que funcionan pero tienen sus problemas:
1.) establecer tiempo de espera (..., 0)
setSomeStateValue(x); setTimeout(otherSetState,0);Esto empuja el segundo a un lote posterior. Me gusta este porque no implica agregar código adicional para observar otras variables de estado que quizás no deberían preocupar al código, pero parece un poco de magia negra y posiblemente podría causar problemas difíciles de depurar.
2.) monitorear las cosas que necesito configurar antes de llamar al segundo estado establecido
Este parece un poco más legible, pero implica importar y ver cosas que pueden no tener sentido que pertenezcan al código relacionado. Básicamente agregando un useEffect que observa todo lo que necesito configurar antes de que ocurra la segunda llamada. Además, si algo cambia con respecto a lo que se necesita para tener lista la segunda llamada, entonces este código también tendrá que cambiar, ya que la primera solución no debería requerir una actualización.
Ambos funcionan pero tienen sus inconvenientes. Me gustaría refactorizar la segunda llamada para dar cuenta de estos problemas, pero sería un refactor demasiado grande en este punto para convertirlo en una opción factible. ¿Hay alguna forma nativa de garantizar esta u otra estrategia aquí que me falta? Y si no, ¿cuál de las soluciones anteriores es mejor?
En situaciones en las que setState depende de un setState anterior o de un estado específico del componente, puede hacer dos cosas. Primero,
setState(updater, [callback]) React.useEffect(() => { if( desired_state){ secondSetState() }, [ desired_state ] }