fix(simulator): resolve React hooks violations #61
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Remove useEffect hooks that were registering handleSimulation in the global dataFetchStore, which conflicted with PageHeader's unified fetch registration. This fixes React error #310 (infinite loop). The Simulator page now uses its own local state and button for triggering simulations instead of conflicting with the global store. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fix React error #310 and "rendered more hooks than before" by moving all hooks (useEffect, useMemo) before conditional early returns. This ensures hooks are called in the same order every render, respecting React's rules of hooks. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR fixes React hooks violations in the Simulator component by reorganizing code to comply with React's Rules of Hooks. The main issue was that hooks were being called after conditional early returns, which caused "rendered more hooks than before" errors and infinite loops.
Key Changes:
- Moved all hooks (useEffect, useMemo) before early return statements to comply with React's Rules of Hooks
- Removed competing global state registration that was already handled by PageHeader
- Reorganized code with clear section markers for hooks, early returns, and helper functions
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| apps/web/src/pages/Simulator.tsx | Fixed React hooks violations by moving all hooks before early returns, removing unused useDataFetchStore import, and adding clear code section markers |
| apps/web/package-lock.json | Removed unused tree-sitter peer dependencies (cleanup) |
| .claude/commands/sync.md | Updated workflow documentation from git-based sync to rsync-based file copying (unrelated to hooks fix) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Restore complete package-lock.json to fix npm ci sync error in CI. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
m4dm4rtig4n
force-pushed
the
fix-react-infinite-loop
branch
from
d63e6da to
22c9430
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fix React error #310 and "rendered more hooks than before" by reorganizing the Simulator component. The issue was caused by hooks being called after conditional early returns, violating React's rules of hooks.
Changes:
The Simulator page now follows React's rules and renders correctly without infinite loops or hook mismatch errors.
Test Plan