usefx

A clearer, safer, footgun-free approach to React's useEffect.

🚧 Full documentation coming soon 🚧

Adds these new variations of React's useEffect that will be used in place of it:

• usePostChangeEffect
• usePostRenderEffect
• usePostInitialRenderEffect

To configure eslint to correctly lint these variants the same way it will lint useEffect (if you have eslint-plugin-react-hooks installed, which is highly recommended), add these lines to the rules section of your .eslintrc.js:

'react-hooks/exhaustive-deps': [
  'error',
  {
    additionalHooks: 'usePostChangeEffect',
  },
],
'no-restricted-syntax': [
  'error',
  {
    selector: "CallExpression[callee.name='useEffect']",
    message:
      [
        "Calling useEffect is forbidden due to lack of clarity and" +
          " performance issues that stem from incorrect usage of it." +
          " Please use one of these alternate hooks instead:",
        "usePostChangeEffect ( import { usePostChangeEffect } from 'usefx' )",
        "usePostRenderEffect ( import { usePostRenderEffect } from 'usefx' )",
        "usePostInitialRenderEffect ( import { usePostInitialRenderEffect } from 'usefx' )",
      ].join("\n")
  },
],