Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent new data re-render attempts during an existing render #6107

Merged
merged 1 commit into from
May 4, 2020

Conversation

hwillson
Copy link
Member

@hwillson hwillson commented Apr 3, 2020

As of version 16.13.0, React logs a warning when a function component is updated during another component's render phase (facebook/react#17099). In Apollo Client this warning can be triggered when nesting multiple components that leverage useQuery. To help avoid this, this commit ensures re-render requests to show new data are delayed until an effect hook is run to handle them (since we're then out of the render phase).

These changes were originally implemented in apollographql/react-apollo#3902.

@codecov
Copy link

codecov bot commented Apr 3, 2020

Codecov Report

Merging #6107 into master will decrease coverage by 0.09%.
The diff coverage is 75.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #6107      +/-   ##
==========================================
- Coverage   95.37%   95.28%   -0.10%     
==========================================
  Files          88       88              
  Lines        3653     3666      +13     
  Branches      903      875      -28     
==========================================
+ Hits         3484     3493       +9     
- Misses        146      150       +4     
  Partials       23       23              
Impacted Files Coverage Δ
src/react/hooks/utils/useBaseQuery.ts 89.47% <73.33%> (-10.53%) ⬇️
src/react/data/QueryData.ts 91.05% <76.92%> (+0.04%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 11db733...776d986. Read the comment docs.

@hwillson hwillson added this to Web in Client Team Apr 3, 2020
@hwillson
Copy link
Member Author

hwillson commented Apr 6, 2020

Please hold on the review of this @benjamn. The solution implemented in apollographql/react-apollo#3902 did not fix the problem in all cases. I'm working on a more complete solution and will update this PR shortly. Thanks!

@hwillson hwillson assigned hwillson and unassigned hwillson Apr 8, 2020
@hwillson hwillson force-pushed the ra-issue-3863 branch 4 times, most recently from 342d8ab to 1e7368b Compare April 16, 2020 19:21
@hwillson
Copy link
Member Author

@benjamn this is now ready for review. Thanks!

Prevent new data re-render attempts during an existing render
to help avoid React 16.13.0's "Cannot update a component from
inside the function body of a different component" warning
(facebook/react#17099).

These changes were originally implemented in
apollographql/react-apollo#3930.
Copy link
Member

@benjamn benjamn left a comment

Choose a reason for hiding this comment

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

Looks great to me!

@benjamn benjamn merged commit 19b7ad5 into master May 4, 2020
@benjamn benjamn deleted the ra-issue-3863 branch May 4, 2020 16:22
benjamn added a commit that referenced this pull request May 5, 2020
This version does *not* include my big PR #6221, which should be coming in
the _next_ beta release. Code changes in beta.45 (since beta.44) include

  * #6194 by @durchanek
  * #6107 by @hwillson

as well as several documentation PRs.
@brainkim
Copy link
Contributor

brainkim commented Jul 23, 2021

Don’t mind me just putting this link here for posterity (me)

brainkim added a commit that referenced this pull request Jul 23, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Jul 27, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Jul 27, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Jul 28, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Jul 29, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Jul 29, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Jul 31, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 2, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 3, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 4, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 5, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 5, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 5, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 6, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 6, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 6, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 9, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 10, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 11, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 13, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 16, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 16, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
brainkim added a commit that referenced this pull request Aug 16, 2021
After #8414, the
changes made in #6107
are unnneccessary, because all ObservableQuery callbacks will only be
fired in useEffect calls (hopefully). This changes the timings of some
of tests.
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
No open projects
Client Team
In progress
Development

Successfully merging this pull request may close these issues.

None yet

3 participants