← Back to rules

react/function-component-definition Style

💡 A suggestion is available for this rule for some violations.

What it does

Enforces a consistent function form for React function components.

Why is this bad?

Mixing declarations, function expressions, and arrow functions makes component definitions less predictable and harder to scan.

Examples

Examples of incorrect code for this rule:

const Component = () => <div />;

Examples of correct code for this rule:

function Component() {
  return <div />;
}

Configuration

namedComponents

type: array | "function-declaration" | "arrow-function" | "function-expression"

namedComponents[n]

type: "function-declaration" | "arrow-function" | "function-expression"

unnamedComponents

type: array | "arrow-function" | "function-expression"

unnamedComponents[n]

type: "arrow-function" | "function-expression"

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/function-component-definition": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/function-component-definition": "error",
  },
});

CLI

oxlint --deny react/function-component-definition --react-plugin

Version

This rule was added in v1.75.0.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground