React: Regarding `react-hooks/exhaustive-deps` and object properties

[tom-sherman]

If I have a dependency array which passes in several properties of an object like the below example, the eslint rule react-hooks/exhaustive-deps shows a warning.

let options = { foo: 1, bar: 2 }

React.useEffect(fn, [ options.foo, options.bar ])

Shows a message:

React Hook React.useEffect has a missing dependency: 'options'. Either include it or remove the dependency array

I can replace the array with [ options ] which solves the problem but my question is, should I have to pass the full object when I only need to use some of it's properties?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[tom-sherman]

I would love an answer to this question or if this isn't the correct forum it would be great if someone could point me in the right direction.

[ryprice]

In your example, passing options as the dep also assumes options is immutable, so it could be more dangerous.

[gaearon]

should I have to pass the full object when I only need to use some of it's properties?

Generally I would recommend to destructure those options early and only pass the ones you actually care about.

const { foo, bar } = options;

useEffect(() => {
  // ...
}, [foo, bar])

This avoid over-firing the effect in case the options object is always referentially different but the options themselves stay the same.