Invariant Violation: Maximum update depth exceeded when using setParams

[robertherber]

const { setParams } = useNavigation();

useEffect(() => {
  setParams({ myParam: 'myValue' });
}, [setParams]);

causes Invariant Violation: Maximum update depth exceeded. And when using best practices according to eslint-plugin-react-hooks this dependency is automatically added. I suggest:

• If setParams was immutable this wouldn't be a problem.
• Not sure exactly how the plugin eslint-plugin-react-hooks works, but would of course be great if it wouldn't include something like setParams automatically. For setState this is the case - maybe using setState under the hood would make it smarter? Otherwise it's probably outside the scope of this package! :)

[slorber]

This is true, and I'll fix this as soon as I have a good developer setup

Also => #3

[iamgerardm]

Any update on this?

[slorber]

@iamgerardm the issue to check is #40

It's not so clear how to solve this issue, I've tried to see with the React team what the reco here: facebook/react#16956

One solution is to expose a navigation ref, always stable:

const navigationRef= useNavigationRef();
useEffect(() => {
  navigationRef.setParams({ myParam: 'myValue' });
}, [navigationRef]);

I don't know if we want to ship such a public api, it feels a bit weird. In the meantime you can create useNavigationRef in userland, it seems pretty safe in most cases (according to React team, the risk is when you start to pass that ref to children comps as props)

const useNavigationRef = () => {
  const navigation = useNavigation
  const ref = useRef(navigation);
  useLayoutEffect(() => {
    ref.current = navigation;
  });
  return ref;
};