Rules
no-unnecessary-use-callback
Disallows unnecessary usage of 'useCallback'.
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-callbackFull Name in eslint-plugin-react-x
react-x/no-unnecessary-use-callbackFeatures
🧪
Presets
strict
strict-typescript
strict-type-checked
Rule Details
The 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.
Common Violations
Invalid
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>;
}Valid
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>;
}Resources
Further Reading
See Also
no-unnecessary-use-memo
Disallows unnecessary usage ofuseMemo