Describe the bug
SavedIssuesSection currently reads saved issues directly in the render body:
jsxconst [refreshKey, setRefreshKey] = useState(0);
...
const all = getSavedIssues();
and relies on bumping refreshKey + setting it as the key on the component's own root element to "force" a re-render after add/remove/status-change actions:
jsx
Steps to reproduce
- Open the app and go to a page rendering SavedIssuesSection.
- Save/bookmark a few issues so they appear in the "Your Issues" list.
- Click a status-advance action (e.g. mark an issue as "Working on it") or remove an issue.
- Note that getSavedIssues() is called directly in the component's render body, and refreshKey is bumped and passed as key on the component's own root
to try to force a UI update.
- Inspect renders (e.g. via React DevTools profiler or by adding a console.log at the top of the component) while interacting with unrelated parts of the page that cause this component to re-render.
Expected behavior
- Saved issues should be loaded once into local component state (e.g. via useEffect) and updated directly in the action handlers (handleAdvance, handleRemove) using setIssues(...).
- The component should not re-read from storage on every render, only when the underlying data actually changes.
- key should not be relied on as a mechanism to force internal re-renders of a component's own root.
Actual behavior
- getSavedIssues() is called on every render of SavedIssuesSection, including renders triggered by unrelated parent re-renders — this is an unnecessary storage read each time.
- refreshKey is incremented and set as key={refreshKey} on the component's own root
, which has no real effect on reconciliation since key only matters when a parent renders a list of children. The UI appears to update only because getSavedIssues() is re-read on every render regardless — the key trick is a no-op that looks like it's doing something but isn't.
Environment
Not browser/OS-specific — this is a code-level React anti-pattern reproducible in any environment running the app (desktop or mobile, any modern browser).
Describe the bug
SavedIssuesSection currently reads saved issues directly in the render body:
jsxconst [refreshKey, setRefreshKey] = useState(0);
...
const all = getSavedIssues();
and relies on bumping refreshKey + setting it as the key on the component's own root element to "force" a re-render after add/remove/status-change actions:
jsx
Steps to reproduce
Expected behavior
Actual behavior
Environment
Not browser/OS-specific — this is a code-level React anti-pattern reproducible in any environment running the app (desktop or mobile, any modern browser).