use-persisted-state | custom React Hook that provides a multi-instance | Frontend Utils library

We've spoken a little bit on chat in order to find out a little bit more about what is going on here. I'll edit your question in a moment to take out the irrelevant code so that this is easier to understand for anyone stumbling on the question.

Your original code did the following:

• Instantiated an object (defaultProps) within a functional component
• Passed that object in as the default for a useState() call
• Passed the state value into your hook, which was then used in the dependency array of a useEffect() hook

Your refactor changed it so you were directly passing the defaultProps reference into your hook without going through a useState() hook as before.

An important thing to understand about React components is that although their execution pattern is somewhat predictable, it is something you have no control over as a developer and so you should assume when writing your components that they may be re-rendered at any time.

Within a functional component, each re-render is a new function execution with a new scope. If you instantiate an object within this scope, that's a new reference variable pointing to a different area of memory each time

The problem with then using this within the dependency array of a useEffect() hook is that since this is a new variable on each render, it means that each time the component is re-rendered, the useEffect hook will see a different reference, and cause the effect callback to be executed again. This is not normally the intended behaviour.