Saving count variable when closing Dialog in React

Question

I am using useState inside Dialog in React Material UI.

and I use useCallBack Function like this.

const [count,setCount] = React.useState({
      count: 0
    })

const countCallback = useCallback(
  () =>
  setCount({
    ...count,
    count : count.count + 1
}),[setCount,count])

It shows incremented number when I click increment Button to execute this Callback in ChildComponent.

But when I closing Dialog and open Dialog again, count reset to 0.

Is there any way I can memorize count inside dialog? I don't want to use Redux.

score 1 · Accepted Answer · answered Jan 01 '20 at 10:19

You can use localstorage for it and use it to get the initial value of count at component mounting using useEffect.

useEffect(() => {
 const initialCount = localstorage.getItem("count"); //given that u name the localstorage variable as count when setting item //
 if(initialCount){
   setCount({count: initialCount})
 }
},[])

You can use another useEffect to set the value of count or you can do it just before setting the state.

score 0 · Answer 2 · answered Jan 01 '20 at 11:39

If you want to persist the code you have used you can set the state in parent component, send that state as a props to child component and return the new value from the child component back to parent component.

Following link will help you to pass data from child to parent component in react: https://stackoverflow.com/a/44467773/8057264

Using this approach you can maintain the lastest count in your application.

score 0 · Answer 3 · answered Jan 01 '20 at 11:48

Issue is, when you close the dialog, Dialog component unmounts due to which on opening the component again value of count sets to 0. What you can do is, Send the value to parent component everytime it is changed. In parent component store the value in state/local storage and pass the value as a prop to dialog component.

Saving count variable when closing Dialog in React

3 Answers3