Middle+

Бигзоред ёрдамии компоненти функсионалӣ, ки сабаби такрори дубора кардани он мешавад, диҳед ва чӣ гуна онро ислоҳ карданро шарҳ диҳед.

sobes.tech AI

Ҷавоб аз AI

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

function MyComponent({ onClick }) {
  const handleClick = () => {
    console.log('clicked');
  };

  return <ChildComponent onClick={handleClick} />;
}

Здесь handleClick создаётся заново при каждом рендере, из-за чего ChildComponent получает новый проп onClick и перерендеривается.

Как исправить:

Использовать useCallback для мемоизации функций:

import React, { useCallback } from 'react';

function MyComponent({ onClick }) {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

Аналогично, для объектов использовать useMemo.
Также можно обернуть дочерний компонент в React.memo, чтобы предотвратить лишние рендеры, если пропсы не изменились.

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

Гузашта Оянда