noComponentHookFactories

JSX and TSX

Summary

Rule available since: v2.4.12
Diagnostic Category: lint/nursery/noComponentHookFactories
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- react
Sources:
- Same as react-hooks/component-hook-factories
- Same as react-x/component-hook-factories
- Same as @eslint-react/component-hook-factories

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noComponentHookFactories": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallows defining React components or custom hooks inside other functions.

Defining components or hooks inside other functions creates new instances on every call. React treats each new instance as a completely different component, which destroys and recreates the entire component subtree on each render and causes all state to be lost.

Examples

Invalid

A component is defined inside a factory function:

1
function makeComponent(label) {
2
  function MyComponent() {
3
    return <div>{label}</div>;
4
  }
5
  return MyComponent;
6
}

code-block.jsx:2:12 lint/nursery/noComponentHookFactories ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Do not define component MyComponent inside a function.
  
    1 │ function makeComponent(label) {
  > 2 │   function MyComponent() {
      │            ^^^^^^^^^^^
    3 │     return <div>{label}</div>;
    4 │   }
  
  ℹ React treats components defined inside functions as completely different on each call, destroying the entire subtree and losing all state. Move it to the module level.
  
  ℹ 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.

A hook is defined inside a factory function:

1
function makeHook(key) {
2
  function useMyHook() {
3
    return useState(key);
4
  }
5
  return useMyHook;
6
}

code-block.jsx:2:12 lint/nursery/noComponentHookFactories ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Do not define hook useMyHook inside a function.
  
    1 │ function makeHook(key) {
  > 2 │   function useMyHook() {
      │            ^^^^^^^^^
    3 │     return useState(key);
    4 │   }
  
  ℹ Each call creates a new hook identity, causing React to lose its state across renders. Move it to the module level.
  
  ℹ 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.

Valid

Components and hooks defined at the module level:

1
function MyComponent() {
2
  return <div>Hello</div>;
3
}
4

5
function useMyHook() {
6
  return useState(0);
7
}

Higher-order components that receive a component as a parameter are allowed:

1
function withAuth(WrappedComponent) {
2
  function AuthenticatedComponent(props) {
3
    return <WrappedComponent {...props} />;
4
  }
5
  return AuthenticatedComponent;
6
}