React Custom Hook: useRenderCount

In this series of articles, we'll take a journey through the world of React custom hooks, discovering their enormous potential to improve your projects. Today, we'll focus on the useRenderCount hook, one of many carefully crafted hooks available in the React custom hooks collection.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useEffect, useRef } from "react"

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

The useRenderCount function uses React's useEffect and useRef functions to count the number of rerenders. Each time a component is rendered, the number of rerenders is incremented, allowing you to get real-time information about how often a component is rerenders.

One of the main advantages of using useRenderCount is its simplicity. By abstracting the logic into a reusable hook, you can easily integrate it into any component without cluttering your codebase. Additionally, it provides a clear and concise way to track rendering behavior, which can be critical for performance optimization and debugging.

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>
    </>    
  )
}

This versatile tool can be applied in a variety of scenarios. For example, when you are developing a complex component that exhibits unexpected rendering patterns, useRenderCount can help you identify the problem by specifying the exact number of repaints. It is also useful for measuring the impact of certain optimizations or refactorings, allowing you to evaluate their effectiveness.

To get started, simply import the useRenderCount function and call it in your component. You can see its power in action by checking out the RenderCountComponent example above. By combining useRenderCount with other custom hooks like useToggle, you can create interactive components by tracking the number of items being rendered.

Full version | React Custom Hooks: https://habr.com/en/articles/746760/