Props and Props Drilling in React

What is Props in React?

Props are used to send data from a parent component to a child component.

In simple words:

Props allow components to share data.

Props are:

• Read-only (we cannot change them inside the child component)

• Passed as attributes in JSX

Example of Props

Parent Component

function Parent() {
  return <Child name="Harini" />;
}

Child Component

function Child(props) {
  return <h1>Hello {props.name}</h1>;
}

Output:

Hello Harini

Here:

• Parent sends the value "Harini"

• Child receives it using props

What is Props Drilling?

Props drilling happens when we pass data from one component to another through many levels of components — even if some components do not use that data.

If App wants to send data to GrandChild, we must pass props through:

• App -> Parent

• Parent -> Child

• Child -> GrandChild

Even if Parent and Child don’t need that data.

This is called Props Drilling.

Why is Props Drilling a Problem?

Props drilling can cause:

• Too much repeated code

• Hard to manage data

• Confusing component structure

• Difficult debugging

In large applications, this becomes messy.

Example of Props Drilling

function App() {
return ;
}

function Parent({ name }) {
return ;
}

function Child({ name }) {
return ;
}

function GrandChild({ name }) {
return

Hello {name}

;
}

Here, Parent and Child are just passing data.
They are not using it. This is props drilling.

How to Avoid Props Drilling?

1. useContext Hook

useContext helps share data directly to any component without passing through every level.

With Context:

• No need to pass props manually

• Cleaner code

• Better structure

2. State Management Libraries

For large applications, we can use:

• Redux

• Zustand

• Recoil

These help manage global state easily.