🏎 Вчора побіжно зачепили тему вимірювань, але без подробиць, тому виправляюся 🏎

🧑‍💻Всі оптимізації швидкодії потребують вимірювань - вам потрібно контролювати що ви робите і бачити свої результати.

Як це зробити:

1️⃣ Перший варіант - поставити розширення React Developer Tools і використати вкладу Profile. В результаті ви отримаєте такий графік, як на зображенні, який покаже вам скільки часу займає рендер кожного елементу.

👉 Це зручно для пошуку "дорогих" рендерів і причин перерендеру.

2️⃣ Другий варіант - використати компонент React.Profiler який приймає id та колбек в який будуть передані всі вимірювання:

 <Profiler
      id={pId}
      onRender={(_, phase, actualDuration) =>
        console.log(phase, ' ', actualDuration)
      }
  >

👉 Цей варіант стане в нагоді коли ви почнете оптимізувати конкретний компонент, щоб бачити як ваші зміни впливають на швидкодію.

Також можна використати Performance API, але про нього буде в наступному дописі.

@reactbeginners