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

• первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
• ререндеринг — второй и последующие рендеринги компонента.

Ререндер состояния (re-render) происходит, когда происходит изменение состояния компонента или когда компонент получает новые свойства (props). Изменения состояния влекут за собой безусловный (непредотвращаемый) ререндеринг.

_Существует 5 причин, по которым компонент подвергается ререндерингу:

1. изменение состояния,
2. ререндеринг родительского компонента,
3. изменение контекста,
4. изменение хука,
5. принудительный вызов forceUpdate()**.

Существует распространенный миф о том, что ререндеринг происходит также при изменении пропсов - это не так.

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

const [, forceUpdate] = useReducer((x) => x + 1, 0)
 
const handleClick = () => {
  setValue((v) => Object.assign(v, { "new-field": "new-field-value" }))
  forceUpdate
}

Можно написать кастомный хук на forceUpdate = useForceUpdate()

Назад