React вызывает компоненты и хуки

• Никогда не вызывать функции компонента напрямую
• Никогда не передавать хуки как обычные значения
  • Не изменяйте хук динамически
  • Не используйте хуки динамически

Никогда не вызывать функции компонента напрямую

Компоненты должны использоваться только в JSX. Не вызывайте их как обычные функции. React должен вызвать их.

React должен определить, когда вызывается ваша функция компонента во время рендеринга. В React вы делаете это с помощью JSX.

function BlogPost() {
  return <Layout><Article /></Layout>; // ✅ Good: Only use components in JSX
}

function BlogPost() {
  return <Layout>{Article()}</Layout>; // 🔴 Bad: Never call them directly
}

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

Позволяя React управлять рендерингом, вы также получаете ряд преимуществ:

• Компоненты становятся чем-то большим, чем функции. React может дополнить их функциями, такими как локальное состояние через хуки, которые привязаны к идентичности компонента в дереве.
• Типы компонентов участвуют в примирении. Позволяя React вызывать ваши компоненты, вы также сообщаете ему больше о концептуальной структуре вашего дерева. Например, когда вы переходите от рендеринга <Feed> к странице <Profile>, React не будет пытаться повторно использовать их.
• React может улучшить ваш пользовательский опыт. Например, он может позволить браузеру выполнить некоторую работу между вызовами компонентов, так что повторный рендеринг большого дерева компонентов не заблокирует основной поток.
• Лучшая история отладки. Если компоненты являются полноценными участниками, о которых библиотека знает, мы можем создать мощные инструменты для разработчиков, чтобы проводить интроспекцию во время разработки.
• Более эффективное примирение. React может точно определить, какие компоненты в дереве требуют повторного рендеринга и пропустить те, которые не требуют. Это делает ваше приложение более быстрым и отзывчивым.

Никогда не передавать хуки как обычные значения

Хуки должны вызываться только внутри компонентов или хуков. Никогда не передавайте их как обычные значения.

Хуки позволяют дополнить компонент функциями React. Они всегда должны вызываться как функция и никогда не передаваться как обычное значение. Это обеспечивает локальное обоснование или возможность для разработчиков понять все, что может сделать компонент, посмотрев на этот компонент изолированно.

Нарушение этого правила приведет к тому, что React не будет автоматически оптимизировать ваш компонент.

Не изменяйте хук динамически

Хуки должны быть максимально «статичными». Это означает, что вы не должны динамически их изменять. Например, это означает, что вы не должны писать хуки высшего порядка:

function ChatInput() {
  const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks
  const data = useDataWithLogging();
}

Хуки должны быть неизменяемыми и не должны изменяться. Вместо динамического изменения хука создайте статическую версию хука с желаемой функциональностью.

function ChatInput() {
  const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook
}

function useDataWithLogging() {
  // ... Create a new version of the Hook and inline the logic here
}

Не используйте хуки динамически

Хуки также не должны использоваться динамически: например, вместо того, чтобы реализовывать инъекцию зависимостей в компонент, передавая хук как значение:

function ChatInput() {
  return <Button useData={useDataWithLogging} /> // 🔴 Bad: don't pass Hooks as props
}

Вы всегда должны встраивать вызов хука в этот компонент и обрабатывать любую логику там.

function ChatInput() {
  return <Button />
}

function Button() {
  const data = useDataWithLogging(); // ✅ Good: Use the Hook directly
}

function useDataWithLogging() {
  // If there's any conditional logic to change the Hook's behavior, it should be inlined into
  // the Hook
}

Таким образом, <Button /> намного легче понять и отладить. Когда хуки используются динамически, это значительно увеличивает сложность вашего приложения и препятствует локальному обоснованию, что делает вашу команду менее продуктивной в долгосрочной перспективе. Это также облегчает случайное нарушение Правил хуков, что хуки не должны вызываться условно. Если вы обнаруживаете необходимость имитировать компоненты для тестов, лучше имитировать сервер, чтобы он отвечал предопределенными данными. Если возможно, также обычно более эффективно тестировать приложение с помощью end-to-end тестов.