Version Number

7.54.0

Codesandbox

https://codesandbox.io/p/sandbox/clever-cache-76f5tj

Steps to reproduce

The steps to reproduce the issue can be found in the provided code sandbox, but the steps are roughly the following:

1. Install react-hook-form version 7.54.0
2. Create a basic form component as such:

   import { FormProvider, useForm } from 'react-hook-form';
   
   export const Form = ({ data, children }) => {
     const formMethods = useForm();
   
     useEffect(() => {
       if (data) {
         console.log('in Form useEffect');
         formMethods.reset(data);
       }
     }, [data, formMethods]); // Depending on formMethods here is what causes the infinite re-render
   
     return <FormProvider {...formMethods}>{children}</FormProvider>;
   };
   

3. Use the component as such:

   const formData = { test: 'test' };
   
   export default () => (
     <div className="App">
       <Form data={formData} />
     </div>
   );
   

4. Notice how the 'in Form useEffect' log get printed over and over until the app crashes as the formValues are considered "new" on every re-render.

Expected behaviour

As was the case in react-hook-from version 7.53.2, the value returned from useForm should be memoised.

In the provided code-sandbox, when reverting to react-hook-from version 7.53.2 (remember to exclude the range specifiers when downgrading), the issue disappears.

What browsers are you seeing the problem on?

All

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct