⚡ Bolt: Optimize PasswordScreen FlatList re-renders - #180
Conversation
- Wrap renderItem in useCallback and pass stable function references to PasswordRow - Adjust PasswordRowComponent to accept specific item and pass it to handlers, avoiding inline closures - Add windowSize=5 to FlatList to reduce memory usage off-screen - Add performance improvement comment Co-authored-by: TargetMisser <52361977+TargetMisser@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e866db6d72
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } | ||
|
|
||
|
|
||
| const renderPasswordItem = useCallback(({ item }: { item: PasswordEntry }) => ( |
There was a problem hiding this comment.
When PIN protection is enabled, the load effect sets pinMode to unlock, so the component renders the PIN overlay and returns before this new useCallback; after the user unlocks, the next render reaches this extra hook, changing the hook count/order and causing React to throw a hook-order error. Define renderPasswordItem before the pinMode early returns so every render calls the same hooks.
Useful? React with 👍 / 👎.
1 participant
💡 What:
Optimized the
FlatListinsidePasswordScreen.tsxby using a stabilizedrenderItemfunction (useCallback), passing down stable callback references toPasswordRowComponent, and introducingwindowSize={5}.🎯 Why:
The
PasswordRowcomponent was wrapped inReact.memo, but it was receiving inline arrow functions (onEdit={() => openEdit(item)}andonDelete={() => deleteEntry(item.id)}) on every render. This defeatedReact.memo's shallow equality check, causing all items in the list to re-render whenever the screen state updated.📊 Impact:
windowSize={5}.🔬 Measurement:
Start the app and navigate to the passwords screen. Monitor component re-renders (using React DevTools) while adding a password or opening the modal. Previously, all rows would re-render; now, only the modified elements re-render. Verify memory profile is more stable when scrolling due to lowered
windowSize.PR created automatically by Jules for task 11420094054483967941 started by @TargetMisser