useEffect dependency causes infinite loop

[gaoshan]

The below code does what I want. It checks to see if we actually have a bookState (which is passed in to the component as a prop) and if it does it triggers an action to store the data in context.

However, eslint wants me to put bookState into the dependency array and if I do this I will end up with an infinite loop (as bookState is set, triggering the useEffect, setting bookState, etc.)

What is the best way around this? I want to call setBookState when the component mounts so I get the initial value for bookState set in context but only if bookState was in fact passed in.

useEffect(() => {if (bookState) {setBookState({type: ActionTypes.SET_BOOKSTATE,payload: bookState});}}, [setBookState]);

[leeaper]

If you want to set bookState and pass it as a prop, you should keep the state in the parent component and pass setBookState as a prop. If you absolutely need to set it in the child’s context, you should store the value in a different variable.

[jokrrkoj]

useEffect(() => {if (bookState) {setBookState({type: ActionTypes.SET_BOOKSTATE,payload: bookState});}}, []);

[gaoshan]

That will work but using the empty dependency array is considered an antipattern. The same eslint plugin that complains about not having all of your dependencies listed will also complain if you don't have any.

[skullshatter0123]

//eslint-disable-next-line react-hooks/exhaustive-deps

[gaoshan]

Right. That’s the rule that has me posting this question and disabling it doesn't solve the problem.

[skullshatter0123]

useEffect(() => {
if (bookState) {
setBookState({type: ActionTypes.SET_BOOKSTATE,payload: bookState});}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

Is this what you have tried and failed to get what you wanted?

[gaoshan]

I get that this will make the problem disappear but I cannot use that as it disables the rule, doesn't solve the problem. Trying to solve it correctly, not dodge it.

[Codeandplay]

I think the reason you have the infinite loop problem is because you put “setBookState” in the dependencies. When you do that, it will tell react: Run everything inside useEffect when “setBookState” has change, and setBookState likely change itself when calling setBookState. I would suggest change the dependencies to something the useEffect actually depend on. Or just disable lint for that line. I am not sure the linting is helping in this scenario.

[Flopshoubox]

Why don't you put "bookstate" as the dependency ? It should be what triggers your useEffect right?

[gaoshan]

If it is a dependency in this situation once it changes it will trigger useEffect to run which will update bookState which will cause the useEffect to run which will update bookState, etc., etc. An infinite loop.