React Native refresh content when user hits back button - using Hooks

Question

I would like to refresh the data, when user is back from one page to another. This is how my useEffect function looks like now:

useEffect(() => {
    setIsLoading(true);

    AsyncStorage.getItem("user").then((response) => {
        const currentData = JSON.parse(response);
        setUser(currentData)
        fetch('URL',
            {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user_id: currentData.id
                }),
            }
        )
            .then(response => response.json())
            .then(data => {
                 setNotis(data.notifications);
                 setIsLoading(false)
            })
            .catch(error => {
            });
    });
}, []);

This function should run every time when user is on the page. Doesn't matter if it was onBackPressed or not.

Thanks

Answer 1

Using React-navigation

We can directly refresh screen if you're using react-navigation

Import @react-navigation/native

import React, { useEffect } from "react";
import { useIsFocused } from "@react-navigation/native";

const HomeScreen = (props) => {
const isVisible = useIsFocused();

useEffect(() => {
    console.log("called when screen open and also on close"); 
    // this will call on both screen open and screen close.

   if (isVisible) {
      console.log("called when screen open or when back on screen "); 
   }

}, [isVisible]);

return (
    ......
)

}

I hope it will help.