fix: sync profile email when user loads after mount (#6303) #6792
Conversation
This fixes an issue where the email field would be empty when navigating to the profile screen immediately after app launch, before the user object has finished loading from the server. The fix adds a useEffect hook that watches user.emails and reactively updates the form field when the user object becomes available. The update only occurs if the email field is empty to avoid overwriting user edits.
WalkthroughuseFocusEffect now resets the Profile form with explicit user-derived values (name, username, email, currentPassword, bio, nickname, saving). A useEffect watches Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant ProfileView
participant Form
participant UserStore as User Data
App->>ProfileView: Navigate to Profile
ProfileView->>UserStore: read user state (may be delayed)
alt user data already loaded
UserStore-->>ProfileView: user (includes emails)
ProfileView->>Form: reset(fields: name, username, email, currentPassword, bio, nickname, saving)
else user data loads later
UserStore-->>ProfileView: user (async arrival)
Note right of ProfileView: set email if form email is empty (no validation/dirty)
ProfileView->>Form: set email = user.emails[0].address
end
ProfileView->>Form: user edits fields
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
app/views/ProfileView/index.tsx(2 hunks)
🔇 Additional comments (1)
app/views/ProfileView/index.tsx (1)
3-3: LGTM: Import addition is correct.The
useEffectimport is necessary for the new synchronization hook.
- Remove redundant user.emails[0].address check in useEffect - Fix useFocusEffect to call reset() with current user data instead of stale defaultValues - This ensures email field is properly restored on re-navigation
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/views/ProfileView/index.tsx (1)
296-305: Consider removing redundant email sync effect.Now that the
useFocusEffect(lines 285-292) explicitly sets the email field fromuser?.emails?.[0]?.address, this separateuseEffectfor syncing email appears redundant. Both effects serve the same purpose: populating the email field from user data.The
useFocusEffectapproach is preferable because it:
- Resets all form fields (not just email) to current user data on focus
- Provides consistent behavior across all fields
- Runs when the screen is focused and user data is available, covering the race condition scenario
Consider removing this effect after verifying the
useFocusEffectproperly handles the race condition:-// Sync form values when user data loads (fixes race condition on app startup) -useEffect(() => { - if (user?.emails?.[0]?.address) { - const currentEmail = getValues('email'); - // Only update if email is missing/null but user has email data - if (!currentEmail) { - setValue('email', user.emails[0].address, { shouldValidate: false, shouldDirty: false }); - } - } -}, [user?.emails, setValue, getValues]);If you need to keep this effect as a safety net, document why both are necessary.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
app/views/ProfileView/index.tsx(2 hunks)
- Remove non-schema fields (newPassword, avatar) from reset payload - Add missing schema fields (bio, nickname, saving) to reset - Include bio and nickname from user object - Set saving to false to properly reset form state - Update dependencies array to include bio and nickname
|
Hey folks, do you have any updates on the code review? |
|
Can you remove the useEffect and test it again and see if the result is same or not |
Yeah sure I will do it. |
… email sync useEffect from ProfileView.
I tested it. Works fine.. I have updated the PR |
2 participants
Proposed changes
This PR fixes a race condition where the email field in the Profile screen would remain empty when users navigate to the profile immediately after app launch, before the Redux store has finished loading user data from the server.
The fix adds a
useEffecthook that reactively watchesuser.emailsand automatically populates the email form field when the user object becomes available. The update only occurs when the email field is currently empty, preventing any overwriting of user edits.Issue(s)
Closes #6303
How to test or reproduce
Before the fix:
After the fix:
Additional testing:
Screen Recording:
Screencast.from.2025-11-13.15-53-02.webm
Types of changes
Checklist
Further comments
Root Cause:
The
useFormhook initializes withdefaultValues: { email: user?.emails?.[0]?.address }. When the ProfileView component mounts before the user object has loaded from the server, the email field is initialized asundefined. The form doesn't reactively update when the user data arrives later.Solution Approach:
The
useEffecthook provides a reactive layer that syncs the form state with the Redux store. It usessetValuewithshouldValidate: falseandshouldDirty: falseto update the field silently without marking the form as modified or triggering validation.This is a minimal, non-invasive fix that doesn't change the existing form initialization logic and maintains backward compatibility with all existing profile edit workflows.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.