Правила React

• Компоненты и хуки должны быть чистыми
• React вызывает компоненты и хуки
• Правила хуков

Этот раздел описывает правила, которые необходимо соблюдать для написания идиоматичного кода React. Написание идиоматичного кода React может помочь вам создавать хорошо организованные, безопасные и композируемые приложения. Эти свойства делают ваше приложение более устойчивым к изменениям и упрощают работу с другими разработчиками, библиотеками и инструментами.

Эти правила известны как Правила React. Они являются правилами, а не просто рекомендациями, в том смысле, что при их нарушении ваше приложение, вероятно, содержит ошибки. Ваш код также становится неидиоматичным и сложнее понять и проанализировать.

Мы настоятельно рекомендуем использовать Жесткий режим вместе с плагином ESLint для React-хуков ESLint plugin, чтобы помочь вашему коду соответствовать Правилам React. Следуя Правилам React, вы сможете находить и исправлять эти ошибки и поддерживать ваше приложение в рабочем состоянии.

Компоненты и хуки должны быть чистыми

Чистота в компонентах и хуках — ключевое правило React, которое делает ваше приложение предсказуемым, простым в отладке и позволяет React автоматически оптимизировать ваш код.

• Компоненты должны быть идемпотентными — предполагается, что React-компоненты всегда возвращают тот же результат относительно своих входных данных — свойств, состояния и контекста.
• Побочные эффекты должны выполняться вне рендеринга — побочные эффекты не должны выполняться в процессе рендеринга, так как React может многократно рендерить компоненты, чтобы обеспечить наилучший пользовательский опыт.
• Свойства и состояние неизменяемы — свойства и состояние компонента представляют собой неизменяемые снимки, относящиеся к одному рендерингу. Никогда не изменяйте их напрямую.
• Значения возврата и аргументы хуков неизменяемы — после передачи значений в хук их не следует изменять. Как и свойства в JSX, значения становятся неизменяемыми при передаче в хук.
• Значения неизменяемы после передачи в JSX — не изменяйте значения после их использования в JSX. Перенесите изменение перед созданием JSX.

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

React отвечает за рендеринг компонентов и хуков по мере необходимости для оптимизации пользовательского опыта. Он декларативный: вы сообщаете React, что рендерить в логике вашего компонента, а React определит, как лучше всего отобразить это пользователю.

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

Правила хуков

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

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