Как узнать количество перерисовок? React Custom Hook: useRenderCount

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

Github

import { useEffect, useRef } from "react"

export default function useRenderCount() {
  const count = useRef(1)
  useEffect(() => {
    count.current++)
  }
  return count.current
}

Функция useRenderCount использует функции useEffect и useRef в React для подсчета количества перерисовок. С каждым рендерингом компонента, количество перерисовок увеличивается, что позволяет получать информацию о частоте перерисовок компонента в режиме реального времени.

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

import useRenderCount from "./useRenderCount"
import useToggle from "../useToggle/useToggle"
export default function RenderCountComponent() {
  const [boolean, toggle] = useToggle(false)
  const renderCount = useRenderCount()
  
  return (
    <>
      <div>{boolean.toString()}</div>
      <div>{renderCount}</div>
      <button onClick={toggle}>Toggle</button>
    </>    
  )
}

Этот универсальный инструмент может быть применен в различных сценариях. Например, когда вы разрабатываете сложный компонент, который демонстрирует неожиданные шаблоны рендеринга, useRenderCount поможет вам определить проблему, указав точное количество перерисовок. Это также удобно для измерения влияния определенных методов оптимизации или рефакторинга, что позволяет оценить их эффективность.

Для начала просто импортируйте функцию useRenderCount и вызовите ее в своем компоненте. Вы можете увидеть его мощь в действии, ознакомившись с примером RenderCountComponent, приведенным выше. Комбинируя useRenderCount с другими пользовательскими хуками, такими как useToggle, вы можете создавать интерактивные компоненты, отслеживая количество отображаемых элементов.

Полная версия | React Custom Hooks