react/function-component-definition

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

fixable

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#

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

const Footer = function (props) {
  return <footer>{props.text}</footer>;
};
example.jsxNo problems
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.

example.jsxwith { "namedComponents": "arrow-function" }1 problem
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}
example.jsxwith { "namedComponents": "arrow-function" }No problems
const Greeting = props => {
  return <h1>Hello, {props.name}</h1>;
};
example.jsxwith { "namedComponents": ["function-declaration", "arrow-function"] }No problems
function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

An unnamed component:

example.jsxwith { "unnamedComponents": "arrow-function" }1 problem
function withTheme(theme) {
  return function (props) {
    return <div className={theme}>{props.children}</div>;
  };
}
example.jsxwith { "unnamedComponents": "arrow-function" }No problems
function withTheme(theme) {
  return props => {
    return <div className={theme}>{props.children}</div>;
  };
}