no-unnecessary-use-callback

This rule is experimental and may change in the future or be removed. It is not recommended to use it in production code at this time.

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

🧪

Description

Disallow unnecessary usage of useCallback.

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 MyComponent() {
  const onClick = useCallback(() => {
    console.log("clicked");
  }, []);

  return <button type="button" onClick={onClick} />;
}

Passing

import React from "react";

function onClick() {
  console.log("clicked");
}

function MyComponent() {
  return <button type="button" onClick={onClick} />;
}

no-unnecessary-use-callback

Description

Examples

Failing

Passing

Implementation

See Also

On this page