> ## Documentation Index
> Fetch the complete documentation index at: https://docs.anujpandey.in/llms.txt
> Use this file to discover all available pages before exploring further.
# Props
# π React Props β Complete In-Depth Theory Guide
***
## 1. Introduction
### πΉ What are Props?
**Props (short for βpropertiesβ)** are **inputs passed from a parent component to a child component** in React.
They allow components to be:
* **Dynamic**
* **Reusable**
* **Configurable**
π Props are **read-only** and cannot be modified by the receiving component.
***
### πΉ Why Props are Important in React
Props are fundamental because they enable:
* **Component Reusability**
* Same component, different data
* **Separation of Concerns**
* Logic in parent, UI in child
* **Data Flow**
* Enables **unidirectional data flow** (top β down)
***
### πΉ When and Why We Use Props
Use props when:
* You want to **pass data** to child components
* You need to **customize UI behavior**
* You want to **share state across components**
* You are building **composable UI systems**
***
## 2. Concepts / Internal Workings
### πΉ Unidirectional Data Flow
React follows a **one-way data flow**:
```
Parent β Child β Grandchild
```
* Props flow **down the component tree**
* Child cannot directly modify parent data
***
### πΉ Props are Immutable
Props are **read-only objects**.
```js theme={null}
function Child(props) {
props.name = "New Name"; // β Not allowed
}
```
π React enforces immutability to:
* Prevent side effects
* Ensure predictable UI updates
***
### πΉ How Props Work Internally
Under the hood:
1. React creates a **virtual DOM element**
2. Props are stored as an object inside it
3. During rendering:
* React compares old vs new props (diffing)
* Updates only what changed
```js theme={null}
```
Internally becomes:
```js theme={null}
{
type: MyComponent,
props: { name: "John" }
}
```
***
### πΉ Props vs State
| Feature | Props | State |
| ---------- | --------- | -------------------- |
| Ownership | Parent | Component itself |
| Mutability | Immutable | Mutable |
| Purpose | Pass data | Manage internal data |
***
### πΉ Relationship with Other React Features
* **Hooks (`useState`, `useEffect`)**
* Props often trigger effects
* **Context API**
* Alternative to passing props deeply (prop drilling)
* **Memoization (`React.memo`)**
* Props are used for comparison to prevent re-renders
***
## 3. Syntax & Examples
***
### πΉ Basic Props Passing
```jsx theme={null}
function Greeting(props) {
return
Hello, {props.name}
;
}
function App() {
return ;
}
```
***
### πΉ Destructuring Props
```jsx theme={null}
function Greeting({ name }) {
return
Hello, {name}
;
}
```
***
### πΉ Passing Multiple Props
```jsx theme={null}
function User({ name, age }) {
return (
{name}
{age}
);
}
```
***
### πΉ Default Props
```jsx theme={null}
function Button({ text = "Click Me" }) {
return ;
}
```
***
### πΉ Passing Functions as Props
```jsx theme={null}
function Button({ onClick }) {
return ;
}
function App() {
const handleClick = () => alert("Clicked!");
return ;
}
```
π Enables **child β parent communication**
***
### πΉ Passing Objects & Arrays
```jsx theme={null}
function Profile({ user }) {
return
{user.name}
;
}
const user = { name: "Alice" };
;
```
***
### πΉ Children Prop
```jsx theme={null}
function Card({ children }) {
return
{children}
;
}
Title
Description
```
π `children` is a **special prop**
***
### πΉ Spread Props
```jsx theme={null}
const props = { name: "John", age: 30 };
```
***
### πΉ Conditional Props
```jsx theme={null}
```
***
### πΉ Inline Expressions
```jsx theme={null}
```
***
## 4. Edge Cases / Common Mistakes
***
### β Mutating Props
```jsx theme={null}
function Child(props) {
props.value = 10; // β
}
```
β Fix: Use state or callbacks
***
### β Prop Drilling
```jsx theme={null}
```
π Problem: Passing props through many layers
β Solution:
* Context API
* State management (Redux, Zustand)
***
### β Re-render Issues with Objects/Functions
```jsx theme={null}
```
π New object created every render β unnecessary re-renders
β Fix:
```jsx theme={null}
const obj = useMemo(() => ({ name: "John" }), []);
```
***
### β Missing Props
```jsx theme={null}
function User({ name }) {
return
{name.toUpperCase()}
;
}
```
π Crash if `name` is undefined
β Fix:
```jsx theme={null}
function User({ name = "" }) {
return
{name.toUpperCase()}
;
}
```
***
### β Incorrect Type Usage
Passing wrong types can break UI.
β Solution:
* Use TypeScript or PropTypes
***
### β Overusing Props
Too many props β hard to maintain
```jsx theme={null}
```
β Fix:
* Group into objects
* Refactor components
***
## 5. Best Practices
***
### β Keep Props Minimal
* Pass only what is needed
* Avoid unnecessary data
***
### β Use Destructuring
```jsx theme={null}
function Card({ title, description }) {}
```
Improves readability
***
### β Use Meaningful Names
```jsx theme={null}
// β
// β
```
***
### β Avoid Inline Functions (When Needed)
```jsx theme={null}