Field State Sync Issue in Strict vs Non-Strict Mode in react-18 about react-final-form HOT 5 CLOSED

I wonder if the whole thing should not be using useSyncExternalStore?

from react-final-form.

The SetFieldValueIfEmpty violates React functional component principles and possibly the rules of hooks.

For this kind of behaviour see subscribe.

from react-final-form.

Hi @gertdreyer. Thank you. I will checkout the subscribe API.

Can you please elaborate the violation of react functional components/hooks principles in the above example?

from react-final-form.

A functional component have to return a React Element . Similarly, a class-style component has to have a render method.

On the useEffect. Try playing with console.count(fieldname) in the useEffect to see the inefficiency. useEffect is actioned after the every render - you know before rendering that your field needs a default value. You also open yourself up to infinite render loops using setState in a useEffect if your condition is not well defined.

from react-final-form.

1. It was a typo to not add a return null but that won't change the strict behaviour. You will still see the results shown in the screenshot.
2. It should be safe to call setState or field.change inside useEffect with my conditions. The only (variable) dependency to the Effects the value.

Just wanted to clarify again that the issue is between the above functionality during React's Strict and Non-Strict Modes. In StrictMode, useEffect is executed twice during the first render causing the listeners to execute twice where as in non-StrictMode, listeners fail to correctly set-up.

from react-final-form.