[DevTools Bug]: Component flashing many times but profiler says it was rendered once

[rhberro]

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

[rhberro]

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

[V3RON]

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