Save State to LocalStorage & Persist on Refresh with React.js

thank you so much brother

hi colbyfaycock, please can you do a video where when you logout from the redux it saves everything done so when you log back in it is persisted base on the user that logs in.

Thank you so much!!

Great video, thanks. for the Token what should we do about it to make it safe?

Can I read the localstorage value first, if the local storage value exists, I will use this value as a flag to decide show the banner or not, if the local storage value is null or undefined, I will set the flag to true.( the first time render the page), in this case the banner won't flash after you hided and refresh the page.

Great stuff man, damn those cookies, this approach is much simpler for what i needed, thank you! :x

Thank you!

Hey, I'm building an application in which the data is obtained from the local storage, but as to display them, I always need to refresh the page. I want them to display right away. I tried useEffect with a value in the dependency array, but it causes too many re-renders. Is there any way to update state without refreshing?

I was having issues with the local storage being written to my default sate on every refresh. I ended up getting it fixed by adding an arrow function to my useState that returns the local storage value if it’s defined or the default if not.

Hello Colby, the tutorial was great! I was followig along but my local storage is, sadly, refreshing all the time. No error nothing, dont you know what it can be? Im using object aj state instead. Thanks!

how would you replace useEffect with componentDidMount on class component? I need to use localStorage on a class component.

Honestly, this guy is great at teaching. Keep it up man!

i am making a todo list for practice and doing everything correct still local storage gets cleared on refresh any help?

i m not an english native speaker. i pause and rewatch your steps couple of times to figure out what you have done. :) and i totally get it!!😁you explain very well!! thumb's up for you thank you!

Can anyone pls tell me why my Value is shown as [object Object] ? I have followed this video carefully and used it for saving the theme which was pre selected. Also, my useState looks like
const [theme, setTheme] = useState('classicTheme');

where classicTheme and 4 more themes are defined in my themes.jsx file. The themes can be changed using a switch case.

Also, removed strict mode from index.js :(

Amazing! Thanks a lot.

Thank you very much for the video
Pls is there a way to avoid the short time flash from showing
I have a NextJS app where a user can change the primary colour used on the page. I had to store the colour the user picked last in the browser's session storage
But there's this short time flash of the default colour when the user refreshes the page before it gets updated by react state
So is there a way to avoid the flash🙏

You're so good at teaching man.. 🙏🙏

Great vid Colby. This is really helpful and exactly what I wanted to know, thank you!

thank you for such a good explanation

Loved this tutorial a lot

man this was beautifully explained. Wish I found this channel when I was first learning React.

greater tutorial! thank you.

Thanks for the short and concise explanation!

Amazing video. Keep going bro!

wow your teaching is so straight forward, just directly hits into brain.

space jelly

Thank you so much!💝💝

Thanks, could someone explain why

if(data !== null){
setShowBanner(JSON.parse(data))
}

works but

if(data){
setShowBanner(JSON.parse(data))
}

does not work.

Ive been ripping my hair out for hours

How do we persist it if we change pages to a different link?

amazing tutorial experience! looking forward for more <3

Great Video! Thanks a mill

Hello, Colby! How to get rid of the banner flash just after the page refresh?

Thank you, amazing video!

Now with strict mode... it's broken.... kinda...

what a good explanation!! Thanks a lot

Colby! You are such an AMAZING teacher! You have a gift my brother wow. Keep it up man you will reach and help so many people regardless of the industry you are in, I just know it. Keep going, you are truly gifted.

this helped me thanks dude

Amazing, many thanks for a great tutorial. It's super helpful that you describe as much as you do around the topic.

Great video and thank you for knowledge.

amazing, so calm, and simple

Hey Colby. Can you perhaps share a hook snippet for local storage? Every thing I find doesn't take into consideration SSR.

idk why but its not working in my project(

ok i think i found a solution for some reason strict mode in next.js config file was preventing me to store local storage on update .... just change next.js config module.exports = {
reactStrictMode: false,
} and it should work

Thank you ) 🤝

I don't think I have enjoyed a tutorial video this much, it was so calm and I understood every bit of it, big ups!

GG ! finally something that works ahahah

hey, i cant able to store the data, when i refresh page it is showing true, could you help me