internetarchive / internetarchive/tapestry-project
[Bug]: React state updates during render in Dashboard component
- 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