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

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)