State update after route transition

Problem

A component starts asynchronous work and then a route transition occurs before the work completes. When the async task resolves, it updates state that no longer matches the active route.

Under rapid navigation or slow network conditions, outdated async results can commit state after the user has moved to a different page, causing visual flickers or data appearing briefly in the wrong context.

• Async request triggered on mount.
• User navigates away quickly.
• Async resolves after route change.
• State update applies to outdated screen context.

1useEffect(() => {
2  console.log("[BROKEN] request started for route:", route);
3
4  void (async () => {
5    const data = await fetchData(route);
6    console.log("[BROKEN] request resolved for route:", route);
7    setData(data);
8  })();
9}, [route]);

Because the async callback closes over the original route value, late responses may commit data that no longer matches the current navigation state.

Solution

Associate each route-triggered request with a request identity. Only allow the most recent route request to commit state.

Instead of assuming navigation invalidates previous async tasks, explicitly validate that the response still corresponds to the active route before updating state.

1const requestIdRef = useRef(0);
2
3useEffect(() => {
4  const requestId = ++requestIdRef.current;
5  console.log("[FIXED] request started for route:", route);
6
7  void (async () => {
8    const data = await fetchData(route);
9
10    if (requestId !== requestIdRef.current) {
11      console.log("[FIXED] stale route response ignored");
12      return;
13    }
14
15    console.log("[FIXED] request committed for route:", route);
16    setData(data);
17  })();
18}, [route]);

By validating request identity against the current route, outdated responses are ignored and UI state remains aligned with active navigation context.