Ref as a Prop

In React, most of our interactions with UI are handled declaratively using state and props. However, there are times when we need to imperatively access a DOM element—like focusing an input, measuring its size, or triggering animations. This is where ref comes into play.

What is ref?

A ref (short for “reference”) gives us a direct line to a DOM node or a component instance. Think of it like asking React:

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

This allows us to interact with the DOM in a more hands-on way, without relying solely on React state.