useReactFunctionComponentDefinition

JSX and TSX

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.0
• Diagnostic Category: lint/nursery/useReactFunctionComponentDefinition
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • react
• Sources:
  • Inspired from react/function-component-definition

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useReactFunctionComponentDefinition": "error"
      }
    }
  }
}

Description

Enforce a specific function type for React function components.

This rule keeps function component definitions consistent. By default, named components must be written as function declarations.

Examples

Invalid

const MyComponent = (props) => {
  return <div>{props.name}</div>;
};

code-block.jsx:1:7 lint/nursery/useReactFunctionComponentDefinition  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The React component MyComponent is defined as an arrow function.
  
  > 1 │ const MyComponent = (props) => {
      │       ^^^^^^^^^^^
    2 │   return <div>{props.name}</div>;
    3 │ };
  
  ℹ Mixing component definition styles makes component declarations harder to scan.
  
  ℹ Rewrite this component as a function declaration or configure `namedComponents` to allow an arrow function.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use a function declaration for this component.
  
    1   │ - const·MyComponent·=·(props)·=>·{
      1 │ + function·MyComponent·(props)·{
    2 2 │     return <div>{props.name}</div>;
    3   │ - };
      3 │ + }
    4 4 │   
  

Valid

function MyComponent(props) {
  return <div>{props.name}</div>;
}

Options

namedComponents

The function style to enforce for named React components. Accepted values are:

• "functionDeclaration" (default): Enforce function declarations.
• "functionExpression": Enforce function expressions assigned to component bindings.
• "arrowFunction": Enforce arrow functions assigned to component bindings.

"functionDeclaration"

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useReactFunctionComponentDefinition": {
          "options": {
            "namedComponents": "functionDeclaration"
          }
        }
      }
    }
  }
}

Invalid

const MyComponent = (props) => {
  return <div>{props.name}</div>;
};

code-block.jsx:1:7 lint/nursery/useReactFunctionComponentDefinition  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The React component MyComponent is defined as an arrow function.
  
  > 1 │ const MyComponent = (props) => {
      │       ^^^^^^^^^^^
    2 │   return <div>{props.name}</div>;
    3 │ };
  
  ℹ Mixing component definition styles makes component declarations harder to scan.
  
  ℹ Rewrite this component as a function declaration or configure `namedComponents` to allow an arrow function.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use a function declaration for this component.
  
    1   │ - const·MyComponent·=·(props)·=>·{
      1 │ + function·MyComponent·(props)·{
    2 2 │     return <div>{props.name}</div>;
    3   │ - };
      3 │ + }
    4 4 │   
  

Valid

function MyComponent(props) {
  return <div>{props.name}</div>;
}

"functionExpression"

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useReactFunctionComponentDefinition": {
          "options": {
            "namedComponents": "functionExpression"
          }
        }
      }
    }
  }
}

Invalid

function MyComponent(props) {
  return <div>{props.name}</div>;
}

code-block.jsx:1:10 lint/nursery/useReactFunctionComponentDefinition  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  ℹ The React component MyComponent is defined as a function declaration.
  
  > 1 │ function MyComponent(props) {
      │          ^^^^^^^^^^^
    2 │   return <div>{props.name}</div>;
    3 │ }
  
  ℹ Mixing component definition styles makes component declarations harder to scan.
  
  ℹ Rewrite this component as a function expression or configure `namedComponents` to allow a function declaration.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use a function expression for this component.
  
    1   │ - function·MyComponent(props)·{
      1 │ + const·MyComponent·=·function·(props)·{
    2 2 │     return <div>{props.name}</div>;
    3   │ - }
      3 │ + };
    4 4 │   
  

const MyComponent = (props) => {
  return <div>{props.name}</div>;
};

code-block.jsx:1:7 lint/nursery/useReactFunctionComponentDefinition  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The React component MyComponent is defined as an arrow function.
  
  > 1 │ const MyComponent = (props) => {
      │       ^^^^^^^^^^^
    2 │   return <div>{props.name}</div>;
    3 │ };
  
  ℹ Mixing component definition styles makes component declarations harder to scan.
  
  ℹ Rewrite this component as a function expression or configure `namedComponents` to allow an arrow function.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use a function expression for this component.
  
    1   │ - const·MyComponent·=·(props)·=>·{
      1 │ + const·MyComponent·=·function·(props)·{
    2 2 │     return <div>{props.name}</div>;
    3 3 │   };
  

Valid

const MyComponent = function (props) {
  return <div>{props.name}</div>;
};

"arrowFunction"

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useReactFunctionComponentDefinition": {
          "options": {
            "namedComponents": "arrowFunction"
          }
        }
      }
    }
  }
}

Invalid

function MyComponent(props) {
  return <div>{props.name}</div>;
}

code-block.jsx:1:10 lint/nursery/useReactFunctionComponentDefinition  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━

  ℹ The React component MyComponent is defined as a function declaration.
  
  > 1 │ function MyComponent(props) {
      │          ^^^^^^^^^^^
    2 │   return <div>{props.name}</div>;
    3 │ }
  
  ℹ Mixing component definition styles makes component declarations harder to scan.
  
  ℹ Rewrite this component as an arrow function or configure `namedComponents` to allow a function declaration.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use an arrow function for this component.
  
    1   │ - function·MyComponent(props)·{
      1 │ + const·MyComponent·=·(props)·=>·{
    2 2 │     return <div>{props.name}</div>;
    3   │ - }
      3 │ + };
    4 4 │   
  

const MyComponent = function (props) {
  return <div>{props.name}</div>;
};

code-block.jsx:1:7 lint/nursery/useReactFunctionComponentDefinition  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━

  ℹ The React component MyComponent is defined as a function expression.
  
  > 1 │ const MyComponent = function (props) {
      │       ^^^^^^^^^^^
    2 │   return <div>{props.name}</div>;
    3 │ };
  
  ℹ Mixing component definition styles makes component declarations harder to scan.
  
  ℹ Rewrite this component as an arrow function or configure `namedComponents` to allow a function expression.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use an arrow function for this component.
  
    1   │ - const·MyComponent·=·function·(props)·{
      1 │ + const·MyComponent·=·(props)·=>·{
    2 2 │     return <div>{props.name}</div>;
    3 3 │   };
  

Valid

const MyComponent = (props) => {
  return <div>{props.name}</div>;
};

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases