Debounced searchbox with persistent state

Application.js

export const useSearchConfig = () => useContext(SearchContext);
export const useSetSearchConfig = () => useContext(SetSearchContext);

export function Application({ children, changingParam }) {
  const [searchConfig, setSearchConfig] = usePersistentState(
    `MyComponent${changingParam}`,
    { searchTerm: '', sortDirection: ASC },
  )
  
  return (
    <SearchContext.Provider value={searchConfig}>
      <SetSearchContext.Provider value={setSearchConfig}>
         <SlowSearchbox />
         <SearchDependent />
      </SetSearchContext.Provider>
    </SearchContext.Provider>
  )
}   

Searchbox.js

export function SlowSearchbox() {
  const { searchTerm } = useSearchConfig()
  const setSearchConfig = useSetSearchConfig()

  return <Searchbox value={term} onChange={(e, v) => setSearchConfig(c => ({...c, searchTerm: v})} />
}

SearchDependent.js

export default function SearchDependent() {
  const { searchConfig: fast } = useSearchConfig();
  // Debounce here instead of in the searchbox
  const searchConfig = useDebounce(slow);
  
  const filtered = filter(data, searchConfig);
  
  return <MainContent list={filtered} />
}

useDebounce.js

export default function useDebounce(value, delay = 300 /* default delay */) {
  const [debounced, setDebounced] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay)
    return () => clearTimeout(handler)
  }, [value, delay])

  return debounced
}

usePersistentState.js

// returns `null` if no stored value exists
const readFromStorage = (key) => …

export default function usePersistentState(key, initialValue) {
  const [value, setValue] = useState(() => readFromStorage(key) || initialValue)

  useEffect(() => {
    const saved = readFromStorage(key)
    if (saved) setValue(saved)
  }, [key])

  useEffect(() => {
     writeToStorage(key, value)
  }, [key, value])

  return [value, setValue]
}