Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a way to clear localStorage in useLocalStorage #229

Closed
franky47 opened this issue Apr 11, 2019 · 4 comments
Closed

Add a way to clear localStorage in useLocalStorage #229

franky47 opened this issue Apr 11, 2019 · 4 comments
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects

Comments

@franky47
Copy link

franky47 commented Apr 11, 2019

I use useLocalStorage a lot, and it could use a cleanup story in some cases.

Maybe as a third tuple member, have a function to call to clear the item, that respects the side-effects lifetime, as I found that simply calling localStorage.removeItem(key) can create a race condition with the hook recreating the value from memory.

Example:

const Foo = () => {
  const [value, setValue, clearValue] = useLocalStorage('key')
  return (
    <>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <button onClick={clearValue}>Clear</button>
    </>
  )
}
@franky47
Copy link
Author

Here is a demo of the issue I'm having with clearing the local storage: it comes back after a page refresh.
https://codesandbox.io/s/j3xr9k25lv

@wardoost wardoost added the enhancement New feature or request label Apr 15, 2019
@streamich streamich added this to To do in react-use via automation Jun 1, 2019
@streamich streamich added the help wanted Extra attention is needed label Dec 10, 2019
suyingtao pushed a commit to suyingtao/react-use that referenced this issue Dec 13, 2019
streamich added a commit that referenced this issue Jan 5, 2020
feat(useLocalStorage): add remove method. (#229)
@ayush987goyal
Copy link
Contributor

@streamich Hi, considering the api for useLocalStorage was changed recently in v13.x, the change in the above PR has to be done there too. @suyingtao Can you please create a PR with your changes on the latest release? :)

streamich pushed a commit that referenced this issue May 16, 2020
# [15.0.0](v14.3.0...v15.0.0) (2020-05-16)

* v15 release ([0f82ba6](0f82ba6))

### Bug Fixes

* 🐛 better serialization handling in useLocalStorage hook ([68fb835](68fb835))
* 🐛 correctly test if env is browser in useMeasure ([9ae494f](9ae494f))
* 🐛 make useMeasure work on server ([2daf769](2daf769))
* 🐛 remove set dependencies in useSet hook ([90ba9d0](90ba9d0))
* 🐛 revert useMeasure defaults to zeros ([dc92b64](dc92b64))
* remove console log 🤓 ([f17c8a0](f17c8a0))
* **useLocalStorage:** using undefined for empty value instead of null ([1620e01](1620e01))
* use latest set object in useSet "has" method ([41f9452](41f9452))

### Features

* 🎸 add useScratch() sensor hook ([58db2f9](58db2f9))
* 🎸 catch up with v14 ([be69035](be69035))
* 🎸 improve implementation of useMeasure() hook ([a164843](a164843))
* 🎸 improve implementation of useMeasure() hook ([4d88240](4d88240))
* 🎸 mock useMeasure() hook on server and w/o ResizeObserver ([866f3d7](866f3d7))
* 🎸 mock useMeasure() hook on server and w/o ResizeObserver ([2bbc73a](2bbc73a))
* 🎸 remove resize-observer-polyfill from useMeasure ([2a13fba](2a13fba))
* 🎸 remove resize-observer-polyfill from useMeasure ([bf11131](bf11131))
* Dependencies inference for useCustomCompareEffect ([477c164](477c164))
* improve useAsyncFn and useAsync typings ([85967e2](85967e2))
* keep previous state in useAsyncFn ([54ac91b](54ac91b))
* use useReducer in useUpdate hook, instead of useState + useCallback ([6575b14](6575b14))
* **useLocalStorage:** add remove feature. ([#229](#229)) ([587de16](587de16))

### BREAKING CHANGES

* implementation of useMeasure and useLocalStorage changed
* resize-observer-polyfill package is not used with useMeasure() hook
anymore.
* useMeasure() now defaults all values to -1, if they were not set and
internal implementation heavily refactored.
* useAsyncFn now keeps hold of old result/error when called multiple times
* resize-observer-polyfill package is not used with useMeasure() hook
anymore.
* useMeasure() now defaults all values to -1, if they were not set and
internal implementation heavily refactored.
@franky47
Copy link
Author

Shipped in v15.0.0, thanks @suyingtao 🎉

react-use automation moved this from To do to Done May 16, 2020
@Nigui
Copy link

Nigui commented Mar 31, 2022

I did the trick for session storage too. See #2314

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
react-use
  
Done
Development

No branches or pull requests

5 participants