Fix: Breadcrumb disappearing #3

tymurbaniak · 2026-03-22T22:58:33Z

tymurbaniak commented

2026-03-22 22:58:33 +00:00

Summary

Fixes stale closure bug in createPathSegment (Graph.tsx) that caused breadcrumbs to disappear when navigating backwards.

Root Cause

The onClick handler in createPathSegment closed over the graphsPath variable from the render at the time the segment was created. When the user navigated deeper (e.g. Main → Ocean → End), oceanSegment.onClick still referenced the old graphsPath = [mainSegment]. Clicking "Ocean" would call findIndex on that stale snapshot, get -1, then splice(0) wiped the entire breadcrumb array.

Fix

Changed the onClick handler to use the functional updater form of setGraphsPath, so findIndex always runs against the current state instead of a stale closure:

// Before (stale closure):
const index = graphsPath.findIndex(p => p.key === pathSegmentId);
setGraphsPath(prev => { prev.splice(index + 1); return [...prev]; });

// After (uses current state, also avoids mutating prev):
setGraphsPath(prev => prev.slice(0, prev.findIndex(p => p.key === pathSegmentId) + 1));

Closes #2

## Summary - Fixes stale closure bug in `createPathSegment` (Graph.tsx) that caused breadcrumbs to disappear when navigating backwards. ## Root Cause The `onClick` handler in `createPathSegment` closed over the `graphsPath` variable from the render at the time the segment was created. When the user navigated deeper (e.g. Main → Ocean → End), `oceanSegment.onClick` still referenced the old `graphsPath = [mainSegment]`. Clicking "Ocean" would call `findIndex` on that stale snapshot, get `-1`, then `splice(0)` wiped the entire breadcrumb array. ## Fix Changed the `onClick` handler to use the functional updater form of `setGraphsPath`, so `findIndex` always runs against the **current** state instead of a stale closure: ```ts // Before (stale closure): const index = graphsPath.findIndex(p => p.key === pathSegmentId); setGraphsPath(prev => { prev.splice(index + 1); return [...prev]; }); // After (uses current state, also avoids mutating prev): setGraphsPath(prev => prev.slice(0, prev.findIndex(p => p.key === pathSegmentId) + 1)); ``` Closes #2

tymurbaniak added 1 commit 2026-03-22 22:58:33 +00:00

fix: resolve stale closure causing breadcrumbs to disappear on back-navigation (closes #2 ) eb3a23ab03

The onClick handler in createPathSegment closed over the graphsPath variable
from the render when the segment was created. By the time a breadcrumb was
clicked (after further navigation), that closure was stale, so findIndex
returned -1 and splice(0) wiped the entire breadcrumb array.

Fix: use the functional updater form of setGraphsPath so findIndex runs
against the current state rather than a stale snapshot.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tymurbaniak merged commit 4733916523 into master

2026-03-23 14:41:42 +00:00

tymurbaniak referenced this issue from a commit

2026-03-23 14:41:44 +00:00

Merge pull request 'Fix: Breadcrumb disappearing' (#3) from claude/issue-2 into master

tymurbaniak referenced this pull request

2026-03-23 15:08:14 +00:00

Fix: Create tests for issue #2 #7

Sign in to join this conversation.