React Persist State to LocalStorage with useEffect

Not working for me.
IDK why

short and clear as crystal ,thx very much

my second useEffect is overriting the first one so I am not loading the JSON file as expected. This is my code, any ideas?

import React , {useState} from 'react';
import {generate} from 'shortid'
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

import MyForm from './MyForm';
import { MyTable } from './MyTable';


interface MyObj {
myString: string;
myNumber: number;
}

const App = ()=> {


const [rows, setRows] = useState([{
id: "32",
firstName: "Mel",
lastName: "Vel",
email: "sasasa"
}

]);

React.useEffect(()=> {
const data = localStorage.getItem('myList');
if (data){
console.log('yes data')
setRows(JSON.parse(data));
}
}, [])

React.useEffect(()=> {
console.log('set item rows')
localStorage.setItem("myList", JSON.stringify(rows));
setRows(rows);

});

return (
<div style={{ textAlign: "center"}}>
<MyForm onSubmit={(data)=>{
setRows(currentRows => [
{
id: generate(),
...data
},
...currentRows,

])

}} />
<MyTable
rows={rows }
/>

</div> )
}

export default App;

Thank you for this. It helped a lot ^^

Concise and useful. Thank you sir.

Thank you so much

My code is exactly the same, but for some reason the local storage data doesn't persist for me between app reloads... any idea why? Could this be browser's fault?

thanks!!!! quicky easy solution

Thank you so much. This helped me.

Hi Ben, Thank you, It was very cool. please make more videos like this. Best of luck 🌹🙏

i followed the exact steps but still unable to persist my data

I love you ben, you're a lifesaver, i've been struggling with this for a week only to find the solution is so simple, Thank you so much man.

Thanks dude

It Worked for me Thanks a lot brother!!!

i was stuck for three hours on this bloody problem. thanks for the help

Solid content as always sir.

Thanks man !

You are the best keep building startups :-))

Great video man. Thanks for the help!

thank you so much dude

thanks king

Thank you so much Ben, yo helped me to resolve an issue in my code

What if user data is sensitive and you still need to store in UI what we can use apart from local storage????

What if user data is sensitive and you still need to store in UI what we can use apart from local storage????

artist you are

Very helpful video..thank you!!

Hey there hopefully someone can help me out. I followed the implementation like in the video, everything just works fine. Now I wanted to create a new page /add and put the add function and logic in there, but I’m not able to do the set function or doing the useeffect. What am I missing? I’m thankful for every help!

Thank you, Ben!

Thanks man! I was stuck for 10 hours because i was setting item first in the local storage and then getting it and i was getting nothing. I saw your vid and now solved the issue. Thanks again

fucking brilliant, simple, straight to the point and effortlessly practical. These other videos had me running circles LOL

Thanks, dude!

This helps a lot, thank you. But there's no way Kirby is top tier. 1/10

Hi, hope you are good. I just finished implementing a registration process with multiple screens, what if the app closes in the middle of the process? I wouldnt want the user to start over again. How do i achieve this?

Hi, hope you are good. I just finished implementing a registration process with multiple screens, what if the app closes in the middle of the process? I wouldnt want the user to start over again. How do i achieve this?

My hero.

Thanks Ben 👍🏻

or you can use a custom useLocalState hook and store the value in localstorage everytime setValue is called
in addition to that you can add an event on local storage value change and change state via that
in that way a state change in one window will affect that same state in another window of the same browser

holy shit thanks!

Excellent!

This video just saved my life on my internship program! Thank you so much man :D

you videos suck ... you skip too many steps

TYSM buddy 💛 Keep teaching please

if somebody want to see normal React (Local Storage)code which was writte with using Functional components here he is:

function App () {

const [state,setState] = React.useState({

user: '',

rememberMe: false

})



const ref = useRef(null)



const handleChange = (event) => {

const input = @t;

const value = input.type === 'checkbox' ? input.checked : input.value;



setState(Object.assign({}, state, {[input.name]: value }));

};





localStorage.setItem('foo', 'foo')

const handleFormSubmit = () => {

const { user, rememberMe } = state;

localStorage.setItem('rememberMe', JSON.stringify(rememberMe));



if (rememberMe) {

localStorage.setItem('user', JSON.stringify(user));

} else {

localStorage.setItem('user', '');

}

};



useEffect( () => {

const rememberMe = localStorage.getItem('rememberMe') === 'true';

const user = rememberMe ? JSON.parse(localStorage.getItem('user')) : '';

setState({ user, rememberMe });

},[])





return (

<form onSubmit={handleFormSubmit} ref={ref}>

<label>

User: <input name="user" value={state.user} onChange={handleChange}/>

</label>

<label>

<input name="rememberMe" checked={state.rememberMe} onChange={handleChange} type="checkbox"/> Remember me

</label>

<button type="submit">Sign In</button>

</form>

);

}

Thank you a lot!

Great tutorial. Straight to the point, super super simple, super clear
EDIT: and comments. Read the comments guys. Thx

What would happen if you did this in session storage instead? Does session storage persist across page refresh?

I have some questions about this approach,

- Can I use this method in production?
- Can I apply this method to save login state? And if not, what is the alternative?

Wonderful video! Thank you exactly what I was looking for.

very good video tutorial. thank you

Thank you!