Repository navigation
Feat react compiler migration - #4065
Merged
Merged
Conversation
Drop manual memoization (memo/useCallback/useMemo) now handled by the React Compiler, and adopt use() and useEffectEvent across popup and shared components. Bump eslint-plugin-react-hooks to 6.1.1 (via the xo react config override) so useEffectEvent is linted correctly under React 19.2, and add a comment-style guideline to AGENTS.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Extension version is updated from |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue, and left some high level feedback:
- You’ve removed a number of
memowrappers (e.g.Person,BookmarkRow,BookmarksHeader,Folder); given these components appear in lists/virtualized views, it’s worth double-checking that the extra re-renders don’t regress performance in those UIs, and reintroducing memoization selectively if needed. - The new
useEffectEventusages (e.g. inToggleHistoryandSearch) change how closures and dependencies behave; consider adding a brief inline comment near the first use to clarify why it’s used instead of a standard effect, to reduce future confusion when others maintain or refactor these hooks.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- You’ve removed a number of `memo` wrappers (e.g. `Person`, `BookmarkRow`, `BookmarksHeader`, `Folder`); given these components appear in lists/virtualized views, it’s worth double-checking that the extra re-renders don’t regress performance in those UIs, and reintroducing memoization selectively if needed.
- The new `useEffectEvent` usages (e.g. in `ToggleHistory` and `Search`) change how closures and dependencies behave; consider adding a brief inline comment near the first use to clarify why it’s used instead of a standard effect, to reduce future confusion when others maintain or refactor these hooks.
## Individual Comments
### Comment 1
<location path="packages/shared/src/components/Bookmarks/components/Folder.tsx" line_range="28-33" />
<code_context>
+ };
- return (
- <div
- className={cn(
- 'flex size-full items-center justify-center gap-3 p-1.5',
- isEmpty && 'cursor-not-allowed opacity-60'
- )}
- data-testid={`folder-item-${origName}`}
- onClick={resetSelectedBookmarks}
- onDoubleClick={handleFolderOpen}
</code_context>
<issue_to_address>
**suggestion (testing):** Using `origName` directly in `data-testid` may lead to unstable selectors if names contain spaces or are user-editable.
Embedding `origName` in the `data-testid` makes tests depend on a user-controlled, potentially changing string (whitespace, special chars, renamed folders), which can make selectors fragile and harder to maintain. If there’s a stable identifier available (e.g. `id`), consider basing the test id on that instead.
Suggested implementation:
```typescript
data-testid={`folder-item-${id}`}
```
1. Update any component/unit tests that currently query by `data-testid="folder-item-${origName}"` to use `folder-item-${id}` instead.
2. If `id` is not guaranteed to be present for all folders, ensure that the component receives a stable identifier prop (e.g. `id`) for every rendered folder item and use that consistently for the test id.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
PR Summary by QodoMigrate UI components to React Compiler patterns and update hooks linting
AI Description
Diagram
High-Level Assessment
Files changed (20)
|
📝 WalkthroughWalkthroughThe pull request adds an unmount guard to current-tab loading, uses effect events for history and search effects, and switches context reads to React’s Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@pnpm-workspace.yaml`:
- Around line 11-14: Update the eslint-config-xo-react override in
pnpm-workspace.yaml from eslint-plugin-react-hooks 6.1.1 to the latest stable
7.1.1, after confirming compatibility with eslint-config-xo-react. Preserve the
existing override and rationale for correcting useEffectEvent dependency
linting.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e56a494e-d8e9-4c65-ac1c-a18df9412ec0
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (19)
AGENTS.mdapps/extension/package.jsonapps/extension/src/entrypoints/popup/hooks/useCurrentTab.tsapps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarkRow.tsxapps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/BookmarksHeader.tsxapps/extension/src/entrypoints/popup/panels/BookmarksPanel/components/ConfirmationDialog.tsxapps/extension/src/entrypoints/popup/panels/HomePopup/components/ToggleHistory.tsxapps/extension/src/entrypoints/popup/panels/PersonsPanel/components/PersonHeader.tsxapps/web/src/app/provider/AuthProvider.tsxpackages/shared/src/components/Bookmarks/components/Folder.tsxpackages/shared/src/components/Bookmarks/components/PersonAvatars.tsxpackages/shared/src/components/Header.tsxpackages/shared/src/components/Persons/components/BookmarksList.tsxpackages/shared/src/components/Persons/components/Person.tsxpackages/shared/src/components/Persons/components/Persons.tsxpackages/shared/src/components/ScrollButton.tsxpackages/shared/src/components/Search.tsxpackages/shared/src/hooks/useStorage.tspnpm-workspace.yaml
Code Review by Qodo
1. History toggle race leak
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Check if the Pull Request fulfils these requirements
Summary by Sourcery
Migrate several React components and hooks to React 19 compiler patterns while updating the extension version and workspace tooling.
New Features:
Enhancements:
Build:
Greptile Summary
This PR migrates the extension and shared packages to the React Compiler, removing
memo()wrappers that are now handled automatically, replacinguseContextwith the React 19use()hook, and adoptinguseEffectEventfor callbacks that are used inside effects but should not be reactive dependencies.memo()removals are backed by the compiler being configured in bothwxt.config.ts(viareactCompilerPreset()) andnext.config.ts(reactCompiler: true), so no memoization is lost.useEffectEventis used correctly: it is only ever called insideuseEffectbodies, and theeslint-plugin-react-hooksoverride to v6.1.1 ensures the exhaustive-deps rule recognizes it instead of treating it as a missing dependency.useCurrentTabgains a standard ignore-flag cleanup pattern, andPerson's effect dependency array is correctly trimmed touidonly.Confidence Score: 5/5
Safe to merge — all memo() removals are backed by the React Compiler being active in both apps, useEffectEvent is used correctly within effect bodies only, and the eslint-plugin override ensures the linter validates the new patterns properly.
The migration is consistent and complete: the compiler is wired up in both the extension (wxt.config.ts with reactCompilerPreset) and the web app (next.config.ts with reactCompiler: true), so dropping memo() is safe. The useEffectEvent usages follow React 19 rules — called only from inside effects, never passed to custom hooks. The use() replacements for synchronous context reads are semantically identical to useContext().
No files require special attention.
Reviews (1): Last reviewed commit: "Update package.json" | Re-trigger Greptile