Tengo una ruta definida de la siguiente manera:
<Route path={`list`} element={<ListPage />}> <Route path={`sidePanel1`} element={<SidePanel1 />} /> <Route path={`sidePanel2`} element={<SidePanel2 />} /> <Route index element={<Navigate to={`sidePanel1`} replace />}/> </Route> Entonces, cuando se escribe /list , se redirigirá a /list/sidePanel1 .
en el componente ListPage tengo esto:
const ListPage = (): JSX.Element => { const [data, setData] = useState<ListDto[]>([]); const location = useLocation(); useEffect(() => { getList() .then(response => { setData(response.data); }) .catch(() => { setIsLoading(false); }); }, [location]); return ( <ListTable data={data}/> <SidePanelStyles> <Outlet /> </SidePanelStyles> ); }; Entonces, mi problema es que cada vez que escribo /list/ useEffect se activará porque la ubicación ha cambiado, y luego se activará por segunda vez cuando se redirija a /list/sidePanel1 .
Quiero que solo se active después de que me redirijan.
Como puedo resolver esto ?
En lugar de redirigir y renderizar dos veces, simplemente renderice el componente SidePanel1 en la ruta de índice también.
Ejemplo:
<Route path="list" element={<ListPage />}> <Route index element={<SidePanel1 />} /> <Route path="sidePanel1" element={<SidePanel1 />} /> <Route path="sidePanel2" element={<SidePanel2 />} /> </Route>Una solución de propósito general para reaccionar solo al último cambio en una secuencia rápida de cambios es usar un "rebote".
Es decir, un retraso entre el momento en que se dispara el efecto y cuando se llama getList , de modo que si el efecto se vuelve a disparar antes de que finalice el retraso, la llamada pendiente se cancelará.
function useDebouncedEffect(delay, effect, triggerParams) { useEffect(() => { const timeout = setTimeout(f, delay) return () => clearTimeout(timeout) }, triggerParams) } useDebouncedEffect(300, () => { getList() .then(response => { setData(response.data); }) .catch(() => { setIsLoading(false); }); }, [location]);