component-hook-factories

Проверяет функции высшего порядка, которые объявляют вложенные компоненты или хуки. Компоненты и хуки нужно объявлять на уровне модуля.

Подробности правила

Если объявлять компоненты или хуки внутри других функций, при каждом вызове создаётся новый экземпляр. React считает каждый из них совершенно другим компонентом, уничтожает и заново создаёт всё дерево компонентов, теряет всё состояние и получает проблемы с производительностью.

Неверно

Примеры неверного кода для этого правила:

// ❌ Factory function creating components
function createComponent(defaultValue) {
  return function Component() {
    // ...
  };
}

// ❌ Component defined inside component
function Parent() {
  function Child() {
    // ...
  }

  return <Child />;
}

// ❌ Hook factory function
function createCustomHook(endpoint) {
  return function useData() {
    // ...
  };
}

Верно

Примеры верного кода для этого правила:

// ✅ Component defined at module level
function Component({ defaultValue }) {
  // ...
}

// ✅ Custom hook at module level
function useData(endpoint) {
  // ...
}

Устранение неполадок

Нужно динамическое поведение компонента

Может показаться, что фабрика нужна, чтобы создавать настроенные компоненты:

// ❌ Wrong: Factory pattern
function makeButton(color) {
  return function Button({children}) {
    return (
      <button style={{backgroundColor: color}}>
        {children}
      </button>
    );
  };
}

const RedButton = makeButton('red');
const BlueButton = makeButton('blue');

Вместо этого передавайте JSX как дочерние элементы:

// ✅ Better: Pass JSX as children
function Button({color, children}) {
  return (
    <button style={{backgroundColor: color}}>
      {children}
    </button>
  );
}

function App() {
  return (
    <>
      <Button color="red">Red</Button>
      <Button color="blue">Blue</Button>
    </>
  );
}

Источник — https://react.dev/reference/eslint-plugin-react-hooks/lints/component-hook-factories

Комментарии