Stale closure in click outside listener

Sumeet Kumar Paul

Frontend Engineer

Feb 13, 2026

Problem

Event listeners defined inside effects capture state from the render during which they were created. If the listener is attached once and depends on state that later changes, it may continue operating on outdated values.

●Dropdown open state toggled by button.
●Document click listener attached once on mount.
●Listener captures initial 'open' value.
●UI state and listener logic fall out of sync.

page.tsx

srcapppracticestale-closure-click-outsidepage.tsx

1useEffect(() => {
2  function handleClick(event: MouseEvent) {
3    console.log("[BROKEN] listener sees open =", open);
4
5    const target = event.target as Node;
6    const isOutside =
7      containerRef.current &&
8      !containerRef.current.contains(target);
9
10    if (open && isOutside) {
11      console.log("[BROKEN] closing dropdown");
12      setOpen(false);
13    }
14  }
15
16  document.addEventListener("click", handleClick);
17
18  return () => {
19    document.removeEventListener("click", handleClick);
20  };
21}, []);

Because the effect runs only once, the event listener permanently captures the initial value of 'open'. The dropdown state changes visually, but the listener continues evaluating stale state.

Solution

Keep the event listener stable, but separate state freshness from subscription lifecycle. Store the latest state in a mutable ref and read from it inside the listener.

page.tsx

srcapppracticestale-closure-click-outsidepage.tsx

1const openRef = useRef(open);
2const containerRef = useRef<HTMLDivElement | null>(null);
3
4useEffect(() => {
5  openRef.current = open;
6}, [open]);
7
8useEffect(() => {
9  function handleClick(event: MouseEvent) {
10    const target = event.target as Node;
11    const isOutside =
12      containerRef.current &&
13      !containerRef.current.contains(target);
14
15    console.log("[FIXED] click detected | openRef:", openRef.current, "| outside:", isOutside);
16
17    if (openRef.current && isOutside) {
18      console.log("[FIXED] closing dropdown");
19      setOpen(false);
20    }
21  }
22
23  document.addEventListener("click", handleClick);
24
25  return () => {
26    document.removeEventListener("click", handleClick);
27  };
28}, []);

The listener remains attached only once, preventing unnecessary re-subscriptions. State freshness is handled independently through a ref, ensuring the dropdown logic always evaluates the latest value without closure drift.

Closures capture values at creation time. When subscriptions remain stable but state changes over time, logic may silently operate on outdated data. Separating subscription stability from state freshness prevents subtle UI inconsistencies and aligns event handling with real user behavior.

Keywords

stale closure, react event listener bug, click outside issue, frontend state safety, ui correctness

Stale closure in click outside listener

Sumeet Kumar Paul

Frontend Engineer

2 min readSource code

Feb 13, 2026

Problem

●Dropdown open state toggled by button.
●Document click listener attached once on mount.
●Listener captures initial 'open' value.
●UI state and listener logic fall out of sync.

page.tsx

srcapppracticestale-closure-click-outsidepage.tsx

1useEffect(() => {
2  function handleClick(event: MouseEvent) {
3    console.log("[BROKEN] listener sees open =", open);
4
5    const target = event.target as Node;
6    const isOutside =
7      containerRef.current &&
8      !containerRef.current.contains(target);
9
10    if (open && isOutside) {
11      console.log("[BROKEN] closing dropdown");
12      setOpen(false);
13    }
14  }
15
16  document.addEventListener("click", handleClick);
17
18  return () => {
19    document.removeEventListener("click", handleClick);
20  };
21}, []);

Because the effect runs only once, the event listener permanently captures the initial value of 'open'. The dropdown state changes visually, but the listener continues evaluating stale state.

Solution

Keep the event listener stable, but separate state freshness from subscription lifecycle. Store the latest state in a mutable ref and read from it inside the listener.

page.tsx

srcapppracticestale-closure-click-outsidepage.tsx

1const openRef = useRef(open);
2const containerRef = useRef<HTMLDivElement | null>(null);
3
4useEffect(() => {
5  openRef.current = open;
6}, [open]);
7
8useEffect(() => {
9  function handleClick(event: MouseEvent) {
10    const target = event.target as Node;
11    const isOutside =
12      containerRef.current &&
13      !containerRef.current.contains(target);
14
15    console.log("[FIXED] click detected | openRef:", openRef.current, "| outside:", isOutside);
16
17    if (openRef.current && isOutside) {
18      console.log("[FIXED] closing dropdown");
19      setOpen(false);
20    }
21  }
22
23  document.addEventListener("click", handleClick);
24
25  return () => {
26    document.removeEventListener("click", handleClick);
27  };
28}, []);

Keywords

stale closure, react event listener bug, click outside issue, frontend state safety, ui correctness

Stale closure in click outside listener

Problem

Solution

Keywords

More Cases

State update after route transition

Optimistic UI rollback failure

Double submit caused by UI state lag

State update after unmount during navigation

Stale closure in click outside listener

Problem

Solution

Keywords

More Cases

State update after route transition

Optimistic UI rollback failure

Double submit caused by UI state lag

State update after unmount during navigation