LinkedIn

State update after unmount during navigation

Sumeet Kumar Paul

Frontend Engineer

Problem

When a component starts asynchronous work and the user navigates away before it resolves, the async callback may still attempt to update state. At that point, the component no longer exists in the UI tree.

This failure usually appears only under fast navigation or slow async resolution, making it easy to miss during development and code review.

• ●Async work initiated inside an effect.
• ●User navigates away before async resolves.
• ●Component unmounts while async is still running.
• ●Async callback commits state after unmount.

1useEffect(() => {
2  console.log("[BROKEN] Screen mounted → async work started");
3
4  void (async () => {
5    await delay(800);
6    console.log("[BROKEN] Async finished → updating screen");
7    setStatus("loaded");
8  })();
9
10  return () => {
11    console.log("[BROKEN] Screen unmounted");
12  };
13}, []);

The async task has no awareness of the component lifecycle. Once started, it continues executing even after the component has been removed from the UI.

Solution

Each effect execution is assigned an ownership identity. Cleanup invalidates that ownership, and async work is only allowed to commit state if its ownership is still valid.

1const effectIdRef = useRef(0);
2
3useEffect(() => {
4  const effectId = ++effectIdRef.current;
5  console.log("[FIXED] Screen mounted → ownership id:", effectId);
6
7  void (async () => {
8    await delay(800);
9
10    if (effectId !== effectIdRef.current) {
11      console.log("[FIXED] Async finished → ownership no longer valid, update skipped:", effectId);
12      return;
13    }
14
15    console.log("[FIXED] Async finished → ownership valid, screen updated:", effectId);
16    setStatus("loaded");
17  })();
18
19  return () => {
20    if (effectIdRef.current === effectId) {
21      effectIdRef.current = -1;
22    }
23    console.log("[FIXED] Screen unmounted → ownership invalidated:", effectId);
24  };
25}, []);

Instead of relying on mount flags, the async work validates ownership before committing state. Cleanup explicitly invalidates intent, making teardown safe even under rapid navigation.

This issue is not about React warnings or effect cleanup syntax. It occurs whenever asynchronous work is allowed to outlive the UI intent that created it. Treating async callbacks as untrusted unless their ownership is still valid prevents state leaks, memory issues, and subtle UI corruption during navigation.