I wonder if there's a way to avoid the logic around loadedFilters and just initialize the state (filters, searchText) directly without the extra useEffect but I suppose not since we'll also need to call the event handlers (onChangeFilters) somewhere..

I wonder if there's a way to avoid the logic around loadedFilters and just initialize the state (filters, searchText) directly without the extra useEffect but I suppose not since we'll also need to call the event handlers (onChangeFilters) somewhere..

yeah, thats the whole problem. you'll always need a useEffect to call the handlers. there might be a way to avoid having that loadedFilters state but I can't think of any...

I haven't really looked at the code in-depth yet, but can't we just call a function that saves the state in local storage when changing the state? Something like this:

onChangeWhatever={() => {
  updateWhateverState();
  saveToLocalStorage()
}}

I haven't really looked at the code in-depth yet, but can't we just call a function that saves the state in local storage when changing the state? Something like this:

onChangeWhatever={() => {
  updateWhateverState();
  saveToLocalStorage()
}}

we can do that, but we'll still need the useEffect to load the filters from storage, so I think it's simpler to also do the storing there all in one place...

a useEffect with an empty dependency list (since you'd only want to run this a single time) feels cleaner than very complex useEffect functions