Улучшаем производительность — метод componentDidUpdate в React JS

Дорогие читатели, сегодня я хочу рассказать вам о методе componentDidUpdate в React. Если вы хотите быть уверенными в том, что ваш компонент отрисовывается правильно и обновляется только когда это необходимо, то эта тема для вас!

Представьте, что у вас есть компонент, который отображает список товаров. В какой-то момент вы решаете добавить фильтрацию по цене. Как только пользователь изменяет фильтр, вы хотите обновить список товаров на странице. Именно для таких ситуаций и существует метод componentDidUpdate.

Он вызывается после того, как компонент был обновлен и отрисован на странице. Это позволяет вам проверить новые свойства и состояние компонента и выполнить какие-то действия, если это необходимо.

Вот простой пример в классовом стиле:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('Count updated: ', this.state.count);
    }
  }

  incrementCount = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Приведу пример в функциональном стиле, где эта же функциональность реализуется с помощью метода useEffect. Обратите внимание, что в функциональных компонентах в явном виде мы не используем метод componentDidUpdate, а его функциональность реализуется с помощью другого метода useEffect. Предположим, у нас есть компонент, отображающий текущее время на странице. Каждую секунду время обновляется. Мы можем использовать componentDidUpdate, чтобы проверить, изменилось ли время, и, если да, обновить его на странице.

import React, { useState, useEffect } from 'react';

const Clock = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  // componentDidUpdate - здесь это аналог
  // метода componentDidUpdate из примера выше
  useEffect(() => {
    console.log('Clock updated');
  }, [time]);

  return (
    <div>
      <h1>Current time: {time.toLocaleTimeString()}</h1>
    </div>
  );
};

export default Clock;

В данном примере мы используем хук useEffect для обновления времени каждую секунду. А в useEffect с зависимостью от time мы проверяем, изменилось ли время и выводим сообщение в консоль.

Надеюсь, этот пример показал вам, как можно использовать метод componentDidUpdate для обновления компонентов.

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

Den Bezyzvestnykh

Материал подготовил Денис Безызвестных Опытный фулл стек разработчик с более чем 5 годами опыта в создании сайтов, приложений и сервисов. Имеет широкий спектр навыков, включающих в себя разработку на языках программирования JavaScript, TypeScript в том числе на платформе node.js Имеет опыт работы с различными фреймворками, такими как React, Vue, Express, Koa и др. Владеет навыками работы с базами данных MySQL, MongoDB, PostgreSQL, Neo4j и др.

Den Bezyzvestnykh

You may also like