Working with React useEffect & local storage

Question

I've never worked with local storage in combination with React.

My goal is simple: When users complete a test, localstorage should store a value saying they've completed the test. If the completedTest State is true, show a ShowResultsComponent.

Showhow I feel as if I'm going about this the incorrect way.

// I'd like localStorage.complete to start as false. 

const [completedTest, setCompletedTest] = useState(localStorage.complete);

useEffect(() => {
localStorage.getItem('complete');
}, []);

const completeTest = () => {
localStorage.setItem('complete', true);
}


{completedTest ? 
<ShowResultsComponent />
: null }

maybe this will help https://stackoverflow.com/questions/56660153/how-to-listen-to-localstorage-value-changes-in-react — Keaton Benning, Feb 22 '23 at 18:45
when you set the complete true in localstorage, change your state as well — Nisharg Shah, Feb 22 '23 at 18:51
@NishargShah is that not accomplished with: const [completedTest, setCompletedTest] = useState(localStorage.complete); — AndrewLeonardi, Feb 22 '23 at 18:51

score 1 · Accepted Answer · answered Feb 22 '23 at 18:51

You want to set the state of completedTest in the useEffect() hook. Also, when conditionally rendering, you should use an empty React fragment <></> instead of null.

Example:

import React, { useEffect, useState } from "react";

export default function SomeComponent() {
  const [completedTest, setCompletedTest] = useState(localStorage.complete);

  useEffect(() => {
    const c = localStorage.getItem("complete");
    setCompletedTest(c);
  }, []);

  const completeTest = () => {
    localStorage.setItem("complete", true);
    setCompletedTest(true);
  };

  return <div>{completedTest ? <div>render this if completed</div> : <></>}</div>;
}

Nisharg Shah · Answer 2 · 2023-02-22T18:55:26.727

0

You can do like this, no need to listen the localstorage.

const isCompleted = localStorage.getItem("complete") === 'true';
const [completedTest, setCompletedTest] = useState(isCompleted);

const completeTest = () => {
   localStorage.setItem('complete', true);
   setCompletedTest(true)
}


return completedTest ? <ShowResultsComponent />: null;

edited Feb 22 '23 at 18:55

answered Feb 22 '23 at 18:52

Nisharg Shah

16,638
10
62
73

On a page refresh, wouldn't completedTest return to false? (That's my issue) – AndrewLeonardi Feb 22 '23 at 18:54
Ohk, see updated one – Nisharg Shah Feb 22 '23 at 18:54
Sweet let me give this a try – AndrewLeonardi Feb 22 '23 at 18:55
For some reason it seems that completedTest is undefined on first load. How could I make completedTest be set to false on first load? – AndrewLeonardi Feb 22 '23 at 19:11
1

on firstLoad it will be `false` (check new code - refresh the page), I am checking localstorage getItem to be 'true' so if localstorage doesn't have `complete` item then it will return undefined and I am checking that with 'true' so it will return false – Nisharg Shah Feb 22 '23 at 19:21

Working with React useEffect & local storage

2 Answers2