避免 react-hooks/exhaustive-deps 的最佳方法是什么？

Question

I currently use the useEffect hook to run some function or update a variable as an effect of another value/variable being changed

example:

 useEffect(() => {
   setValues(types[formStep]]);
 }, [formStep]);

I am using the above code to update a variable after another variable has changed, however i keep getting the warning that
React Hook useEffect has a missing dependency 'types

and obviosuly when i include 'types' as a dependency, the application falls into a loop and i get the following error

Maximum update depth exceeded.

What is the best way to achieve the variable update but avoid the error? not just for this example for for all cases where you need to update a variable depending on another variable changing before it.

Answer 1

Some solutions found here: https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/ .

Another option could be to stringify the dependency so that it is not treated as a different object everytime.

useEffect(() => {}, [JSON.stringify(data)])

Answer 2

What is the best way to achieve the variable update but avoid the error?

It depends on a lot of factors: sometimes using a ref (if you don't want to trigger an update), sometimes you are just deriving state and there is not need for use-effect (I think that this could be your case), other times you need to trigger an update only when certain value(s) has changed... Sometimes the next value depends on the previous one so you should use the function overload of setState and avoid passing the previous value as a dependency... There is not a generic answer to this problem.

It's difficult to know what's happening in your case without more context. However, I think that I have an idea of what could be happening... This is just a shot in the dark.

Is types an Object that you are defining inside the function of the component? Can you move that definition outside of the function of the component? Because if you can do that, then there is no need to pass it as a dependency.

Also, do you really need to use useState and useEffect for setting values ? Do you really need to trigger another update? can't you just do this?

const values = types[formStep];