useDelayedRender

useDelayedRender is a react hook for delaying the render and unmount of a component. This is commonly used to animate UI on unmount.

Installation

$ yarn add use-delayed-render

Usage

Function signature:

1const { mounted: boolean, rendered: boolean } = useDelayedRender(
2  active: boolean,
3  options?: {
4    enterDelay: number,
5    exitDelay: number,
6    onUnmount: () => void
7  }
8)

Options:

• active: Whether your component is in an active state
• enterDelay: After mounting, the delay before rendered becomes true
• exitDelay: After rendered becomes false, the delay before unmounting
• onUnmount: A callback triggered after unmounting

Return values:

• mounted: Whether your component should be mounted in the DOM
• rendered: Whether your component should be visible

Example

Render a modal, but delay the unmount so that our 2 second CSS transition completes before the modal is removed from the DOM.

1const Modal = ({ active }) => {
2  const { mounted, rendered } = useDelayedRender(active, {
3    exitDelay: 2000,
4  })
5
6  if (!mounted) return null
7
8  return (
9    <Portal>
10      <div className={rendered ? 'modal visible' : 'modal'}>{/* ... */}</div>
11    </Portal>
12  )
13}

This allows you to use simple CSS transitions to animate the mounting/unmounting of your component.

1.modal {
2  opacity: 0;
3  transition: opacity 2s ease;
4}
5
6.modal.visible {
7  opacity: 1;
8}

Why?

• Usually you would use react-transition-group to solve this, but the 2.37MB install size is a bit overkill, compared to this package at 491B gzipped.

1<Transition in={active} unmountOnExit timeout={200} onExited={handleExit}>
2  <Modal />
3</Transition>

• Hooks solve the problem without needing a render function or HOC.