React hooks reference values comparison

Question

everyone! Imagine, I have a component SomeComponent. Every time 'b' value changes, useEffect is triggering despite 'b is not in its dependencies

const SomeComponent = () => {
  const a = [1, 2, 3] //just an example of dependency. In real life it will be a changing value
  const b = useSelector(someValueSelector)

  useEffect(() => {
    //do some staff
  }, [a])
}

Is there any way to store reference to 'a' array inside of SomeComponent? The only way I know is to create a wrapper component and pass

a = useMemo(() => [1, 2, 3], [])

as a props to

<SomeComponent a={a} />

Answer 1

The issue here is that on every re-render a's reference changes and hence the useEffect is triggered again

You can make use of useMemo inside SomeComponent to assign a memoized value to a

const SomeComponent = () => {
  const a = useMemo(() => [1, 2, 3], []); 
  const b = useSelector(someValueSelector)

  useEffect(() => {
    //do some staff
  }, [a])
}