CODEWITHSUNDEEP
reactjsreact-hooks
zJag
zJag

Reputation: 73

What can be a dependency for React hooks?

Looking at the docs, there is a note at the bottom of this section [edited link] that makes it seem like only props or state should be used in a hook dependency list. However, when a "complex expression" on props or state is used in the list, the eslint plugin gives the following:

React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked. eslint(react-hooks/exhaustive-deps)

This has me thinking about what is allowed to be used as a dependency. Can we use a local variable that is calculated from props? Do we need to create some sort of new state variable or ref in this case? I'm not certain if hooks are executed in place within the component (so local variables are available) or are hoisted out of the context of the render (so we have to use only state, props, or other hook values like refs/memos).

Examples

A component has a prop, data, that is an object.

data: {
  name: 'name',
  id: 2
}

1) It looks like data.name can be used in the dependencies. But can we use a local variable that is set to the property?

const { name } = data;

useEffect(fn, [name]);

2) Would we be able to use a variable that is calculated by a prop in a dependency array?

const isOdd = Boolean(data.id % 2);

useEffect(fn, [isOdd]);

Both cases seem to work with small tests. I'm not knowledgable enough with Hooks to know if it's breaking some rules that would leave the results as indeterminate.

Upvotes: 7

Views: 5300

Answers (1)

Drew Reese
Drew Reese

Reputation: 202686

Optimizing Performance by Skipping Effects may help understanding hook dependencies.

Note

If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders. Learn more about how to deal with functions and what to do when the array changes too often.

The important bit, "...all values from the component scope...", meaning any value within the component scope used within the hook.

Q: Can we use a local variable that is calculated from props?

  • Yes

Q: Do we need to create some sort of new state variable or ref in this case?

  • No

Q: I'm not certain if hooks are executed in place within the component (so local variables are available) or are hoisted out of the context of the render (so we have to use only state, props, or other hook values like refs/memos)

  • AFAIK, they are just functions with special rules within react. They are invoked within the scope of the functional component.

Upvotes: 5

Related Questions