---
url: /docs/guide/usage/linter/rules/react/function-component-definition.md
---

### 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:

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

Examples of **correct** code for this rule:

```jsx
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

## Version

This rule was added in v1.75.0.

## References