ensure-custom-hooks-using-other-hooks

Rule category

Correctness.

What it does

Warns when custom Hooks that don’t use other Hooks.

Why is this good?

Custom Hooks may call other Hooks (that’s their whole purpose). If a custom Hook is not calling other Hooks, it might be a sign that it’s unnecessary or incorrectly implemented. This rule helps you catch those cases.

Examples

Failing

import React from 'react';
 
function function useClassnames(obj: Record<string, boolean>): stringuseClassnames(obj: Record<string, boolean>obj: type Record<K extends string | number | symbol, T> = { [P in K]: T; }Construct a type with a set of properties K of type TRecord<string, boolean>) {Custom Hooks should use other Hooks.
  var function (local var) k: anyk, function (local var) cls: stringcls = "";
  for (function (local var) k: anyk in obj: Record<string, boolean>obj) {
    if (obj: Record<string, boolean>obj[function (local var) k: stringk]) {
      function (local var) cls: stringcls && (function (local var) cls: stringcls += " ");
      function (local var) cls: stringcls += function (local var) k: stringk;
    }
  }
  return function (local var) cls: stringcls;
};

Passing

import React from 'react';
 
function function useCounter(): {
    count: number;
    increment: () => void;
}useCounter() {
  const [const count: numbercount, const setCount: React.Dispatch<React.SetStateAction<number>>setCount] = React.function React.useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>] (+1 overload)Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}useState(0);
  const const increment: () => voidincrement = () => const setCount: (value: React.SetStateAction<number>) => voidsetCount(c: numberc => c: numberc + 1);
  return { count: numbercount, increment: () => voidincrement };
}