Well, we all know that ref helps us to get access to the DOM. But let's consider the next situation, we have some React component and we want to know how many times this component was rendered. How can we achieve that? Well, maybe we can use React and hooks to determine that the component was re-rendered. Something like this: useEffect useState As you can see it doesn't work as we want. After the component was rendered we set a new state which follows component re-rendering and setting state again. Infinity loop. Maybe we could just create an object and update the value each time the component re-rendered? No, doesn't work. Every render create its own scope and each scope has its own . So, maybe we can just take this state away from the component, right? renderedCounter It works, but it is not good practice to keep anything outside the component. And here is a time when hook will help us. As written in the , useRef documentation useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue)." Every render shares the same mutable object created by the useRef hook. It is a perfect way to share the state between each render without causing a new render.
