Nightly Panic Munchies

    @kaliber/use-is-mounted-ref

    1.0.2 • Public • Published

    useIsMountedRef

    Returns a ref with a current value of true when a component is mounted.

    Motivation

    Useful when working with server side rendering. Comparable to componentDidMount in a class-based component. Does not trigger a rerender.

    Another use-case is to check if a component is still mounted after calling an async function.

    Installation

    yarn add @kaliber/use-is-mounted-ref
    

    Usage

    import { useIsMountedRef } from '@kaliber/use-is-mounted-ref'
    
    function Component() {
      const [state, setState] = React.useState('⬇️')
      const isMountedRef = useIsMountedRef()
    
      // Use it to check if a component is still mounted after calling an async function.
      React.useEffect(
        () => {
          async function doSomethingAync() {
            try {
              await someAsyncFunction()
            } catch (err) {
              console.error(err)
              if (isMountedRef.current) setState('⚠️')
            }
            if (isMountedRef.current) setState('⬆️')
          }
          doSomethingAync()
        },
        [isMountedRef]
      )
    
      return (
        <>
          <div style={{ fontSize: '5em' }}>{state}</div>
        </>
      )
    }
    
    function someAsyncFunction() {
      return new Promise(resolve => { window.setTimeout(resolve, 1000) })
    }

    Disclaimer

    This library is intended for internal use, we provide no support, use at your own risk. It does not import React, but expects it to be provided, which @kaliber/build can handle for you.

    This library is not transpiled.

    Install

    npm i @kaliber/use-is-mounted-ref

    DownloadsWeekly Downloads

    10

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    3.46 kB

    Total Files

    6

    Last publish

    Collaborators

    • jerryduijm
    • hjsielcken
    • rmostertkaliber
    • kaliber-owner
    • daveykropf
    • eecolor
    • pkuepers
    • larsvankleef