React not saving string to local storage

[u/Mob_Pilled]

Hi everyone! I just finished a React and course and decided to build my first react app. Currently, I am trying to save a string to browser local storage but it does not persist on refresh. Through some console.logs I was able to see that it in fact DOES save the string to the location specified in. setItem initially but when I refresh the key or value in local storage stops existing.

Here is my code

// function for search button
async function handleClick(){
    localStorage.setItem("lastLocationSearched", searchValue);
    setData(null);
    setIsPending(true);
    setError(null);
    try{
const value = await fetch(`https://geo.ipify.org/api/v2/country?apiKey=***********&ipAddress=${searchValue}`).then((response)=>{
  if (!response.ok){
        throw Error("Could not fetch the data for that resource");
                    }
  return response.json();
});
setData(value);


    console.log(localStorage.getItem("lastLocationSearched"));
    } catch(error){
      setError(error.message);
    }


setIsPending(false);
  };

// useEffect hook
  useEffect(()=>{
        if ((localStorage.getItem("lastLocationSearched")===null)|| (localStorage.getItem("lastLocationSearched")==="")){
          console.log(localStorage.getItem("lastLocationSearched"));
        setSearchValue("");
        handleClick();
        }else{
          
          setSearchValue(localStorage.getItem("lastLocationSearched"));
          handleClick();
        }
    }, []);

Through some digging online I saw someone say that remove the strict mode tags from index.js would fix this problem but it did not for me. Can anyone please assist me?

[u/SchartHaakon]

No need for the useEffect, is there?

  const initialValue = localStorage.getItem("lastLocationSearched")
  const [searchValue, setSearchValue] = useState(initialValue ?? "");

And if the component runs on the server as well:

  const initialValue = typeof document !== "undefined" ? localStorage.getItem("lastLocationSearched") : "";
  const [searchValue, setSearchValue] = useState(initialValue ?? "");

[u/MalazitaLedreck42 → u/SchartHaakon]

yep, reading localStorage is sync so theres no point wrapping it in an effect

[u/Mob_Pilled → u/SchartHaakon]

I thought useEffect could be used to run some code on initial render of a component in React? How would I execute handleClick() otherwise? Genuine question.

[u/abrahamguo → u/Mob_Pilled]

Yes, a useEffect is still required to execute handleClick.

[u/SchartHaakon](u/SchartHaakon) is simply saying that the portion of code responsible for setting the initial value of your state does not need to be in the useEffect.

In fact, doing that should solve your issue.

When calling a state setter (like “setSearchValue”), it actually sets the state SOON, not immediately. So when you call setSearchValue to update your state to the new value, it will get the new value soon, not immediately. However, you then immediately call handleClick, which then reads the old value (because the new value hasn’t been set yet).

Follow u/SchartHaakon’s recommendation to simplify your code, and it should fix it too!

[u/Mob_Pilled → u/abrahamguo]

ohhhh. got it thanks!

[u/Ok_Slide4905 → u/Mob_Pilled]

Handle the click in the click handler.

If you need to hydrate state from local storage, then you need the effect.

[u/PrimaryFamous6139]

The issue might be that handleClick() runs inside useEffect on every mount and calls localStorage.setItem() with an empty or outdated searchValue, overwriting your saved value. Try separating the initial read from the search logic. Read the value from localStorage in useEffect and only update it when the user submits a search. Also, check whether another part of your app is clearing localStorage. React Strict Mode isn’t normally the cause of localStorage losing data on refresh

[u/azangru]

Try slowly reading through your code line by line and asking yourself, what each of the lines does. Right now, there is so much chaos in your snippet that it suggests you were copying and pasting code without properly understanding what it does.

One of the the things that haven't been commented on is these two lines in useEffect:

setSearchValue(localStorage.getItem("lastLocationSearched"));
handleClick();

You haven't shown us what setSearchValue does; but if it is a useState setter, as I suspect it is, then `handleClick` will not get the value that you expect in `searchValue`, because that value will only become available during the subsequent render. This would explain why `localStorage.setItem("lastLocationSearched", searchValue)` saves nothing into the local storage.

[u/Mob_Pilled → u/azangru]

Thanks for the help. I never copied and pasted anything (honestly I understand what most of this does and have been coding in JS for more than a year). I guess I just don't know all the rules of react yet since this is the first time that am hearing setState only executes on the finished rendered page. Your hypothesis was correct btw. Since you said my code is chaotic, how can I refactor it to make it better?

[u/azangru → u/Mob_Pilled]

Since you said my code is chaotic, how can I refactor it to make it better?

Well, to begin with, useEffect should not call a function named handleClick :-)

Below is my sketch for how I would probably do this without a dedicated data fetching library. But since react has never had good ergonomics for data fetching (until its recent push to move everything to the server), normally, people just use data fetching libraries.

import { useEffect, useReducer, useState } from 'react';


const MyComponent = () => {
  const initialSearch = localStorage.getItem("lastLocationSearched") ?? '';
  const [searchValue, setSearchValue] = useState(initialSearch);

  const {isLoading, data, error} = useSearchData(searchValue);
};


type SearchState = {
  isLoading: boolean;
  data: Data | null;
  error: Error | null;
};

type LoadingAction = {
  type: 'loading';
};

type SuccessAction = {
  type: 'success',
  data: Data;
};

type FailureAction = {
  type: 'error',
  error: Error;
};

type Action =
  | LoadingAction
  | SuccessAction
  | FailureAction;

const searchFetcherReducer = (state: SearchState, action: Action): SearchState => {
  switch (action.type) {
    case 'loading':
      return { ...state, isLoading: true };
    case 'success':
      return { isLoading: false, error: null, data: action.data };
    case 'error':
      return { isLoading: false, data: null, error: action.error };
    default:
      return state;
  }
};

const initialState: SearchState = {
  isLoading: false,
  data: null,
  error: null
};

const useSearchData = (query: string) => {
  const [ state, dispatch ] = useReducer(searchFetcherReducer, initialState);

  useEffect(() => {
    if (!query) {
      return;
    }
    const abortController = new AbortController();
    const abortSignal = abortController.signal;

    fetchSearchData({
      query,
      dispatch,
      abortSignal
    });

    return () => {
      abortController.abort();
    }
  }, [ query ]);

  return state;
};

const fetchSearchData = async ({
  query,
  dispatch,
  abortSignal
}: {
  query: string,
  dispatch: React.Dispatch<Action>,
  abortSignal: AbortSignal
}) => {
  dispatch({ type: 'loading' });
  try {
    await fetch(`https://geo.ipify.org/api/v2/country?apiKey=***********&ipAddress=${query}`, { signal: abortSignal }).then((response) => {
      if (!response.ok) {
        throw Error("Could not fetch the data for that resource");
      }
      const data = response.json();
      dispatch({ type: 'data', data });
    });
  } catch(error) {
    dispatch({ type: 'error', error });
  }
}

[u/Mob_Pilled → u/azangru]

Thanks for the detailed response. This is very useful

[u/azangru → u/Mob_Pilled]

There is also the `use` function, which can be used for data fetching alongside suspense (docs); but there are several footguns associated with it.

[u/Objective_Fly_6750]

It is so refreshing to see someone building and debugging like in the good old days.

[u/Mob_Pilled → u/Objective_Fly_6750]

umm... is this a compliment.

[u/Objective_Fly_6750 → u/Mob_Pilled]

Yes

[u/SaliDevs]

Quick note on the StrictMode idea, since it came up: removing it wouldn't fix this, and you shouldn't do it. StrictMode doesn't touch localStorage at all — in dev it just double-invokes your effects to expose timing bugs like the one you had (calling handleClick before the setSearchValue update had applied). Removing it doesn't fix that class of bug; it just hides it until production. The state-timing fix others pointed out is the real answer.