[react-hooks/exhaustive-deps] function outside the hook

[eshturman]

Hi! I have some problems with [react-hooks/exhaustive-deps] rule of eslint. Can you help me, please?

I have some effect, which to call function. Linter tells me that I should add getData to dependency. But I do not want my effect to depend on the function. I will have to wrap it in useCallback which may have its own dependency.

I need my useEffect hook to be called only 1 time. But in this case, it will be called whenever id changes. How do I get around this behavior?

I have seen advice to put a function inside a hook, but this is not my case. I have to call this function from different hooks.

[vkurchatkin]

You are free to ignore linter if that's what you want

[bvaughn]

A change in id would mean a change in the return value of getData, so you would want scopes to be re-created any time this happened.

[eshturman]

@bvaughn but I want that useEffect will be called only 1 time. I'm not interested in further id change

[gaearon]

but I want that useEffect will be called only 1 time. I'm not interested in further id change

Then your component will behave incorrectly on updates. Props can change any time, so you need to handle them and eventually show the same result as you would if those props were rendered initially.

Of course, you are free to make your component buggy by ignoring the rule. Or work around it explicitly by doing something like this:

const [initialId] = useState(id)
// Now use initialId, it won’t change

But that would usually lead to bugs.

[eshturman]

@gaearon thanks!