Skip to content
/ urs Public

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

License

Notifications You must be signed in to change notification settings

alex-cory/urs

Repository files navigation

useRefState

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

undefined

Features

  • TypeScript support
  • Zero dependencies
  • React Native support
  • Keep your state consistant within your callback functions

Installation

yarn add urs      or     npm i -S urs

Usage

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 (
    <button onClick={handleClick}>Click Me!</button>
  )
}

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.

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published