Escribo una aplicación React simple con dos componentes asignados a dos URL:

 App.tsx -- foo.tsx it's url is "/foo" -- bar.tsx it's url is "/bar"

En App.tsx, tengo un navegador que usa useHistory.push para permitir que el usuario salte entre "/foo" y "/bar". el nombre del usuario se capturará aquí y también se almacenará en un estado Redux.

En foo.tsx y bar.tsx, son muy parecidos pero cargan diferentes tipos de datos de la API. la estructura del código como:

 const user = useSelector((state: RootState) => state.user) useEffect(() => { const api = new Api(); async function getData() { const foo: any = await api.getFoo(user.foo) dispatch(setFooData(foo)) } }, [user.name])

Lo que había observado:

1. cuando accedí por primera vez a /foo, la página foo cargó todos los componentes y ejecutó useEffect una vez por fin, este proceso que es el diseño del gancho de reacción en el documento que había leído.
2. Sigo haciendo clic en la pestaña foo (useHistory.push("/foo")), no cambió nada en la página, lo que significa que useEffect no se invocó ya que su dependencia (user.name en este caso) no cambió.
3. Envié un nuevo valor a user.foo, vi que useEffect se invocó como esperado.
4. cuando salté a la "/ barra" y los procesos anteriores ocurrieron de manera similar para consultar los datos de la barra hacia atrás.
5. en este punto, vi que los datos de foo y bar estaban en estado Redux porque uso useHistory.push() para mantener la sesión (si entiendo correctamente). el propósito de hacerlo es porque me gustaría tener una verificación cruzada de los datos de foo y bar en las páginas /foo o /bar.
6. sin embargo, cuando volví a /foo desde /bar, se invocó useEffect aunque el valor de user.name permaneció igual. es como si useEffect ignorara la dependencia y considerara que esta vez era una nueva solicitud de banda y se ejecutó solo.
7. Verifiqué que todos los estados en la tienda Redux no cambiaron cuando salté hacia atrás. una cosa que puedo considerar es que useHistory.push llevó al navegador de vuelta a /foo, y const user = useSelector((state: RootState) => state.user) se ejecutó nuevamente, useEffect perdió la dependencia anterior para comparar, por lo que se ignoró la dependencia.

O bien, useHistory.push simplemente funciona de tal manera, cuando una URL ingresa en el historial, hará que useEffect se ejecute de inmediato sin importar cómo.

Estoy haciendo esta pregunta porque recordé que useEffect no se invocará cuando salte de otra URL, pero en ese momento comencé a usar reaccionar y no estoy seguro de cómo lo hice, y el historial de git había sido abrumado por mi numerosos compromisos :(

Para resumir, lo que quiero hacer es: cuando accedo a /foo, todos los datos se cargan y el estado de redux está listo; mismo proceso cuando accedo a otra url/bar. useEffect no se invoca cuando vuelvo a /foo desde /bar, a menos que envíe un nuevo nombre de usuario. tiene la intención de reducir las solicitudes a la API ya que ya había usado la tienda Redux para administrar los datos del usuario. Otra razón es que puedo darme cuenta de que mi comprensión sobre useHistory, useEffect y Redux es correcta.

¡Gracias!