Eslint Enforce Named Function In Useeffect

2 min read.

Anonymous functions in useEffect make debugging painful. When something breaks, your console shows:

at Anonymous function (index.js:12345)

Not helpful. Here's how to enforce named functions.

The ESLint rule

Use react-hooks/rules-of-use — it already catches many issues, but you can add a custom rule for named functions.

Option 1: Use a plugin rule

Install eslint-plugin-react-hooks:

npm install -D eslint-plugin-react-hooks

Add to your .eslintrc:

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-use": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

Option 2: Write a custom rule

If you want strict named function enforcement, add this to your ESLint config:

rules: {
  'no-new-func': 'error',
  'prefer-arrow-callback': 'error'
}

But this is too broad — it forces arrow functions everywhere.

Option 3: Just use the right pattern

The best approach isn't a rule — it's code review discipline. Write your effects like this:

// Bad — anonymous function
useEffect(() => {
  fetchData();
}, []);

// Good — named function
useEffect(function fetchDataOnMount() {
  fetchData();
}, []);

Or extract to a function outside:

function fetchData() {
  // ...
}

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

Why it matters

  • Named functions show up in stack traces
  • Easier to identify which effect caused the issue
  • Self-documenting code

That's it. No complex ESLint config needed — just write (or review) with intent.

Latest Posts