Implementing a local like/unlike feature in NextJS and making it persist between client-side routes

I have a blog front-end app built using NextJS and it looks like this:
enter image description here

Each card here is a functional component called PostPreview.jsx. As you can see, each component comes with a heart icon. By default, this icon is to stay gray. However, when clicked it turns red, signifying that the post has been liked. This action only occurs if the user is logged in. If not, clicking the heart icon presents a login modal.

Right now, I’m only focussing on making the “like” persist between client-side navigations, i.e. without any interaction with the db/server.

As of now, clicking the icon, toggles the color alright. However, it fails to persist when you navigate away, say, by clicking on a post title and then hitting the back button to return to this page. What is the recommended way to achieve this functionality?

The entire codebase can be found at my repo here: https://github.com/amitschandillia/proost/tree/master/web

The code for the component in question (PostPreview.jsx) is at: https://github.com/amitschandillia/proost/blob/master/web/components/blog/PostPreview.jsx

The site is live at https://www.schandillia.com/blog.

I understand I could use Redux, but not sure how to prevent the value from being reset upon each re-render even when using Redux.

Illustrating the problem better

Visit blog page; several instances of component (PostPreview) render for the first time:

  1. Receive array of post “likers” via the likedBy prop object.

  2. Retrieve logged-in user’s ID from the Redux store via userInfo.userID.

  3. Look up userInfo.userID against the likedBy.readers array of IDs.

  4. If user ID exists in readers array, post is liked, set liked to error to turn the heart icon red and push post’s id to the likedPosts redux store.

  5. If user ID doesn’t exist in readers array, leave liked to inherit to leave it gray and remove post’s id from the likedPostsredux store.

Like a post; click the heart icon:

  1. Set liked to error to turn the heart icon red.

  2. Push post’s id to the likedPostsredux store.

Unlike a post; click the heart icon:

  1. Set liked to inherit to turn the heart icon red.

  2. Remove post’s id from the likedPostsredux store.

Now click any link on page to navigate away from the page (client-side routing, no server contact here). Then hit the browser’s back button to return to the blog page.

At this point, the component (PostPreview) re-renders and the redux store will be reset in accordance with the original likedBy prop object. This, of course, means that all the changes since the first render are gone. This is where I need help. How would you handle such a situation where user interactions like likes and dislikes have to be persisted across client-side navigations and also honored across re-renders?

Source: ReactJs