Header reload even on route change on same basepath

[diana-villalvazo-wgu]

As part of the work done on Instructor Dashboard, we used Nav from paragon with Link from react-router-dom to handle correctly the route changes, even if we use relative routes like "New tab" (using "/my_tab" route on "to" prop for Link) on the demo recording, frontend-base header reloads every time.

Screen.Recording.2026-03-04.at.1.31.49.p.m.mov

At first we thought was an issue on our implementation but same happens on frontend base example app:

Screen.Recording.2026-03-04.at.1.41.29.p.m.mov

[arbrandes]

A more analytical way to replicate the problem is by adding a console.log() to the top of the BarLink header item in npm run dev mode. You'll see the line in the console whenever the item is re-rendered, and indeed it's being re-rendered every time we go from / to /slots, for example. Ideally, that wouldn't be the case.

Here's what I think is happening:

The re-render chain:

1. Navigation changes → useLocation() in useSlotOperations (hooks.ts:16) returns a new location object
2. The useEffect fires, calling setOperations() with a new array from getSlotOperations() — even though the operations are identical
3. This cascades: useWidgetOperations → useSortedWidgetOperations → useWidgetsForId → createWidgets()
4. createWidgets() creates new WidgetProvider JSX wrappers → BarLink re-renders

The root cause (or one of them, at least) is in useSlotOperations: it always calls setOperations() with a new array on every navigation, even when nothing actually changed.