Prop drilling is regarded as a pattern in React development. It’s a common approach for passing data from a parent component to a deeply nested child component when other methods like context or state management libraries aren’t feasible or necessary. Prop drilling is a common and straightforward method for sharing data and functionality between components in a React application.

Prop drilling can lead to verbose and less maintainable code, especially in large component trees. Although prop drilling can sometimes be unavoidable in certain situations, it is generally recommended to avoid excessive prop drilling by using alternative state management solutions such as Context API, Redux, or TanStack Query, depending on the specific requirements and complexity of the application. These solutions provide more centralized and scalable approaches to managing state and sharing data across components without the need for prop drilling.

Example of prop drilling

Main.tsx

import { useState } from "react";
import Footer from "./Footer";

export default function Main() {
  const [user, setUser] = useState("Unknown");
  return (
    <div>
      <main>
        <h1>Main component</h1>
      </main>
      <footer>
        <Footer user={user} />
      </footer>
    </div>
  );
}

The Footer component is receiving a prop named user, and its value is the user variable, which is defined in the Main component’s state. The Footer component can then access the user data and use it as needed, such as displaying user information or performing user-related actions within the footer section of the application’s UI.

Footer.tsx

import Info from "./Info";

export default function Footer({ user }: { user: string }) {
  return (
    <>
      <h2>Footer component</h2>
      <aside>
        <Info user={user} />
      </aside>
    </>
  );
}

The Info component is receiving a prop named user, and its value is the user variable, defined somewhere higher up in the component hierarchy. The Info component can then access the user data and use it as needed, such as displaying user information or performing user-related actions within the footer section of the application’s UI.

Info.tsx

export default function Info({ user }: { user: string }) {
  return (
    <>
      <h3>Info component</h3>
      <div>Welcome, {user}</div>
    </>
  );
}

The Info component is displaying the prop named user, defined somewhere higher up in the component hierarchy. In this case, the prop named user was defined in the Main component.