React Navigation v5: useEffect() for header screen interaction?

Question

According to docs, we should use useLayoutEffect() for header screen interaction. I want to achieve the same by useEffect() hook, is the following way correct for it?

const [flag, setFlag] = useState(false);

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button
          onPress={() => {
            console.log("Header", flag);
          }}
          title="Update count"
        />
      ),
    });
  }, [flag]);

Also, using navigation.setOptions() should change the navigation prop, but how useLayoutEffect() with dependecy [navigation] as in docs, prevent from going into an infinite cycle?

Answer 1

Also, using navigation.setOptions() should change the navigation prop

There's no reason that setOptions should change the navigation prop. The navigation object doesn't contain any options, and updating options is not changing anything in the navigation object.