Investigate hook caching

[react-navigation]

Investigate hook caching

[slorber]

The link is old. Yes there's a problem, I'll solve it as soon as I can.

Need to have a proper dev setup first (if you want to help => #28)

[cmmartin]

I get an infinite loop if I pass navigate as a dependency to useEffect since the function changes on every render

function ReactComponent() {
  const {navigate} = useNavigation();

  useEffect(() => {
      if (user) {
          navigate(...)
      }
  }, [user, navigate])

 return null
}

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

My solution, for now, is to not pass navigate as a dependency, but the hooks eslint rule complains and it seems less than ideal. I'm assuming the caching you describe would solve this?

The link you posted is broken FYI

[slorber]

Oh, actually navigate() comes from the ReactNavigation context, so it should rather be cached in core

[slorber]

@cmmartin the original issue is not totally related to your problem. I've opened a new issue in core for that: https://github.com/react-navigation/core/issues/71

The original issue will be fixed by #3

[slorber]

should be fixed by release 1.0.3 and #38, please tell me if everything works

[slorber]

@cmmartin ,relative to this issue: https://github.com/react-navigation/core/issues/71

Can you help us understand what you are trying to achieve exactly with the following code?

function ReactComponent() {
  const {navigate} = useNavigation();

  useEffect(() => {
      if (user) {
          navigate(...)
      }
  }, [user, navigate])

 return null
}

Is it something related to switching from authenticated / non authenticated navigators?