Mastering React Props for Reusable Components

What Are Props in React?

• In React, props are properties.
• Props are used to pass information from one component to another.
• The primary purpose of props is to enable a parent component to pass data to its child components.

• Note: Props can be used in both functional and class components. With functional components, props are passed as arguments to the function.

Key Points About Props

1. Props are passed as attributes to components.
2. They are immutable inside the child component.
3. Props help in one-way data flow.

Simple Example

1. App.jsx

   import React from "react";
   import Parent from "./Parent";
   
   function App() {
     return (
       <>
         <Parent />
       </>
     );
   }
   
   export default App;
   

2. Parent.jsx

   import React from "react";
   import Child from "./Child";
   
   function Parent() {
     return (
       <>
         <h2>This is Parent component </h2>
         <Child name="Manav Pandya" />
       </>
     );
   }
   
   export default Parent;
   

3. Child.jsx

   import React from "react";
   
   function Child(props) {
     return (
       <>
         <h3>This is child component </h3>
         <p>Hello,Good Morning {props.name}</p>
       </>
     );
   }
   
   export default Child;
   

In this example

1. App Component (App.js):  Renders the Parent component.
2. Parent Component (Parent.js): Renders a heading and the Child component and passes the prop name "Manav Pandya" to the Child component.
3. Child Component (Child.js): Receives the name prop and displays Hello, Good Morning Manav Pandya.

What is Props Drilling in React?

• Props Drilling is a situation in React where you pass props through multiple levels of nested components.
• If some of those components don't need the data themselves, they pass it down to the next level.
• This often leads to unnecessary complexity and clutter, especially in large component trees.

Example of Props Drilling

function App() {
  const user = "Jay";
  return <Parent user={user} />;
}

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

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

function GrandChild({ user }) {
  return <h2>Hello, {user}</h2>;
}

In this example

• user Is passed from App → Parent → Child → GrandChild.

• Only GrandChild uses the user prop, but all components in the chain need to receive and pass it.

Problems with Props Drilling

• Clutters intermediate components with unnecessary props.

• Hard to maintain as the app grows.

• Increases the risk of bugs and misuse.

Solution

• Context API

• Redux / Zustand 

• Custom hooks

Conclusion

Props are the backbone of component communication in React, enabling seamless data sharing. They promote reusability and dynamic UI without altering the original data. Mastering props means writing cleaner, smarter, and more efficient React components.