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

Dim console calls on additional Effect invocations due to StrictMode #29007

Merged
merged 5 commits into from
May 22, 2024

Conversation

eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented May 6, 2024

Stack:

  1. Allow specifying timeout in tests via third argument #29006
  2. Stop using Scheduler.log to test double invocations  #29008
  3. Dim console calls on additional Effect invocations due to StrictMode #29007 <-- You're here

Summary

Same as #22030 but for double invocations of Effects due to StrictMode:

Before/After
Screenshot 2024-05-07 at 00 48 46 Screenshot 2024-05-07 at 00 48 11

This means that console calls during the double invocations of Effects due to StrictMode can be disabled in React DevTools.

The option has been renamed from "Hide logs during second render in Strict Mode" to "Hide logs during additional invocations in Strict Mode". Not sure if "additional invocations" is clear enough. "additional function calls" is just slightly longer and may be clearer?

This also means that tests using Scheduler.log no longer have to assert on the additional invocations (just like Scheduler.log during double invocations of render-time functions due to StrictMode).

How did you test this change?

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels May 6, 2024
@react-sizebot
Copy link

react-sizebot commented May 6, 2024

Comparing: 81c5ff2...8eb27a1

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.66 kB 6.66 kB +0.05% 1.82 kB 1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 495.89 kB 495.89 kB = 88.82 kB 88.83 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 500.69 kB 500.69 kB = 89.51 kB 89.51 kB
facebook-www/ReactDOM-prod.classic.js = 593.05 kB 593.05 kB = 104.32 kB 104.32 kB
facebook-www/ReactDOM-prod.modern.js = 569.27 kB 569.27 kB = 100.72 kB 100.72 kB
test_utils/ReactAllWarnings.js Deleted 64.35 kB 0.00 kB Deleted 16.05 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 64.35 kB 0.00 kB Deleted 16.05 kB 0.00 kB

Generated by 🚫 dangerJS against 8eb27a1

@eps1lon eps1lon force-pushed the strictEffects/dim branch from 7318280 to 7b47a56 Compare May 6, 2024 22:24
@eps1lon eps1lon marked this pull request as ready for review May 6, 2024 22:51
@hoxyq
Copy link
Contributor

hoxyq commented May 20, 2024

Not sure if "additional invocations" is clear enough. "additional function calls" is just slightly longer and may be clearer?

Can you make the Strict Mode text clickable in the new updated label? It should link to https://react.dev/reference/react/StrictMode, I believe this would help users understanding why they are having 2 invocations

@hoxyq
Copy link
Contributor

hoxyq commented May 20, 2024

Also, could you please update function names here to reflect these changes?

Copy link

vercel bot commented May 20, 2024

@eps1lon is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@eps1lon
Copy link
Collaborator Author

eps1lon commented May 20, 2024

Can you make the Strict Mode text clickable in the new updated label?

Screenshot 2024-05-20 at 23 32 20

Also, could you please update function names here to reflect these changes?

Done: efdb1e8 (#29007)

@eps1lon eps1lon force-pushed the strictEffects/dim branch from efdb1e8 to 6a4f521 Compare May 20, 2024 21:46
Copy link

vercel bot commented May 20, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 22, 2024 9:33am

@eps1lon eps1lon force-pushed the strictEffects/dim branch from 6a4f521 to 8eb27a1 Compare May 22, 2024 09:28
@eps1lon eps1lon merged commit 3ac551e into facebook:main May 22, 2024
40 checks passed
@eps1lon eps1lon deleted the strictEffects/dim branch May 22, 2024 09:39
github-actions bot pushed a commit that referenced this pull request May 22, 2024
github-actions bot pushed a commit that referenced this pull request May 22, 2024
@sebmarkbage
Copy link
Collaborator

This is a little different than render in that the render isn't a side-effect so it can be called 1 or 100 times and it's the same thing. Effects can't be said the same so hiding the logs might be misleading. Additionally, it just covers logs directly inside the effect where as it can spawn more work that happens outside the effect twice.

ztanner pushed a commit to vercel/next.js that referenced this pull request May 23, 2024
hoxyq added a commit that referenced this pull request Jun 18, 2024
Full list of changes:

* chore[react-devtools]: improve console arguments formatting before
passing it to original console ([hoxyq](https://github.com/hoxyq) in
[#29873](#29873))
* chore[react-devtools]: unify console patching and default to ansi
escape symbols ([hoxyq](https://github.com/hoxyq) in
[#29869](#29869))
* chore[react-devtools/backend]: remove
consoleManagedByDevToolsDuringStrictMode
([hoxyq](https://github.com/hoxyq) in
[#29856](#29856))
* chore[react-devtools/extensions]: make source maps url relative
([hoxyq](https://github.com/hoxyq) in
[#29886](#29886))
* fix[react-devtools] divided inspecting elements between inspecting do…
([vzaidman](https://github.com/vzaidman) in
[#29885](#29885))
* [Fiber] Create virtual Fiber when an error occurs during reconcilation
([sebmarkbage](https://github.com/sebmarkbage) in
[#29804](#29804))
* fix[react-devtools] component badge in light mode is now not invisible
([vzaidman](https://github.com/vzaidman) in
[#29852](#29852))
* Remove Warning: prefix and toString on console Arguments
([sebmarkbage](https://github.com/sebmarkbage) in
[#29839](#29839))
* Add jest lint rules ([rickhanlonii](https://github.com/rickhanlonii)
in [#29760](#29760))
* [Fiber] Track the Real Fiber for Key Warnings
([sebmarkbage](https://github.com/sebmarkbage) in
[#29791](#29791))
* fix[react-devtools/store-test]: fork the test to represent current be…
([hoxyq](https://github.com/hoxyq) in
[#29777](#29777))
* Default native inspections config false
([vzaidman](https://github.com/vzaidman) in
[#29784](#29784))
* fix[react-devtools] remove native inspection button when it can't be
used ([vzaidman](https://github.com/vzaidman) in
[#29779](#29779))
* chore[react-devtools]: ip => internal-ip
([hoxyq](https://github.com/hoxyq) in
[#29772](#29772))
* Fix #29724: `ip` dependency update for CVE-2024-29415
([Rekl0w](https://github.com/Rekl0w) in
[#29725](#29725))
* cleanup[react-devtools]: remove unused supportsProfiling flag from
store config ([hoxyq](https://github.com/hoxyq) in
[#29193](#29193))
* [Fiber] Enable Native console.createTask Stacks When Available
([sebmarkbage](https://github.com/sebmarkbage) in
[#29223](#29223))
* Move createElement/JSX Warnings into the Renderer
([sebmarkbage](https://github.com/sebmarkbage) in
[#29088](#29088))
* Set the current fiber to the source of the error during error
reporting ([sebmarkbage](https://github.com/sebmarkbage) in
[#29044](#29044))
* Unify ReactFiberCurrentOwner and ReactCurrentFiber
([sebmarkbage](https://github.com/sebmarkbage) in
[#29038](#29038))
* Dim `console` calls on additional Effect invocations due to
`StrictMode` ([eps1lon](https://github.com/eps1lon) in
[#29007](#29007))
* refactor[react-devtools]: rewrite context menus
([hoxyq](https://github.com/hoxyq) in
[#29049](#29049))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants