Rovo config example for enforcing an event naming convention in React components

[Krisztián Balla]

I thought this was interesting and sharing it might help others. We sometimes run into the problem of inexperienced developers naming React callback properties (which are really always events triggered by the component) according to what is happening in the parent component. This is wrong as these event callbacks should be named from the point of view of the component itself. Moreover it is common practice to start the name with "on" following how event callbacks are named on standard HTML elements (i.e. onClick for the click event of a button).

This is the config I came up with which addresses this issue:

## React code specific rules

### Enforce consistent naming for the events of React components

What: Check that every property of a React component which is a callback function is named according to the event which triggers the function. In addition the name of these properties should always start with the word "on".

Why: This rule makes sure that all properties on our React components that are event callbacks follow the standard HTML naming convention.

Example 1 - Correct code - The onOkClick property is named according to the click event of the OK button:

```tsx
/** Type for the properties of the MessageBox React component. */
type MessageBoxProps = {
    /** The text displayed in the message box. */
    text: string;
    /** The event executed when the user clicks the OK button in the message box. */
    onOkClick: () => void;
};

/** The React component for the message box. */
class MessageBox extends React.Component<MessageBoxProps> {
    public override render(): React.ReactNode {
        return (
            <div>
                <span>{this.props.text}</span>
                <button type="button" onClick={this.props.onOkClick}>
                    OK
                </button>
            </div>
        );
    }
}
```

Example 2 - Wrong code - The performSomeTask property is not named according to the event it is triggered on:

```tsx
/** Type for the properties of the MessageBox React component. */
type MessageBoxProps = {
    /** The text displayed in the message box. */
    text: string;
    /** The event executed when the user clicks the OK button in the message box. */
    performSomeTask: () => void;
};

/** The React component for the message box. */
class MessageBox extends React.Component<MessageBoxProps> {
    public override render(): React.ReactNode {
        return (
            <div>
                <span>{this.props.text}</span>
                <button type="button" onClick={this.props.performSomeTask}>
                    OK
                </button>
            </div>
        );
    }
}
```

[Jovana Dunisijevic]

Hey @Krisztián Balla 

Thank you for sharing this insight and your configuration! You’ve highlighted a best practice that’s often overlooked, especially by developers new to React or component-based UI design.

Your configuration and examples are spot-on.

• Always name event callback props from the component’s perspective.
• Prefix them with on to match HTML/React conventions.
• Avoid naming them after parent-side actions or business logic.

If you want to automate this rule in your codebase, consider using https://eslint.org/ with plugins like GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint or https://www.npmjs.com/package/eslint-plugin-react-hooks. While there isn’t a built-in rule for this exact pattern, you can write a https://eslint.org/docs/latest/developer-guide/working-with-rules or use code reviews to enforce it.

Keep sharing tips if you have more! Thank you for participating in the community!

Kindest regards,

Jov