Double render without triggering useEffect twice

[marzelc]

Describe the bug

When using a useStore to retrieve information from the form (in the example a value but it could be something else), the component renders a first time, the useEffect is triggered, then a second render is performed without useEffect and without being seen in the React profiler.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/blissful-mccarthy-2nl2s2?file=%2Fsrc%2Findex.tsx%3A8%2C56

Steps to reproduce

1. Open the sandbox
2. Show the devTolls
3. Enter t in firstName
4. Looks at the logs you should see (it can be a little bit random, you can try again)

render component with useStore
useEffect of component with useStore
render component with useStore

Expected behavior

There should be only one render with one useEffect.

How often does this bug happen?

Often

Screenshots or Videos

No response

Platform

• OS: MacOs
• Browser: Chrome
• Version: 142.0.7444.60

TanStack Form adapter

react-form

TanStack Form version

1.23.8

TypeScript version

No response

Additional context

No response

[LeCarbonator]

This appears to be because of React.StrictMode being enabled. Can you recreate the issue without it? The issue doesn't happen in your example if StrictMode is omitted.

[marzelc]

Hello @LeCarbonator thank for your time, I removed the React.StrictMode in the sandbox and the problem is still present

[LeCarbonator]

https://github.com/user-attachments/assets/bc4116f4-38d8-4855-aed9-f418e5273730

This is your linked example, opened with devtools. The render counts stay the same.

With StrictMode enabled, you will see the drift:

[marzelc]

The problem appear only if you write a single t, it enables the condition to render the field lastName and there the problem appear as you can see below

https://github.com/user-attachments/assets/387c2611-d03e-4aa7-bf57-acc2f1339ee8

[LeCarbonator]

Can confirm that this works on my end too now! Thanks for the video as reference.