DEV Community

Sathish 226
Sathish 226

Posted on

React Learning Blog : Props Drilling, useRef, and useContext Explained Simply.

#webdev #javascript #react #learning

Hello Everyone!!

Today, I learned some important React concepts. I will share them in simple words so that beginners can also understand easily.

1.What is Props Drilling?

In React, data is passed from a parent component to a child using props.

But sometimes, we want to send this data to a deeply nested child component. In that case, the data has to go through many components — even if some components don’t use this data.
This is called Props Drilling.

Example:

function App() {
  const message = "Hello Sathish!";
  return <Parent message={message} />;
}

function Parent({ message }) {
  return <Child message={message} />;
}

function Child({ message }) {
  return <GrandChild message={message} />;
}

function GrandChild({ message }) {
  return <p>{message}</p>;
}
Enter fullscreen mode Exit fullscreen mode
  • In this example, message is passed from App to GrandChild through Parent and Child.
  • But Parent and Child are not using this data — they are just passing it.
  • This is called props drilling.

2.Important Hook: useRef

The useRef hook helps us directly access a DOM element like an input box.
We can get the value or focus the input without re-rendering the component.

Example:

import { useRef } from "react";

function UseRefDemo() {
  const inputElement = useRef(null);

  const showValue = () => {
    if (inputElement.current) {
      console.log(inputElement.current.value);
    }
  };

  return (
    <div>
      <input type="text" ref={inputElement} />
      <button onClick={showValue}>Show Value</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • When you type something in the input box and click the button, the value will be printed in the console.

3.Important Hook: useContext

The useContext hook solves the props drilling problem.
Instead of passing data manually, we can share data between components easily using Context API.

Step-by-Step Example:

Step 1: Create Context

import { createContext } from "react";
export const UserContext = createContext();
Enter fullscreen mode Exit fullscreen mode

Step 2: Provide Context Value

import { UserContext } from "./UserContext";
import Child from "./Child";

function App() {
  return (
    <UserContext.Provider value={"Hello Sathish from Context!"}>
      <Child />
    </UserContext.Provider>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Step 3: Use Context in Child

import { useContext } from "react";
import { UserContext } from "./UserContext";

function Child() {
  const message = useContext(UserContext);
  return <p>{message}</p>;
}

export default Child;
Enter fullscreen mode Exit fullscreen mode
  • Now Child gets the value directly — no need to pass props from Parent or App!

Recap:

  • Props Drilling — passing data manually from parent to child to grandchild.
  • useRef — directly access DOM elements (like input box) without re-rendering.
  • useContext — solve props drilling problem by sharing data easily across components.

Keywords:

React, Props Drilling, useRef, useContext, React Hooks, Context API

React becomes simple when you break it into small pieces — learn step by step, and everything will be clear.

Top comments (0)