PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Сравни способы обновления компонента в React и объясни, когда выбирать каждый вариант.

Компоненты

«Обновить компонент» означает вызвать его повторный рендер. Способов несколько, и каждый уместен в своей ситуации.

Изменить собственный state

setCount((c) => c + 1);

Основной и правильный путь: данные компонента изменились — он перерисовался. Выбирать всегда, когда обновление связано с данными этого компонента.

Обновить props (через state родителя)

Родитель меняет своё состояние — дети рендерятся каскадом. Выбирать, когда источник правды выше по дереву (подъём состояния).

Контекст / внешний стор

Изменение value провайдера обновляет всех потребителей; dispatch в сторе — подписанные селекторами компоненты. Выбирать для сквозных и общих данных, соответственно; помнить о ререндере всех потребителей контекста.

Смена key — не обновление, а пересоздание

<UserForm key={userId} user={user} /> // сброс всего состояния формы

Компонент размонтируется и монтируется заново. Выбирать, когда нужен именно сброс внутреннего состояния, а не обновление.

Принудительный рендер (force update)

const [, forceRender] = useReducer((x) => x + 1, 0);

Аналог forceUpdate() из классов. Выбирать почти никогда: это признак, что данные лежат вне state (мутируемый объект, ref). Правильнее — перенести их в state или useSyncExternalStore.

Чего избегать

Мутация state с последующим setState того же объекта (рендера не будет), «обновление» через ref, цепочки эффектов ради перерисовки.

Коротко для собеседования

Штатно: свой state (setState/dispatch), props от родителя, контекст или стор с подписками. Смена key — не обновление, а пересоздание со сбросом состояния. forceUpdate/фиктивный reducer — крайняя мера и признак того, что данные живут вне React-состояния.

Другие вопросы раздела