Neurotic Pink Mongooses

    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)

    Install

    npm i urs

    DownloadsWeekly Downloads

    21,486

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    8.25 kB

    Total Files

    5

    Last publish

    Collaborators

    • alex-cory