use-subsequent-effect

⏭ A use(Layout)Effect variant hook that skips the initial render.

Installation

Skypack

import { useSubsequentEffect } from "https://cdn.skypack.dev/use-subsequent-effect"

Yarn

yarn add use-subsequent-effect

npm

npm install use-subsequent-effect

Usage

Import useSubsequentEffect, useSubsequentLayoutEffect or useSubsequentIsomorphicLayoutEffect.

import { useSubsequentEffect } from "use-subsequent-effect"

Use it as a drop-in use(Layout)Effect replacement.

useSubsequentEffect(() => {
  dependency.update()

  return () => {
    dependency.clean()
  }
}, [dependency])

ESLint

If you are using eslint-plugin-react-hooks, there's no need to specify a custom additionalHooks list. The react-hooks/exhaustive-deps rule already works out-of-the-box on all effect hooks (/Effect($|[^a-z])/g).