@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.

Readme

Keywords

Package Sidebar

Install

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

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

3.46 kB

Total Files

6

Last publish

Collaborators

  • melissabos18
  • janbru
  • albertkaliber
  • jerryduijm
  • hjsielcken
  • kaliber-owner
  • daveykropf
  • eecolor
  • larsvankleef