Change useLayoutEffect of useNavigationComponentHooks to useEffect

[hancandice]

I changed useLayoutEffect to useEffect at useNavigationComponentDidAppear & useNavigationComponentDidDisppear.

const useNavigationComponentDidAppear = (
  handler: EventHandler,
  componentId: string
) => {
  useLayoutEffect(() => {
    const subscription = Navigation.events().registerComponentDidAppearListener(
      (event: ComponentDidAppearEvent) =>
        triggerIfComponentIdMatches(handler, event, componentId)
    );
    return () => subscription.remove();
  }, [handler, componentId]);
};

As you can see, in previous code, useNavigationComponentDidAppear worked by using useLayoutEffect to registerComponentDidAppearListener to navigation events. (The signature of useNavigationComponentDidDisppear is the same)

So if user use setState inside useNavigationComponentDidAppear, the next call will not be called because the component will be updated before the next effect is executed.

That's why some user experiences this issue : https://github.com/underscopeio/react-native-navigation-hooks/issues/62

Reference

• https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js#L117
• https://stackoverflow.com/questions/53781632/whats-useeffect-execution-order-and-its-internal-clean-up-logic-in-react-hooks
• https://blog.logrocket.com/useeffect-vs-uselayouteffect-examples/