Handle re-calling a function inside useEffect when "Back Button" clicked from a user in React

I'm trying to not call loadUserPosts() function again if the user clicks the 'back button' on his browser. I think this is because of the isLogged useState because is changing when clicking the back button.

The loadUserPosts function is inside an useEffect only if the user is logged, so I have this:

In Posts.js component I have this:

import { useState, useEffect } from "react";
import { AuthUseContext } from  '../context/AuthContext';
import Axios from 'axios';

function Posts() {
    const [posts, setPosts] = useState([]);
    const { isLogged, setIsLogged, userData, setUserData } = AuthUseContext();

    useEffect(() => {
        if(isLogged) {
            loadUserPosts();
        }
    }, [isLogged]);

    // my API request to load all user posts
    function loadUserPosts()
    {
        Axios.post('/posts/load', {
            user: userData.id
        }).then((response) => {
            if(response.data.status === "success")
            {
                setPosts(response.data.posts);
            }
        }).catch((error) => {
            console.log("Something went wrong.. We are investigating.");
        })
    }

    return (
        <>
            {posts.map((p) => {
                <div className="post" key={p.id}>
                    <div className="post-user">
                        {p.username}
                    </div>
                    <div className="post-text">
                        {p.message};
                    </div>
                </div>
            })}
        </>
    )
}

export default Posts

If I remove the dependecies [isLogged] the isLogged will be false because the result from API Request in App.js has not been sent yet.

In app.js I have an API request to backend to check if the user is logged in or not (using NodeJs/Express as backend with cookie-session as middleware).

import { useEffect } from 'react'
import { Route, Routes } from 'react-router-dom'

import './css/style.css'

import Sidebar from './pages/Sidebar'
import Posts from './pages/Posts'

import { AuthUseContext } from  './context/AuthContext';

import Axios from 'axios'

function App() {
    const { isLogged, setIsLogged, userData, setUserData } = AuthUseContext();

    useEffect(() => {
        Axios.post('/checkuser', {
            userStatus: isLogged,
            userData: userData
        }).then((response) => {
            setIsLogged(response.data.status); // true / false
            setUserData(response.data.userdata); // { id: ..., name: ..., ...etc...}
        }).catch(function (error) {
            console.log("Something went wrong.. We are investigating.");
        });
        // eslint-disable-next-line
    }, [isLogged])

    return (
        <>
            <Sidebar />
            <div className="content">
                <Routes>
                    <Route path="/" element={<Posts />} />
                    <Route path="*" element={ <h1>Not found (404)</h1> } />
                </Routes>
            </div>
        </>
    );
    
}

export default App;

Can someone help me or how should I structure my components?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/DpwSUNz