We’re experiencing a problem in our custom node component that integrates react‑hook‑form for validation. When the user submits the form with invalid (or empty) fields, the validation errors are briefly logged in the console but then immediately disappear from the UI. It appears that the form is being reset and re-rendered excessively, clearing the error state before it can be displayed.
In our implementation, we use a useQuery to fetch the node data and then call reset(data) in a useEffect. Unfortunately, this effect is re-triggered (possibly on every re-render or refetch) and resets the form values along with the error state. This behavior prevents the proper display of validation errors and forces users to submit the form multiple times to update the UI.
We suspect that:
The useEffect’s dependency array might be causing reset(data) to run more often than intended.
React Flow’s internal state updates (when nodes change positions or states) may be causing the custom node component to re-render and refetch data.
This re-render/reset cycle clears the validation errors almost immediately.
Could you please advise if there is a configuration option in React Flow or any best practices regarding the management of form state within a node to prevent such behavior? We are considering techniques such as memoizing the initial data with a ref or isolating the reset logic to run only once.
Thank you for your support.
Sincerely,
#Issue with Validation Errors Being Cleared and Excessive Re-renders in React Flow
hexed bone
coarse kettle
You can look at this video where I integrate react hook form with React Flow. In this case, I memoize the node components altogether so that they dont rerender at all and I solely use react hook form for state management.
https://www.youtube.com/watch?v=ynPsbZlYg6s
_ _
Also even if you dont do this, the useQuery hook shouldn't run again and again since the query key is constant so you are doing something wrong there I guess. It should only run once and the useEffect in turn should only run once as well.