https://github.com/iamthesiz/urs

useRefState, for getting correct values even when in callback functions, and blocking state updates on unmounted components
https://github.com/iamthesiz/urs

Last synced: 1 day ago
JSON representation

useRefState, for getting correct values even when in callback functions, and blocking state updates on unmounted components

• Host: GitHub
• URL: https://github.com/iamthesiz/urs
• Owner: iamthesiz
• License: mit
• Created: 2020-04-16T23:06:44.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T14:57:36.000Z (about 2 years ago)
• Last Synced: 2025-01-27T20:02:06.216Z (3 days ago)
• Language: TypeScript
• Homepage:
• Size: 2.88 MB
• Stars: 16
• Watchers: 3
• Forks: 3
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        
useRefState

🔥 React hook for maintaining correct values, in a clean way, without updates on unmounted components



    

      

    

    

      

    

    

      

    

    

    

      

    

    

      

    



Features

--------

- TypeScript support

- Zero dependencies

- React Native support

- Keep your state consistant within your callback functions

Installation

------------

```shell

yarn add urs      or     npm i -S urs

```

Usage

-----

```jsx

import useRefState from 'urs'

import { useState } from 'react'

const App = () => {

  const [loadingRef, setLoadingRef] = useRefState(false)

  const [loadingState, setLoadingState] = useState(false)

  

  // DO NOT destructure like this

  const [{ current }] = useRefState()

  

  const onClick = () => {

    setLoadingRef(true)

    console.log('loadingRef.current', loadingRef.current) // gives us `true`

    setLoadingState(true)

    console.log('loadingState', loadingState) // gives us `false`

  }

  return (

    Click Me!

  )

}

```

Options

-------

The 2nd argument of `useRefState` determines if you want to be able to update state when a component

is unmounted. If `true` it will block setState on unmounted components. Useful for the common error `cannot update state on unmounted component`.

```js

const [state, setState] = useRefState('same as useState default state', true)

```