no-unnecessary-use-callback
Full Name in eslint-plugin-react-hooks-extra
react-hooks-extra/no-unnecessary-use-callbackFull Name in @eslint-react/eslint-plugin
@eslint-react/hooks-extra/no-unnecessary-use-callbackFeatures
🔍
What it does
Disallows 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} />;
}