Saving the count on a react effect - reactjs

Question

I'm trying to learn how to use react hooks with effects and state.
I have some text with up and down votes on it.
function Overview() {
const [countUp, setCountUp] = useState(0);
const [countDown, setCountDown] = useState(0);
useEffect(() => {
document.title = `You clicked ${countUp} times`;
}, [countUp]);
useEffect(() => {
document.title = `You clicked ${countDown} times`;
}, [countDown]);
return (
<List.Item
key="1"
title="whisperFunding"
description="test"
actions={[
<Button onClick={() => setCountUp(countUp + 1)}><IconText type="like-o" text={countUp} key="list-vertical-like-o" /></Button>,
<Button onClick={() => setCountDown(countDown + 1)}><IconText type="dislike-o" text={countDown} key="list-vertical-like-o" /></Button>,
]}
>
I'm trying to figure out how to save the state so that each time I refresh the page, the previous state is loaded instead of being reset to zero.
Do I need to make a form to do that?
Currently, the up and down clicks work, but if I refresh the page, everything goes back to zero. How do I save the state to preserve for the next time I visit the page?
Is there an example somewhere that I can follow of how to do this? I have plenty of forms in my app but not sure how to integrate one in my list item for the count? or if I can use effect to save the count history.

Answer 1

Here is a crude example of how you can achieve this with the browsers localStorage. You can read the browsers localStorage Here. Since React is a frontend framework you need to save the value somewhere or when you refresh the page the entire app will reload. So you can use a number of different storage devices like localStorage or a database for example. Saving to a database is more permanent and gives you more control because localStorage can be deleted by a user but they rarely do so. If you need a production app that remembers the count long term or you need this count to be more secure you may want to set up an api with nodeJs and mongoDB or something similar but for most cases in frontend frameworks localStorage can be enough and easy to implement. I just made a simple counter you can adjust it to your liking but this should give you a good starting point.
First I used a return statement in your setState functions to get the previous state. Then you can just calculate the count and set the localStorage then return the new count to the state object. To get the initial value from localStorage you can do useEffect with an empty dependency array to run the effect only once when the component first mounts. You can then get the localStorage item and set it to your count. Here is an example.
import React, { useState, useEffect } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
const increase = () => {
setCount(prevCount => {
const newCount = Number(prevCount) + 1;
localStorage.setItem("count", newCount);
return newCount;
});
};
const decrease = () => {
setCount(prevCount => {
const newCount = Number(prevCount) - 1;
localStorage.setItem("count", newCount);
return newCount;
});
};
useEffect(() => {
const initialValue = localStorage.getItem("count");
if (initialValue) setCount(initialValue);
}, []);
// Just to show you the localStorage Value
console.log(localStorage.getItem("count"));
return (
<div>
<button onClick={increase}>Plus</button>
<button onClick={decrease}>Minus</button>
<div>{count}</div>
</div>
);
};
export default Counter;