facebook
[DevTools Bug]: Component flashing many times but profiler says it was rendered once
Website or app
https://berrotools.vercel.app/signin
Repro steps
- Access the website https://berrotools.vercel.app/signin, you'll see a sign in form.
- Open the DevTools, go to the Profiler tab and start profiling.
- Focus the e-mail input and start typing any letter, should not be a valid e-mail so the error label will show. You'll see the error message flashing as long as you type.
- Stop the profiling.
- Check the profiling results, you'll see that the error message was rendered once, if you have typed random letters. The problem is, why did it flash many times?
If the website doesn't work try cloning and running the project located at https://github.com/rhberro/berrotools.
Thank you in advance!
How often does this bug happen?
Every time
DevTools package (automated)
No response
DevTools version (automated)
6.0.1-c7c68ef842
Error message (automated)
No response
Error call stack (automated)
No response
Error component stack (automated)
No response
GitHub query string (automated)
No response
Not sure it helps, but here it is the profiling data extracted from localhost after typing the letter a ten times.
profiling-data.11-26-2024.13-32-45.json
I cannot access your repository (it seems you may have forgotten to make it public), so I have to guess what your code looks like.
I assume your Field component groups children using a fragment or returns an array of elements. If that’s the case, DevTools will highlight all DOM elements inside whenever Field re-renders. I agree that this behavior can be misleading, but that’s how it works.
You can verify this in the following example: https://codesandbox.io/p/sandbox/fdrxfh
