'Expo-notifications trigger all useEffects in the application

I created the entire flow for expo-notifications, although I encounter one problem. Once I receive the notification, the UI of the specific type is re-rendered and - which is the core of the problem - all the useEffects with fetch get triggered in the application; it seems that it re-renders the entire application. Even disabling the update of the specific part of the UI (that I want to update) still causes that a notification makes the app to re-render.

I tried to find the cause of that, but no progress so far. Did anyone of you ever encountered this kind of problem? Why the app gets re-rendered entirely?

The function registerForPushNotificationsAsync is copy-pasted from their docs. Here is my notification provider - I get notification correctly, but idk what causes the re-render and trigger all the useEffects:

const NotificationsProvider = () => {
  const authenticationStatus = useSelector(authStatus);
  const dispatch = useDispatch();
  const [expoPushToken, setExpoPushToken] = useState("");
  const [notification, setNotification] = useState<Notifications.Notification | null>(null);  

useEffect(() => {
    if (authenticationStatus === AUTHENTICATION_MESSAGES.AUTHENTICATION_SUCCESS) {
      registerForPushNotificationsAsync()
        .then((token) => setExpoPushToken(token))
        .catch((error) => console.error(error));
      const subscription = Notifications.addNotificationReceivedListener((receivedNotification) => {
        setNotification(receivedNotification);

        const { id, title } = receivedNotification.request.content.data;
        console.log(receivedNotification.request.content.data);
        dispatch(
          addAsync(
            [
              {
                id: id,
                title: title,
              },
            ],
            1 * 1000
          )
        );
      });

APP.tsx

const App = () => {
  const [fontsLoaded] = useFonts({
    Roboto_400Regular,
    Roboto_500Medium,
  });

  return fontsLoaded ? (
    <Provider store={store}>
      <PaperProvider theme={theme}>
        <NotificationsProvider />
      </PaperProvider>
    </Provider>
  ) : (
    <AppLoading />
  );
};


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source