internetarchive / internetarchive/tapestry-project

[Bug]: React state updates during render in Dashboard component

Open
#2 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4
Forks
12
PR merge metrics
No merged PRs in 30d

Description

## Description
In the Dashboard component `(client/src/pages/dashboard/index.tsx)`, state setter functions are being called directly within the main body of the functional component (during the render phase).
React strictly requires that state updates happen inside event handlers or hooks (like` useEffect`). Calling state setters directly during render triggers React warnings and can lead to endless re-render loops if the dependencies (user or section) change frequently.

### File: client/src/pages/dashboard/index.tsx
```const userIdRef = useRef(user?.id)


if (userIdRef.current !== user?.id) {
userIdRef.current = user?.id
setSortCriterion(getSavedSortCriterion(!!user))
setSortDirection(userSettings.currentSettings.sortDirection)
}
const [initialPrompt, setInitialPrompt] = useState(location.state as SnackbarData | undefined)

const [prevSection, setPrevSection] = useState(section)

if (section !== prevSection) {
setPrevSection(section)
setSearchTerm('')
}
```

## Impact
- Throws React console warnings: "Cannot update a component (Dashboard) while rendering a different component".
- High risk of infinite re-render loops when navigating between sections or when the user session state changes.
- Degrades application performance.

## Suggested Fix
Wrap the conditional state updates inside `useEffect` hooks with the appropriate dependency arrays.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start in client/src/pages/dashboard/index.tsx and inspect the state setters called during Dashboard rendering, along with the user and section dependencies. Move the updates into appropriate effects as described, then verify that navigation and user changes no longer produce React warnings or render loops and that search and sort state still update correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.