Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (urs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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)