Avoid Unnecessary Re-Renders with Reacts useRef

While React refs are primarily used to interact with DOM elements, useRef can also be used to store values in your function components.

Unlike useState, when this value changes the component will not re-render, which means you can leverage useRef to avoid unnecessary renders and optimize your application's performance.

// Instantiate useRef
const countRef = useRef(0)

// Increment the value while avoiding a re-render
countRef.current = countRef.current + 1