Быстрое обновление

Быстрое обновление — это функция Next.js, которая обеспечивает мгновенную обратную связь при внесении изменений в ваши React-компоненты. Быстрое обновление включено по умолчанию во всех приложениях Next.js на 9.4 или более поздних версиях. При включённом быстром обновлении Next.js большинство изменений должны отображаться в течение секунды, без потери состояния компонента.

Как это работает

Если вы редактируете файл, который экспортирует только React-компонент(ы), Быстрое обновление обновит код только для этого файла и перерисует ваш компонент. Вы можете редактировать что угодно в этом файле, включая стили, логику отрисовки, обработчики событий или эффекты.
Если вы редактируете файл с экспортом, который не является React-компонентом, Быстрое обновление перевыполнит как этот файл, так и другие файлы, которые его импортируют. Таким образом, если как Button.js и Modal.js импортируют theme.js, редактирование theme.js обновит оба компонента.
Наконец, если вы редактируете файл, который импортируется файлами за пределами React-дерева, Быстрое обновление будет переходить к полному перезагрузке. У вас может быть файл, который отображает React-компонент, но также экспортирует значение, которое импортируется не-React-компонентом. Например, возможно, ваш компонент также экспортирует константу, а файл-утилита не-React импортирует её. В этом случае рассмотрите возможность переноса константы в отдельный файл и импорта её в оба файла. Это позволит включить Быстрое обновление. Другие случаи обычно можно решить аналогичным образом.

Устойчивость к ошибкам

Синтаксические ошибки

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

Ошибки выполнения

Если вы допустили ошибку, которая приводит к ошибке выполнения внутри вашего компонента, вам будет предложено контекстное наложение. Исправление ошибки автоматически закроет наложение без перезагрузки приложения.

Состояние компонента будет сохранено, если ошибка не произошла во время отрисовки. Если ошибка произошла во время отрисовки, React перемонтирует ваше приложение с использованием обновлённого кода.

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

Ограничения

Быстрое обновление пытается сохранить локальное состояние React в редактируемом компоненте, но только если это безопасно. Вот несколько причин, по которым локальное состояние может сбрасываться при каждом изменении файла:

Локальное состояние не сохраняется для компонентов-классов (только функциональные компоненты и крючки сохраняют состояние).
Редактируемый файл может иметь другие экспорты помимо React-компонента.
Иногда файл экспортирует результат вызова высокоуровневого компонента, например HOC(WrappedComponent). Если возвращаемый компонент является классом, его состояние будет сброшено.
Анонимные стрелочные функции, такие как export default () => <div />; , приводят к тому, что Быстрое обновление не сохраняет локальное состояние компонента. Для больших баз кода вы можете использовать нашу name-default-component кодовую модификацию.

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

Советы

Быстрое обновление по умолчанию сохраняет локальное состояние React в функциональных компонентах (и крючках).
Иногда вам может потребоваться принудительно сбросить состояние и перемонтировать компонент. Например, это может быть полезно при настройке анимации, которая происходит только при монтировании. Для этого вы можете добавить // @refresh reset в любой части редактируемого файла. Эта директива локальна для файла и сообщает быстрому обновлению о перемонтировании компонентов, определённых в этом файле, при каждом изменении.
Вы можете поместить console.log или debugger; в редактируемые компоненты во время разработки.
Помните, что импорт чувствителен к регистру. Как быстрое, так и полное обновление могут завершиться ошибкой, когда ваш импорт не соответствует фактическому имени файла. Например, './header' против './Header'.

Быстрое обновление и крючки

Когда это возможно, Быстрое обновление пытается сохранить состояние вашего компонента между изменениями. В частности, useState и useRef сохраняют свои предыдущие значения, пока вы не измените их аргументы или порядок вызовов крючка.

Крючки с зависимостями — такие как useEffect, useMemo, и useCallback — всегда обновляются во время быстрого обновления. Их список зависимостей игнорируется во время быстрого обновления.

Например, когда вы редактируете useMemo(() => x * 2, [x]) на useMemo(() => x * 10, [x]), оно будет перевыполняться, даже если x (зависимость) не изменилось. Если React этого не делал, ваше изменение не отразилось бы на экране!

Иногда это может привести к неожиданным результатам. Например, даже useEffect с пустым массивом зависимостей всё равно будет перевыполняться один раз во время быстрого обновления.

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