no-unnecessary-use-callback

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

Full Name in @eslint-react/eslint-plugin

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

Full Name in eslint-plugin-react-x

react-x/no-unnecessary-use-callback

Features

🧪

Presets

strict strict-typescript strict-type-checked

Description

Disallows unnecessary usage of useCallback.

React Hook useCallback with an empty dependency array, as in the examples, is unnecessary. The hook can be removed, and its value can be created in the component body or hoisted to the outer scope of the component. If the calculated function is only used inside one useEffect, the calculation can be moved inside the useEffect function.

Examples

Failing

import React, { useCallback } from "react";

function MyComponent() {
  const onClick = useCallback(() => {
    console.log("clicked");
  }, []);

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

import { Button, MantineTheme } from "@mantine/core";
import React, { useCallback, useEffect } from "react";

function MyComponent({items}: {items: string[]}) {
  const updateTest = useCallback(() => {console.log(items.length)}, [items]);

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

  return <div>Hello World</div>;
}

Passing

import React from "react";

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

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

import { Button, MantineTheme } from "@mantine/core";
import React, { useEffect } from "react";

function MyComponent({items}: {items: string[]}) {
  useEffect(() => {
    console.log(items.length);
  }, [items]);

  return <div>Hello World</div>;
}

no-unnecessary-use-callback

Description

Examples

Failing

Passing

Implementation

See Also

On this page