fix: sync profile email when user loads after mount (#6303)

[DSingh0304]

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 useEffect hook that reactively watches user.emails and 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:

1. Launch the app and log in
2. Immediately navigate to Profile (before data fully loads)
3. Observe that the email field is empty ❌

After the fix:

1. Launch the app and log in
2. Immediately navigate to Profile (before data fully loads)
3. The email field now correctly displays the user's email ✅

Additional testing:

• Wait for full app load, then navigate to Profile - email should display correctly
• Edit other profile fields - email should remain stable and not be overwritten

Screen Recording:

Screencast from 2025-11-13 15-53-02.webm

Types of changes

• [x] Bugfix (non-breaking change which fixes an issue)
• [ ] Improvement (non-breaking change which improves a current function)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Documentation update (if none of the other choices apply)

Checklist

• [x] I have read the CONTRIBUTING doc
• [x] I have signed the CLA
• [x] Lint and unit tests pass locally with my changes
• [ ] I have added tests that prove my fix is effective or that my feature works (if applicable)
• [x] I have added necessary documentation (if applicable)
• [x] Any dependent changes have been merged and published in downstream modules

Further comments

Root Cause: The useForm hook initializes with defaultValues: { email: user?.emails?.[0]?.address }. When the ProfileView component mounts before the user object has loaded from the server, the email field is initialized as undefined. The form doesn't reactively update when the user data arrives later.

Solution Approach: The useEffect hook provides a reactive layer that syncs the form state with the Redux store. It uses setValue with shouldValidate: false and shouldDirty: false to 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

• Bug Fixes
  • Profile form now reliably initializes with loaded user data (name, username, email, password and avatar).
  • Email field synchronizes on first load without triggering validation or marking the form as modified.
  • Form now automatically resets when core user profile fields change, keeping displayed values in sync.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

Walkthrough

useFocusEffect now resets the Profile form with explicit user-derived values (name, username, email, currentPassword, bio, nickname, saving). A useEffect watches user?.emails and sets the form email when it becomes available and the form email is empty, preventing a startup race that left the email field blank.

Changes

Cohort / File(s)

Summary

Profile form init & sync app/views/ProfileView/index.tsx

Updated useFocusEffect to call reset with concrete user values (name, username, email, currentPassword, bio, nickname, saving). Added/adjusted effect dependency array to include user.name, user.username, user.emails, user.bio, user.nickname, and reset. Added useEffect to set form email from user.emails[0].address when emails arrive and the form email is empty (avoids validation/dirty-state). Minor formatting edits around the updated blocks.

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

• Areas to check:
  • Dependency arrays for useEffect and useFocusEffect.
  • That reset values match form schema and don't unintentionally clear user edits.
  • That setting email avoids triggering validation/dirty flags.

Possibly related PRs

• RocketChat/Rocket.Chat.ReactNative#6682 — Also modifies app/views/ProfileView/index.tsx to sync/reset react-hook-form values with latest user data (email/name/username/bio).
• RocketChat/Rocket.Chat.ReactNative#6686 — Related changes around name handling and submission params in app/views/ProfileView/index.tsx.

Suggested reviewers

• OtavioStasiak

Poem

🐰 I hopped in quick to calm the race,
When emails woke I found their place.
Reset with care on focus now,
No empty box to furrow a brow.
🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The code changes partially address the linked issue objective; however, the PR summary indicates reviewers requested removing the useEffect, but the raw summary shows it was modified rather than removed, creating uncertainty about actual implementation.	Confirm whether the useEffect implementing the email field synchronization was removed as requested or retained with modifications, and verify the final implementation addresses the race condition.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the core fix: syncing profile email when user loads after mount, directly addressing the race condition issue #6303.
Out of Scope Changes check	✅ Passed	All changes in ProfileView/index.tsx are directly scoped to fixing the email field synchronization issue; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent 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.

📥 Commits

Reviewing files that changed from the base of the PR and between cd1d12ad6e0f2612619f0fcd22e482a72260d932 and a47c2bfbbeccab354339d9796806bb32a4d39da4.

📒 Files selected for processing (1)

• app/views/ProfileView/index.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• app/views/ProfileView/index.tsx

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[DSingh0304]

Hey folks, do you have any updates on the code review?

[DSingh0304]

I think this issue should be fixed, as this issue is causing problems in updating emails. The issue #6271 and this one are dependent, as if the email one does not persist, how can it be changed? I have raised PR #6303 to solve the issue if anyone can review it.

[Rohit3523]

Can you remove the useEffect and test it again and see if the result is same or not

[DSingh0304]

Can you remove the useEffect and test it again and see if the result is same or not

Yeah sure I will do it.

[DSingh0304]

Can you remove the useEffect and test it again and see if the result is same or not

Yeah sure I will do it.

I tested it. Works fine.. I have updated the PR