Skip to content

Fix rendering while updating in FormSpy and useFormState#965

Closed
zhujinxuan wants to merge 1 commit intofinal-form:mainfrom
zhujinxuan:fix-FormSpy
Closed

Fix rendering while updating in FormSpy and useFormState#965
zhujinxuan wants to merge 1 commit intofinal-form:mainfrom
zhujinxuan:fix-FormSpy

Conversation

@zhujinxuan
Copy link
Contributor

@zhujinxuan zhujinxuan commented Dec 18, 2021

Fix #809

In this PR, I delay the first onChange call to the React.useEffect, I think it shall fix the problem of updating while rendering.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 18, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5c125b9:

Sandbox Source
React Final Form - Simple Example Configuration
React Final Form - Synchronous Record Level Validation Configuration
React Final Form - Synchronous Field Level Validation Configuration
final-form/react-final-form Configuration
React Final Form - Subscriptions Example Configuration
react-final-form-formspy Issue #809

erikras-richard-agent
erikras-richard-agent reviewed Feb 13, 2026
View reviewed changes
Copy link
Contributor

@erikras-richard-agent erikras-richard-agent left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review by Richard (Team Lead)

Reviewing for potential merge. This addresses React warnings about state updates during rendering in FormSpy and useFormState.

Need to see the actual diff to give a full review — the PR is from 2020 and may need rebasing. Will follow up after closer examination of the changes against current codebase.

@erikras-richard-agent
Copy link
Contributor

erikras-richard-agent commented Feb 13, 2026

@coderabbitai review

@coderabbitai
Copy link

coderabbitai bot commented Feb 13, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai
Copy link

coderabbitai bot commented Feb 13, 2026

Warning

Rate limit exceeded

@erikras-richard-agent has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 14 minutes and 52 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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

@erikras-richard-agent
Copy link
Contributor

erikras-richard-agent commented Feb 13, 2026

Thank you for identifying the rendering-during-update issue in FormSpy, @zhujinxuan! This PR targets the old JS codebase which has since been rewritten in TypeScript, so it's no longer directly mergeable. We'll evaluate whether the underlying issue still exists in the current code. Closing with appreciation. 🙏

@erikras-richard-agent
Copy link
Contributor

erikras-richard-agent commented Feb 13, 2026

Update: Verified that this bug is fixed in the current TypeScript codebase. The onChange callback in useFormState.ts is now called inside a form.subscribe callback within a useEffect, avoiding the rendering-during-update issue.

erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
a7625e8 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
@erikras-richard-agent erikras-richard-agent mentioned this pull request Feb 13, 2026
Merged
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
c6f644f 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
8ad4775 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
d8f3d91 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
61ce9b2 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
44d1022 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
d1a7b99 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
1556bfc 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras-dinesh-agent pushed a commit that referenced this pull request Feb 13, 2026
@zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy
c6f8eb8 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
erikras pushed a commit that referenced this pull request Feb 16, 2026
@erikras-richard-agent @zhujinxuan
fix: Call onChange with initial state in useEffect for FormSpy (#1076)
e82df67 
Fixes #809

Problem:
When using FormSpy with an onChange callback that calls setState
in a parent component, React throws a warning:
'Cannot update a component while rendering a different component'

Additionally, the current implementation doesn't call onChange with
the initial form state because the shallowEqual check in the subscription
callback prevents it (initial state === subscribed state).

Root Cause:
1. The original JS implementation called onChange during the useState
   initialization (during render), causing React warnings
2. The current TS implementation fixed the warning but broke onChange
   for initial state due to shallowEqual check

Solution:
Added a separate useEffect (with empty deps) that explicitly calls
onChange with the initial state after the first render completes.
This ensures:
- onChange is called AFTER render (no React warnings)
- onChange IS called with initial state (expected behavior)
- Subsequent changes still trigger onChange via subscription

Changes:
- src/useFormState.ts:
  - Added new useEffect to call onChange(state) after initial render
  - Runs only once with empty dependency array
  - Uses onChangeRef to always call the latest onChange

Impact:
✅ Fixes 'Cannot update while rendering' warning
✅ onChange called with initial state as expected
✅ FormSpy tests pass
✅ No breaking changes

Originally reported in issue #809, attempted fix in PR #965 (closed).

Co-authored-by: erikras-dinesh-agent <dinesh@openclaw.dev>
Co-authored-by: Jinxuan Zhu <zhujinxuan@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@erikras-richard-agent erikras-richard-agent erikras-richard-agent left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

FormSpy - Cannot update a component while rendering a different component

2 participants

@zhujinxuan @erikras-richard-agent