如何在 React 中保留组件的 state？

Question

In my React project, I have a homepage which displays several blogs based on a topic. These blogs are stored in the state by making an API call on the basis of topic. On clicking on a blog, it takes me to the individual page for it. Now what I want is that when I press back from the individual blog page, the earlier state is restored, ie I get the same list of blogs related to that topic which I had before and I do not have to make another API call. How can I do this?

Answer 1

I suggest you use React.Context allowing you to store data in a global state.

The official documentation is pretty well written.

Answer 2

There are multiple options to preserve/restore the state while navigating the application. Sorted from easiest to the more difficult solutions:

1. Cache your API responses

This is probably the simplest change you can make and prevents your application from doing the same API request and re-uses the first response in each subsequent request.

The downside is that when your data changes, the cache needs to be invalidated. This can either be done manually or you can use a cache lifetime mechanism.

https://developer.mozilla.org/en-US/docs/Web/API/Request/cache

2. Wrap your application with Context

React's state is preserved as long the component is mounted. You can take advantage of this principal and store your state in a wrapping component. With React's Context you can use this state.

This is a low-level entry to Global State Management without installing dependencies.

3. Global State Management with libraries

The most future-proof, but somewhat difficult solution, is to use a global state management library like; Redux or Mobx

Answer 3

How do you handle the current topic? I'm thinking that it would be a good idea to manage the current topic in the route, like this:

• /blogs/sports: list blogs related to sports topic.
• /blogs/tech: list blogs related to technology topic.
• etc...

This way you don't have to worry about state preservation, when you go back from a specific blog you can take the topic from the route and display only the blogs related to that topic.