urs
TypeScript icon, indicating that this package has built-in type declarations

0.0.8 • Public • Published

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)

Package Sidebar

Install

npm i urs

Weekly Downloads

20,813

Version

0.0.8

License

MIT

Unpacked Size

8.25 kB

Total Files

5

Last publish

Collaborators

  • alex-cory