Props & Ref Prop

In this tutorial we will learn what props are, how they let components communicate, and how the special ref prop works in React. By the end, you will know how to pass information into components and when to use a ref for DOM access.

What Are Props?

Props are inputs to a component.

They work like function parameters. You give a component some information, and it uses that information to decide what UI to show.

Example:

<Greeting name="Amina" />

Here name is a prop.

Props flow from parent to child just like water flows downstream. A parent component gives data to a child component, not the other way around.

Creating a Component That Uses Props

Create a new file:

src/Greeting.jsx

Add the component:

export default function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

Here we are:

Receiving props by destructuring { name }
Returning JSX that uses the prop

Use it inside App.jsx:

import Greeting from "./Greeting.jsx";
 
export default function App() {
  return (
    <>
      <title>Props Tutorial</title>
      <meta name="description" content="Learning props in React 19" />
 
      <Greeting name="Amina" />
      <Greeting name="John" />
    </>
  );
}

Every time you call <Greeting />, you can pass different props.

Props Are Read Only

A child component cannot change the props it receives.

This rule makes components predictable and easy for the React Compiler to optimize. If a component needs to change something, the parent should pass updated props.

Props Can Be Anything

You can pass:

strings
numbers
booleans
arrays
objects
even other components

Example:

export default function UserCard({ user }) {
  return (
    <section>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </section>
  );
}

Use it like this:

<UserCard user={{ name: "Lana", email: "[email protected]" }} />

The Special `ref` Prop

Most props are just data, but the ref prop is different.

ref gives you a direct reference to a DOM element so you can:

focus an input
scroll an element
measure size or position

You do not use refs for regular component communication. Use them only for interacting with the actual DOM.

Creating a Ref in React

Import useRef:

import { useRef } from "react";

Then create a ref inside your component:

const inputRef = useRef();

Attach it using the special ref prop:

<input ref={inputRef} />

Now React will store the DOM element inside inputRef.current.

Example: Focusing an Input

Create:

src/FocusInput.jsx

Add:

import { useRef } from "react";
 
export default function FocusInput() {
  const inputRef = useRef();
 
  function handleClick() {
    inputRef.current.focus();
  }
 
  return (
    <>
      <title>Ref Example</title>
      <meta name="description" content="Understanding the ref prop" />
 
      <input ref={inputRef} placeholder="Click the button to focus me" />
 
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}

Then use it in App.jsx:

import FocusInput from "./FocusInput.jsx";
 
export default function App() {
  return <FocusInput />;
}

When you click the button, the input gets focused using the ref.

When Should You Use a Ref?

Use a ref when:

You need to control a DOM element directly
You are integrating with non React libraries
You must measure layout, size, or scroll position

Avoid refs for general state or component communication. Props and state handle those cases better.

Props allow your components to stay flexible and reusable by letting data flow cleanly through your UI. The special ref prop gives you controlled access to the DOM when you truly need it. Together, they form two of the core tools you will use in every React application.

React Tutorial