no-unnecessary-use-callback

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

react-hooks-extra/no-unnecessary-use-callback

Full Name in @eslint-react/eslint-plugin

@eslint-react/hooks-extra/no-unnecessary-use-callback

Features

🔍

What it does

Disallows unnecessary usage of useCallback.

Why is this bad?

React Hooks useCallback has empty dependencies array like what’s in the examples, are unnecessary. The hook can be removed and it’s value can be created in the component body or hoisted to the outer scope of the component.

Examples

Failing

import React, { useCallback } from "react";
 
function Example() {
  // @warn: useCallback has empty dependencies array
 
  const onClick = useCallback(() => {
    console.log("clicked");
  }, []);
 
  return <button type="button" onClick={onClick} />;
}

Passing

import React from "react";
 
function onClick() {
  console.log("clicked");
}
 
function Example() {
  return <button type="button" onClick={onClick} />;
}

no-leaked-timeout no-unnecessary-use-memo