require-named-effect-functions

Requires named functions for effect-like hooks.

Rule details Problem

By default, the rule checks useEffect, useLayoutEffect, and useInsertionEffect.

It reports inline arrow functions, anonymous function expressions, identifiers that point to arrow functions, and identifiers that come from useCallback or useMemo. It also reports async effect callbacks unless the matched hook is configured with allowAsync: true.

In roblox-ts mode, named function expressions are also rejected. In standard mode, named function expressions are allowed.

What passes cleanly

A named function declaration passed by identifier is the safest shape here, for example useEffect(syncUser, [userId]).

Examples

Incorrect

useEffect(() => {
  fetchData();
}, [id]);

const runEffect = () => {
  fetchData();
};
useLayoutEffect(runEffect, [id]);

Correct

function syncUser() {
  fetchData();
}

useEffect(syncUser, [id]);

Options

Option	Type	Default
environment	"roblox-ts" | "standard"	"roblox-ts"
hooks	Array<{ name: string; allowAsync: boolean }>	[{ name: "useEffect", allowAsync: false }, { name: "useLayoutEffect", allowAsync: false }, { name: "useInsertionEffect", allowAsync: false }]

Example config:

import ceaseNonsense from "@pobammer-ts/eslint-cease-nonsense-rules";

export default [
  {
    plugins: {
      "cease-nonsense": ceaseNonsense,
    },
    rules: {
      "cease-nonsense/require-named-effect-functions": [
        "error",
        {
          environment: "standard",
          hooks: [
            { name: "useEffect", allowAsync: false },
            { name: "useLayoutEffect", allowAsync: false },
            { name: "useInsertionEffect", allowAsync: false },
            { name: "useMyEffect", allowAsync: true },
          ],
        },
      ],
    },
  },
];

Related rules

use-exhaustive-dependenciesChecks dependency arrays against the closure body

use-hook-at-top-levelKeeps hook calls out of nested control flow