10 рекомендаций по повышению производительности от экспертов JS React

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

1. useMemo

Когда выполняются дорогостоящие вычисления или преобразовываются данные, сохраняйте результат в памяти и предотвращайте ненужные повторные вычисления хуком useMemo:

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  const transformedData = useMemo(() => {
    // Здесь выполняется дорогостоящее преобразование данных
    return data.map(item => item * 2);
  }, [data]);
  return (
    <div>
      {/* Преобразованные данные используются здесь */}
    </div>
  );
};

2. useCallback

Когда функции обратного вызова передаются как свойства, запоминайте функцию и предотвращайте ненужные повторные отображения дочерних компонентов хуком useCallback:

import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleButtonClick = useCallback(() => {
    // Здесь обрабатывается нажатие кнопки
  }, []);
  return (
    <ChildComponent onClick={handleButtonClick} />
  );
};

3. React.memo для оптимизации производительности

Чтобы оптимизировать функциональные компоненты, запоминайте компонент с помощью компонента высшего порядка React.memo и, если свойства не изменились, предотвращайте повторные отображения:

import React from 'react';

const MyComponent = React.memo(({ prop1, prop2 }) => {
  // Здесь компонент отображается
});

4. Виртуализированные списки для эффективного рендеринга

Виртуализированной библиотекой длинных списков вроде react-window или react-virtualized отображайте только видимые элементы, повышая этим производительность рендеринга:

import React from 'react';
import { FixedSizeList } from 'react-window';

const MyListComponent = ({ data }) => {
  const renderRow = ({ index, style }) => {
    const item = data[index];
    return (
      <div style={style}>{item}</div>
    );
  };
  return (
    <FixedSizeList
      height={300}
      width={300}
      itemSize={50}
      itemCount={data.length}
    >
      {renderRow}
    </FixedSizeList>
  );
};

5. Разделение кода для отложенной загрузки

Разбивайте код на мелкие фрагменты для их «ленивой» загрузки, используя динамический импорт и компоненты React lazy и Suspense, так сокращается время начальной загрузки, загружается только нужный код, и по мере необходимости:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

6. Мемоизация для дорогостоящих вычислений

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

const memoizedExpensiveFunction = useMemo(() => {
  // Здесь дорогостоящие вычисления
}, [input]);

7. Оптимизация отображения с React.Fragment

При рендеринге нескольких элементов без элемента-контейнера, чтобы избежать лишних DOM-узлов, применяйте React.Fragment или сокращенный синтаксис <>...</>:

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <div>Element 1</div>
      <div>Element 2</div>
    </>
  );
};

8. Функциональные компоненты с хуками

Используйте их вместо компонентов с классами, код станет проще и эффективнее:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const handleIncrement = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <button onClick={handleIncrement}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

9. Встраиваемые функции

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

import React, { useCallback } from 'react';

const ParentComponent = () => {
  const handleButtonClick = useCallback(() => {
    // Здесь обрабатывается нажатие кнопки
  }, []);
  return (
    <ChildComponent onClick={handleButtonClick} />
  );
};

10. React.PureComponent или React.memo для оптимизации производительности

Чтобы избежать ненужного повторного отображения компонентов при выполнении поверхностных сравнений свойств, применяйте React.PureComponent или React.memo:

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    // Здесь компонент отображается
  }
}
export default MyComponent;

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

Читайте также:

• Обзор курса “Полное введение в React” от Frontend Masters
• Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 2
• 10 полезных методик во фронтенд-разработке React

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Oliver: 10 Expert Performance Tips Every Senior JS React Developer Should Know