react/function-component-definition

Enforce one way to write function components: declaration, expression, or arrow function

A function component can be a function declaration, a function expression, or an arrow function. A codebase that mixes all three is harder to scan and search.

By default a named component must be a function declaration, and an unnamed one must be a function expression.

--fix rewrites the component in the expected style where it can.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/function-component-definition" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/function-component-definition" = ["error", {
  namedComponents = "function-declaration",
  unnamedComponents = "function-expression",
}]

Examples#

Reported:

const Greeting = props => {
  return <h1>Hello, {props.name}</h1>;
};

const Footer = function (props) {
  return <footer>{props.text}</footer>;
};

Not reported:

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

function Footer(props) {
  return <footer>{props.text}</footer>;
}

Options#

OptionDefaultWhat it does
namedComponents"function-declaration"The style for a component that's a function declaration or a function assigned to a variable: "function-declaration", "function-expression", or "arrow-function".
unnamedComponents"function-expression"The style for any other component, such as one returned from a function: "function-expression" or "arrow-function".

Each option also takes a list of styles. Every style in the list is allowed, and --fix rewrites to the first one.

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
const Greeting = props => {
  return <h1>Hello, {props.name}</h1>;
};
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

const Footer = props => {
  return <footer>{props.text}</footer>;
};

An unnamed component:

function withTheme(theme) {
  return function (props) {
    return <div className={theme}>{props.children}</div>;
  };
}
function withTheme(theme) {
  return props => {
    return <div className={theme}>{props.children}</div>;
  };
}