Why do React Hooks make use of refs?

Earlier, refs were only limited to class components but now it can also be accessible in function components through the useRef Hook in React.

The refs are used for: Managing focus, media playback, or text selection.

Integrating with DOM libraries by third-party.

Triggering the imperative animations.

1. Keep Values Between Renders ⏳

   • Sometimes you need to remember a value (like a timer ID or previous prop) but don’t want the component to update its UI when that value changes.
   • useRef gives you a container (.current) that stays the same object on every render.

2. Access DOM Elements Directly 🏗️

   • You can attach a ref to a DOM node (<input> or <div>) to read or modify it (e.g., focus an input) without going through state.

3. Avoid Stale Closures 🔄

   • In callback functions or effects, you might capture old values. Storing the latest value in a ref ensures your callbacks always see up-to-date data without re-running effects unnecessarily.

4. No Extra Renders 🚫🔄

   • Updating .current on a ref does not trigger another render. This is ideal for things like intervals or tracking if a component is still mounted.

• What’s Happening:

  1. prevCountRef starts at 0 and never causes renders when updated.
  2. After each render, the effect sets prevCountRef.current = count.
  3. On the next render, you can read prevCountRef.current to see the old value.