Ref as a Prop

In React, we often update the UI declaratively using state and props. But sometimes we need direct access to a DOM element—like focusing an input, measuring its size, or starting an animation. That’s where ref comes in.

What is ref?

A ref (short for “reference”) gives us a direct line to a DOM node or a component instance. It’s like telling React:

“Hey, can I get the actual DOM element so I can do something with it?”

This makes it possible to interact with the DOM directly, without going through React’s state-driven rendering.