A rule to disallow inline functions in React?

[VPKSoft]

Is there a rule to disallow inline function for callbacks in React?
E.g, I want this code to be an error:

<Button
    onClick={() => {
        console.log("foo");
    }}
/>

and this would be the valid way:

const onButtonClick = useCallback(() => {
    console.log("foo");
}, []);

<Button
    onClick={onButtonClick}
/>

[arendjr]

I'm not aware of us having one, no.

I'm also not sure it would be a good idea. There are many situations where useCallback() doesn't add any value, such as when passing to a plain HTML element or a non-memoized component. Plus it would be difficult to avoid false negatives, for instance when we cannot trace the origin of a variable that is passed instead of a plain function.

[VPKSoft]

Thanks,
My example was a bit bad, what I was hoping for was just to not allow inline === arrow functions passed as props. This way the JSX would look less messy if the implementation of whatever was elsewhere. In my current ESLint I have a rule to complain about inline functions:

Anyhow I just spent hours of trying to convert the config from ESLint 8 to ESLint 9, which was such a frustrating process, so I decided to look for an alternative and will probably go with this Biome as the installation and usage was such a simple task 🙂

[dyc3]

Seems like a reasonable rule to have. Feel free to open a task issue to port the react/jsx-no-bind rule. It would probably make a good first issue.

[lelelethu]

I don't undertand. With react 19, we should use rule react/jsx-no-bind?

[dyc3]

We haven't implemented the rule yet, see #4637.