Отладка React для самых маленьких

Эта статья для тех, кто только начинает свой путь в написании больших React приложений, но все еще использует только console.log для их дебага. Мы с вами рассмотрим работу с расширением для браузера "React Developer Tools" на простом примере, который в дальнейшем вы сможете применить в своих проектах. Это расширение дает возможность просмотра дерева компонентов, их props, состояния и контекста. Также достаточно просто отловить неэффективные компоненты, которые подвергаются повторному рендерингу, посмотреть сколько на это уходит времени и построить графики для визуализации эффективности компонентов. Благодаря этой информации вы не только сможете оптимизировать ваше приложение, но и более глубоко изучить React и понять все тонкости работы с ним.

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

Подготовка

1. Установите расширение "React Developer Tools".

2. Создайте учебный проект с помощью create-react-app
   Если вы будуте создавать проект с нуля, то вам нужно будет настроить генерацию Source Map

3. Запустите проект и откройте консоль разработчика

Первые шаги

Для начала рассмотрим приложение, которое было создано в create-react-app:

Расширение добавляет 2 вкладки в консоли разработчика: Components и Profiler. Сейчас мы видим, что все приложение лежит в компоненте App, которое не имеет никаких props. Для подробного просмотра информации о компоненте в консоли, вы можете нажать на "жучка" в правом верхнем углу.

Усложняем проект

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

Чтобы включить подсветку рендеров, необходимо нажать на шестеренку на вкладке Components и поставить галочку у "Highlight updates when components render"

Вот код "плохого" компонента:

import './App.css';
import { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [debt, setDebt] = useState('');
  const [debtors, setDebtors] = useState([])
  return (
    <div className="app">
      <h1 className="title">Должники</h1>
      <div className="form">
        <input
          type="text"
          placeholder="Имя"
          value={name}
          onChange={(e) => { setName(e.target.value) }}/>
        <input
          type="text"
          placeholder="Долг"
          value={debt}
          onChange={(e) => { setDebt(e.target.value) }}/>
        <button
          className="addDebtor"
          onClick={() => {
            setDebtors((prevDeptors) => [...prevDeptors, { name, debt }])
            setName('');
            setDebt('');
          }}
        >
          Добавить 😈
        </button>
      </div>
      <ul className="debtorList">
        {debtors.map((debtor, i) => (
          <li key={i}>
            {`${debtor.name} - ${debtor.debt}`}
            <button 
              className="delDebtor"
              onClick={() =>
                setDebtors((prevDeptors) => prevDeptors.filter((_, iDebtor) => iDebtor !== i))
              }
            >
              Вернул 💖
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Смотрим в расширении

При каждом ререндере компонент подсвечивается рамкой. И как видно из гифки, все приложение ререндерится при вводе имени, долга, добавлении и удалении:

Давайте вынесем форму ввода, и список должников в отдельные компоненты. Теперь App выглядит следующим образом:

function App() {
  const [debtors, setDebtors] = useState([])
  return (
    <div className="app">
      <h1 className="title">Должники</h1>
      <DebtorsForm setDebtors={ setDebtors } />
      <DebtorsList debtors={ debtors } setDebtors={ setDebtors } />
    </div>
  );
}

После чего поведение нашего приложения становится намного эффективнее, теперь ввод имени и долга не запускает ререндер заголовка и списка должников:

Также обратите внимание на компонент DebtorsForm в расширении. Теперь у него появился props - setDebtors и 2 состояния name и debt, которые реактивно изменяют свои значения.

Чтобы увидеть имена state, вы можете нажать на "волшебную палочку" рядом со списком hooks, либо поставить это по умолчанию в настройках

Profiller

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

Для того, чтобы использовать Profiller, щелкните синий кружок в левой части экрана, чтобы начать запись, и щелкните его еще раз, когда закончите:

По графику мы можем отследить самый долгий рендеринг в нашем кейсе - добавление элемента в список должников.

Заключение

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