Отладка 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('');
          }}
        >
          Добавить