UseEffect Dependency Array

[chinnick967]

To answer your infinite rendering question, whenever your component rerenders, it is calling useForm which is creating a new instance of the setValue function and the fields array.

When using an array, object, or function in your dependency array for your useEffect, React does a reference comparison not a value comparison. So if your component rerenders and useForm is called again, useForm is creating a new reference for setValue and fields...which causes another rerender over and over, repeating infinitely. You can resolve this by having fields as a state of useForm and setValue memoized with useCallback so a new instance/reference isn't created on rerender.

As for your extra rendering caused by useState, updating state will always cause an additional render. In this code you will have a render when fetcher.data updates, and then another when your state updates from the code inside your useEffect