Ах, Реагируйте! Наша любимая библиотека для создания пользовательских интерфейсов. Это волшебное зелье, которое делает наши веб-приложения интерактивными и быстрыми, но однажды это не так. Внезапно вы замечаете, что все замедляется. Нажатие кнопки похоже на отправку письма почтовым голубем. Ваше приложение превращается из молниеносного в медленное, как во время перерыва на кофе, и пользователи начинают обращать на вас внимание.

Но не волнуйтесь! Точно так же, как кофе может решить большинство жизненных проблем (по крайней мере, нам хотелось бы так думать), несколько ключевых методов могут ускорить работу вашего React-приложения и вернуть его на максимальную скорость. Давайте рассмотрим 6 простых способов оптимизировать ваше приложение React, чтобы оно работало быстрее, чем ежедневная порция кофеина.

1. Разделение кода: загружаем только то, что вам нужно

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

Использование React.lazy() и Suspense — идеальный способ реализовать это:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
  );
}

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

2. Ленивая загрузка изображений: не загружайте все закуски сразу

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

Использование библиотеки типа React-lazyload — быстрое решение проблемы:

import LazyLoad from 'react-lazyload';

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

3. useCallback и useMemo: увеличение памяти для React

Подобно тому, как вы постоянно используете одну и ту же кофейную кружку, чтобы сэкономить время на мытье, React может повторно использовать значения и функции, если вы позволите! useCallback и useMemo — это хуки, которые помогают хранить дорогостоящие вычисления или функции, чтобы они не пересчитывались при каждом рендеринге.

Пример использованияMemo:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

Пример использования обратного вызова:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

Почему это помогает: Благодаря useMemo React не придется без необходимости повторять дорогостоящие вычисления. А useCallback не позволяет вам создавать новую функцию при каждом рендеринге. Это обеспечивает бесперебойную работу React — например, обновление оперативной памяти!

4. Мемоизация с помощью React.memo: прекратите ненужные повторные рендеринги

Есть ли у вас друг, который повторяет одну и ту же историю снова и снова? React тоже может быть таким — перерисовывать компоненты даже тогда, когда в этом нет необходимости! Именно здесь на помощь приходит React.memo, не позволяющий React повторно отображать компоненты, если их реквизиты не изменяются.

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

Почему это помогает: React.memo — это как сказать React: «Эй, ты уже слышал это раньше! Не повторяйтесь, если не будет чего-то нового». Это позволяет избежать ненужного повторного рендеринга, экономя время и ресурсы.

5. Эффективное управление состоянием: поднимайте его только при необходимости

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

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

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

6. Устранение дребезжания пользовательского ввода: успокойтесь, реагируйте!

Представьте, что кто-то лихорадочно печатает в строке поиска, а ваше приложение пытается обработать каждое нажатие клавиши. Бедный React, вероятно, вспотел! Введите устранение дребезга — процесс обработки ввода только после паузы пользователя, а не при каждом нажатии клавиши.

Использование lodash.debounce может решить эту проблему:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

Почему это помогает: Вместо панической атаки React при каждом нажатии клавиши, устранение дребезга дает ему передышку. Это обеспечивает более высокую производительность при обработке пользовательского ввода в режиме реального времени, например полей поиска или форм.

Вывод: Оптимизация приложений React — это не ракетостроение — это больше похоже на то, чтобы не выпить шесть чашек кофе за один присест! Эти методы, от разделения кода до отложенной загрузки изображений, помогут вам сделать ваше приложение React быстрым и отзывчивым. Так что в следующий раз, когда ваше приложение начнет работать медленно, помните: это не вина React — ему просто нужно немного оптимизации!

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

Спасибо за прочтение. Если вам понравился пост, поделитесь им и оставьте свои предложения.

Свяжитесь со мной

Веб-сайт: Хардик Гохил

Github: https://github.com/HardikGohilHLR

Linkedin: https://www.linkedin.com/in/hardikgohilhlr

Спасибо ❤️