why-did-you-render

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

Основные возможности why-did-you-render

• Обнаружение ненужных рендеров компонентов.
• Поддержка функциональных и классовых компонентов.
• Легкость интеграции с существующими проектами.
• Поддержка кастомных настроек и фильтров.
• Совместимость с React DevTools для более глубокого анализа.

Установка

Для установки why-did-you-render выполните следующую команду:

npm install @welldone-software/why-did-you-render

Или с использованием Yarn:

yarn add @welldone-software/why-did-you-render

Основное использование

Для начала работы с why-did-you-render необходимо инициализировать его в вашем проекте. Вот пример инициализации в основном файле вашего приложения:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Пример использования в компоненте

Вы можете указать конкретные компоненты, для которых необходимо отслеживать повторные рендеры, установив свойство whyDidYouRender на true:

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

MyComponent.whyDidYouRender = true;

export default MyComponent;

Настройка why-did-you-render

Вы можете настроить why-did-you-render для более точного контроля над его поведением. Например, можно установить глобальные настройки или указать конкретные компоненты для анализа:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Использование фильтров

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    include: [/^MyComponent$/],
    exclude: [/^AnotherComponent$/],
  });
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Работа с функциональными и классовыми компонентами

why-did-you-render поддерживает как функциональные, так и классовые компоненты. Вы можете использовать его для любого типа компонента в вашем приложении:

Функциональные компоненты:

const FunctionalComponent = React.memo(() => {
  return <div>Functional Component</div>;
});

FunctionalComponent.whyDidYouRender = true;

export default FunctionalComponent;

Классовые компоненты:

class ClassComponent extends React.Component {
  render() {
    return <div>Class Component</div>;
  }
}

ClassComponent.whyDidYouRender = true;

export default ClassComponent;

Заключение

why-did-you-render — это мощный инструмент для оптимизации производительности приложений React. Он помогает выявлять ненужные повторные рендеры компонентов, что позволяет разработчикам улучшать производительность и эффективность своих приложений. Благодаря простоте использования и гибкости настроек, why-did-you-render является отличным выбором для любого проекта на React.