no-redundant-custom-hook

Full Name in eslint-plugin-react-hooks-extra

react-hooks-extra/no-redundant-custom-hook

Full Name in @eslint-react/eslint-plugin

@eslint-react/hooks-extra/no-redundant-custom-hook

Features

🔍

Presets

recommended
recommended-typescript
recommended-type-checked

What it does

Enforce custom hooks to use at least one other hook inside.

Why is this bad?

If a custom Hook is not calling other Hooks, it might be a sign that it’s unnecessary or incorrectly implemented.

Examples

Failing

import React from 'react';
 
// @warn: Custom Hooks should use other Hooks.
function useClassnames(obj: Record<string, boolean>) {
  var k, cls = "";
  for (k in obj) {
    if (obj[k]) {
      cls && (cls += " ");
      cls += k;
    }
  }
  return cls;
};

Passing

import React from 'react';
 
function useCounter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}