Skip to content

[Bug]: SavedIssuesSection re-reads storage on every render and uses key to force refresh incorrectly #55

Description

@priyalgupta776-ux

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

  1. Open the app and go to a page rendering SavedIssuesSection.
  2. Save/bookmark a few issues so they appear in the "Your Issues" list.
  3. Click a status-advance action (e.g. mark an issue as "Working on it") or remove an issue.
  4. 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.
  5. 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

  1. 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(...).
  2. The component should not re-read from storage on every render, only when the underlying data actually changes.
  3. key should not be relied on as a mechanism to force internal re-renders of a component's own root.

Actual behavior

  1. getSavedIssues() is called on every render of SavedIssuesSection, including renders triggered by unrelated parent re-renders — this is an unnecessary storage read each time.
  2. 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions