Next.js Discord

Discord Forum

Best way to persist state in React?

Unanswered
Acacia-ants posted this in #help-forum
Open in Discord
Acacia-antsOP
I'm currently building a search page and I want the filters to persist on forward/back/refresh.

The way I'm doing this at the moment is to store everything in local storage but it seems to cause a lot of main thread work... I think because each trip to local storage is blocking?

 const [keyword, setKeyword] = useLocalStorage<Keyword[]>({
    key: "talentKeyword",
    defaultValue: initialKeyword,
  });
  const [country, setCountry] = useLocalStorage<CountryOrTimezone[]>({
    key: "talentCountry",
    defaultValue: initialCountry,
  });
  const [sort, setSort] = useLocalStorage<TalentSortOptionKeys>({
    key: "talentSort",
    defaultValue: "relevant",
  });
  const [talentData, setTalentData] = useLocalStorage({
    key: "talentData",
    defaultValue: [initialData],
  });
  const [sizeData, setSizeData] = useLocalStorage({
    key: "talentPageIndex",
    defaultValue: 1,
  });


Is there a better way?

4 Replies