What can I do to prevent my state in react route from being lost when I refresh?

Question

I have this issue where by whenever I refresh the FeedbackDetailView page, the feedback state in the FeedbackDetailView is cleared, which is intended, but I am looking for a way to persist the feedback data. I have tried to use useEffect() to make a call to the API, but the UseEffect() does not run when the page and refreshed, hence the state is still cleared after the refresh. However, when FeedbackDetail navigated from the '/' route, the state is there and the component renders the comments fine. I have used context to save the feedbacks data from API call when the Homepage is rendered but the feedback state is still refreshed and also tried to save the feedback data to localStorage, but still can't get the feedback data to persist. Anyone can help? Thanks!

FeedbackDetailView.js

import { useParams, Link } from "react-router-dom";
import { useState, useContext, useEffect } from "react";

import ButtonTertiary from "../Elements/Buttons/ButtonTertiary";
import FeedbackDetail from "../FeedbackView/FeedbackDetail";
import FeedbackDetailComment from "./FeedbackDetailComment";

import FeedbackContext from "../../contexts/FeedbackContext";

const FeedbackDetailView = () => {
  const { feedbacks } = useContext(FeedbackContext);
  const id = useParams().id.slice(0, -1);

  const feedback = feedbacks.find((feedback) => feedback.id === id);

  return (
    
      
        
          
        
      

      

      
        
          {feedback.comments.length}{" "}
          {feedback.comments.length === 1 ? "Comment" : "Comments"}
        

        {feedback.comments.length !== 0 ? (
          
            {feedback.comments.map((comment, index) => (
              
            ))}
          
        ) : (
          ""
        )}
      

      
        Add a comment
        
          Max 250 characters.
        
        
        
          
        
      
    
  );
};

export default FeedbackDetailView;

Homepage.js

const Homepage = () => {
  const [open, setOpen] = useState(false);
  const [showFeedbacks, setShowFeedbacks] = useState(false);
  const [sortOption, setSortOption] = useState("Most Upvotes");
  const [selectedCategory, setSelectedCategory] = useState("All");

  const { feedbacks, setFeedbacks } = useContext(FeedbackContext);
  const { message, type } = useContext(NotificationContext);
  const { setLoggedInUser } = useContext(UserContext);

  useEffect(() => {
    feedbackService.getAll().then((initialFeedbacks) => {
      setFeedbacks(initialFeedbacks.sort((a, b) => b.upvotes - a.upvotes));
    });
  }, []);

  useEffect(() => {
    const loggedUserJson = window.localStorage.getItem("loggedFeedbackAppUser");
    if (loggedUserJson) {
      const user = JSON.parse(loggedUserJson);
      setLoggedInUser(user);
      feedbackService.setToken(user.token);
    }
  }, []);

  useEffect(() => {
    if (feedbacks.length > 0) {
      setShowFeedbacks(true);
    }
  }, [feedbacks.length]);

  const handleSlideoverOpen = () => {
    setOpen(!open);
  };

  const updateSortOption = (sort) => {
    setSortOption(sort);
  };

  const sortedFeedbacks = (feedbacks) => {
    if (sortOption === "Most Upvotes") {
      return feedbacks.sort((a, b) => b.upvotes - a.upvotes);
    } else if (sortOption === "Least Upvotes") {
      return feedbacks.sort((a, b) => a.upvotes - b.upvotes);
    } else if (sortOption === "Most Comments") {
      return feedbacks.sort((a, b) => b.comments.length - a.comments.length);
    } else if (sortOption === "Least Comments") {
      return feedbacks.sort((a, b) => a.comments.length - b.comments.length);
    }
  };

  return (
    
      
      {/* When screen is > 1024px (Desktop Screens) */}
      
        
          
            
            
          

          
            
            
          
        
      
      {/* When screen is > 768px (Tablet Screens) */}
      
        
          
          
        
      
      {/* When screen is < 640px (Mobile Screens) */}
      
        
      
      
        
      
      {/* Slideover */}
      
        
      
      
        
        
      
    
  );
};

export default Homepage;

FeedbackContext.js

import { createContext, useState, useEffect } from "react";

const FeedbackContext = createContext();

export const FeedbackProvider = ({ children }) => {
  const [feedbacks, setFeedbacks] = useState([]);

  return (
    
      {children}
    
  );
};

export default FeedbackContext;

App.js

import { Route, Routes } from "react-router-dom";

import Homepage from "./components/Homepage/Homepage";
import AddFeedbackForm from "./components/AddFeedback/AddFeedbackForm";
import LoginPage from "./components/Login/LoginPage";
import RegisterPage from "./components/Login/RegisterPage";
import FeedbackDetailView from "./components/FeedbackView/FeedbackDetailView";

import { NotificationProvider } from "./contexts/NotificationContext";
import { UserProvider } from "./contexts/UserContext";
import { FeedbackProvider } from "./contexts/FeedbackContext";

const App = () => {
  return (
    
      
        
          
            
              } exact />
              } />
              } />
              } />
              } />
            
          
        
      
    
  );
};

export default App;

user_8690857 · Answer

Move the useEffect hook that fetches and sets the feedbacks state into the FeedbackProvider so it can fetch it when it mounts and provide it to consumers, like the FeedbackDetailView component when it mounts. Remove that useEffect hook from the Home component.

FeedbackContext

import { createContext, useState, useEffect } from "react";

const FeedbackContext = createContext();

export const FeedbackProvider = ({ children }) => {
  const [feedbacks, setFeedbacks] = useState([]);

  useEffect(() => {
    feedbackService.getAll().then((initialFeedbacks) => {
      setFeedbacks(initialFeedbacks.sort((a, b) => b.upvotes - a.upvotes));
    });
  }, []);

  return (
    
      {children}
    
  );
};

export default FeedbackContext;

If you need to persist the feedbacks state through page reloads then you'll want to persist it somewhere longer term, like localStorage. The feedbacks state can be directly initialized from localStorage.

What can I do to prevent my state in react route from being lost when I refresh?

1 Answers