📘 React Props — Complete In-Depth Theory Guide

1. Introduction

🔹 What are Props?

• Dynamic
• Reusable
• Configurable

🔹 Why Props are Important in React

• 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

• 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

Parent → Child → Grandchild

• Props flow down the component tree
• Child cannot directly modify parent data

🔹 Props are Immutable

function Child(props) {
  props.name = "New Name"; // ❌ Not allowed
}

• Prevent side effects
• Ensure predictable UI updates

🔹 How Props Work Internally

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

<MyComponent name="John" />

{
  type: MyComponent,
  props: { name: "John" }
}

🔹 Props vs State

🔹 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

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

function App() {
  return <Greeting name="Alice" />;
}

🔹 Destructuring Props

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

🔹 Passing Multiple Props

function User({ name, age }) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
}

<User name="John" age={25} />

🔹 Default Props

function Button({ text = "Click Me" }) {
  return <button>{text}</button>;
}

🔹 Passing Functions as Props

function Button({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}

function App() {
  const handleClick = () => alert("Clicked!");

  return <Button onClick={handleClick} />;
}

🔹 Passing Objects & Arrays

function Profile({ user }) {
  return <h2>{user.name}</h2>;
}

const user = { name: "Alice" };

<Profile user={user} />;

🔹 Children Prop

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h2>Title</h2>
  <p>Description</p>
</Card>

🔹 Spread Props

const props = { name: "John", age: 30 };

<User {...props} />

🔹 Conditional Props

<Button disabled={isLoading} />

🔹 Inline Expressions

<User age={20 + 5} />

4. Edge Cases / Common Mistakes

❌ Mutating Props

function Child(props) {
  props.value = 10; // ❌
}

❌ Prop Drilling

<App>
  <Parent>
    <Child>
      <GrandChild data={data} />
    </Child>
  </Parent>
</App>

• Context API
• State management (Redux, Zustand)

❌ Re-render Issues with Objects/Functions

<MyComponent obj={{ name: "John" }} />

const obj = useMemo(() => ({ name: "John" }), []);

❌ Missing Props

function User({ name }) {
  return <p>{name.toUpperCase()}</p>;
}

function User({ name = "" }) {
  return <p>{name.toUpperCase()}</p>;
}

❌ Incorrect Type Usage

• Use TypeScript or PropTypes

❌ Overusing Props

<Component a b c d e f g />

• Group into objects
• Refactor components

5. Best Practices

✅ Keep Props Minimal

• Pass only what is needed
• Avoid unnecessary data

✅ Use Destructuring

function Card({ title, description }) {}

✅ Use Meaningful Names

<User isLoggedIn /> // ✅
<User flag />       // ❌

✅ Avoid Inline Functions (When Needed)

<Button onClick={() => handleClick()} /> // ❌

<Button onClick={handleClick} /> // ✅

✅ Memoization for Performance

• React.memo
• useMemo
• useCallback

✅ Validate Props

type Props = {
  name: string;
};

✅ Component Composition over Props Explosion

<Modal title="Title" content="Content" footer="Footer" />

<Modal>
  <Header />
  <Body />
  <Footer />
</Modal>

✅ Avoid Deep Prop Drilling

• Context API
• Global state management

✅ Keep Components Pure

function PureComponent({ value }) {
  return <div>{value}</div>;
}

🔚 Summary

• Immutable inputs
• Used for component communication
• Key to reusability and composition

• Design scalable UI
• Optimize performance
• Write maintainable React code

📘 React Props — Senior-Level Conceptual Interview Questions

1. Why are props immutable in React? What would break if they were mutable?

✅ Strong Answer

WHY:

• React relies on pure component rendering
• Immutability enables efficient diffing (reconciliation)
• Prevents side effects across component boundaries

• Child components could silently modify parent data
• React’s Virtual DOM diffing would become unreliable
• Debugging becomes extremely difficult due to hidden mutations

function Child({ user }) {
  user.name = "Hacked"; // ❌ breaks data integrity
}

Comparison:

• Props → Immutable (controlled externally)
• State → Mutable (controlled internally)

2. How does React detect prop changes during reconciliation?

✅ Strong Answer

HOW:

• When a component re-renders:
  • React compares previous props vs new props
  • If different → re-render child

<MyComponent obj={{ name: "John" }} />

WHY:

• Shallow comparison is fast (O(n))
• Deep comparison would be expensive

Optimization:

const obj = useMemo(() => ({ name: "John" }), []);

Alternative:

• React.memo() for functional components

3. Explain prop drilling. When is it actually acceptable?

✅ Strong Answer

Problem:

• Intermediate components don’t use the data
• Leads to tight coupling and poor maintainability

When it’s OK:

• Small component trees
• Clear ownership of data
• Avoids unnecessary abstraction

When NOT:

• Deep trees
• Frequently changing data

Alternatives:

• Context API
• State management libraries

<Parent>
  <Child>
    <GrandChild data={data} />
  </Child>
</Parent>

4. What are the trade-offs between props and Context API?

✅ Strong Answer

Trade-offs:

• ✅ Transparent data flow
• ❌ Verbose (prop drilling)

• ✅ Eliminates drilling
• ❌ Can cause unnecessary re-renders

Key Insight:

5. Why do inline objects/functions in props cause performance issues?

✅ Strong Answer

<MyComponent onClick={() => doSomething()} />

• Old function !== New function → triggers re-render

WHY:

• JavaScript compares objects/functions by reference

Fix:

const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />

When it matters:

• In memoized components (React.memo)

6. How do props enable inversion of control in React?

✅ Strong Answer

Example:

function Button({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}

<Button onClick={handleSubmit} />

WHY:

• Promotes flexibility and reusability
• Decouples logic from UI

Alternative:

• Hardcoding logic inside component → less reusable

7. What is the “children” prop and why is it powerful?

✅ Strong Answer

<Card>
  <h1>Title</h1>
</Card>

WHY powerful:

• Enables composition over configuration
• Avoids prop explosion

Alternative:

<Card title="Title" content="..." /> // less flexible

8. How does React.memo interact with props?

✅ Strong Answer

const MyComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

Pitfall:

<MyComponent obj={{ a: 1 }} /> // always re-renders

WHY:

• New reference each render

Fix:

• Memoize props
• Use custom comparison function

9. What happens when props change? Describe the full lifecycle.

✅ Strong Answer

1. Parent re-renders
2. New props passed to child
3. React compares old vs new props
4. If changed:
   • Child re-renders
   • Effects may run (useEffect)

Important:

• Even if props are same → child may still re-render (unless memoized)

10. Can a component re-render without prop changes?

✅ Strong Answer

Reasons:

• Parent re-render
• Internal state changes
• Context updates

function Parent() {
  const [count, setCount] = useState(0);
  return <Child name="John" />;
}

Optimization:

• React.memo

11. Why is passing large objects as props risky?

✅ Strong Answer

• Causes frequent re-renders
• Harder to track changes
• Breaks memoization

Better:

<User name={user.name} />

<User user={user} />

Trade-off:

• Granularity vs convenience

12. How do you handle optional props safely?

✅ Strong Answer

• Default values
• Type checking

function User({ name = "Guest" }) {
  return <p>{name}</p>;
}

WHY:

name.toUpperCase() // crash if undefined

13. Explain controlled vs uncontrolled behavior using props.

✅ Strong Answer

• Parent controls value via props

<input value={value} onChange={handleChange} />

• Component manages its own state

WHY:

• Controlled → predictable
• Uncontrolled → simpler but less control

14. What are the dangers of “prop explosion”?

✅ Strong Answer

<Component a b c d e f />

Problems:

• Hard to maintain
• Poor readability
• Tight coupling

Solutions:

• Group into objects
• Use composition

15. When should you derive state from props (and when not)?

✅ Strong Answer

Avoid:

const [value, setValue] = useState(props.value);

WHY:

• Leads to stale state
• Sync issues

Use only when:

• Need to transform props once

Alternative:

• Compute directly from props
• Use memoization

16. How do props interact with hooks like useEffect?

✅ Strong Answer

useEffect(() => {
  fetchData(id);
}, [id]);

WHY:

• Dependency array watches prop changes

Pitfall:

• Missing dependency → stale data
• Over-dependency → unnecessary calls

17. What is a render prop pattern and how does it differ from normal props?

✅ Strong Answer

<DataFetcher render={(data) => <UI data={data} />} />

WHY:

• Enables dynamic rendering logic

vs Normal Props:

• Normal → static data
• Render prop → dynamic UI logic

18. How would you design a highly reusable component using props?

✅ Strong Answer

• Keep props minimal
• Use children
• Accept behavior via callbacks

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return <div onClick={onClose}>{children}</div>;
}

WHY:

• Flexible
• Composable
• Decoupled

🔚 Final Takeaway

• Data flow architecture
• Performance implications
• Component design philosophy
• Trade-offs between abstraction vs simplicity

📘 React Props — Senior-Level MCQs (Deep Understanding)

1. What happens in the following scenario?

const Child = ({ data }) => {
  console.log("Child render");
  return <div>{data.value}</div>;
};

function Parent() {
  const data = { value: 1 };
  return <Child data={data} />;
}

Options:

✅ Correct Answer: B

✔ Explanation:

• A new object is created on every render → new reference
• React sees data as changed → triggers re-render

❌ Why others are wrong:

• A: Incorrect — reference changes every time
• C: Impossible unless memoized
• D: No error here

2. What will prevent unnecessary re-renders here?

<Child config={{ theme: "dark" }} />

Options:

✅ Correct Answer: B

✔ Explanation:

• Object literal creates new reference
• useMemo stabilizes it

const config = useMemo(() => ({ theme: "dark" }), []);

❌ Why others are wrong:

• A: Won’t help alone (props still change)
• C: For functions, not objects
• D: Incorrect — optimization exists

3. What happens if props are mutated inside a child?

function Child(props) {
  props.count = 10;
}

Options:

✅ Correct Answer: C

✔ Explanation:

• JS allows mutation → React doesn’t block it
• Leads to unexpected side effects

❌ Why others are wrong:

• A: No enforcement at runtime
• B: No automatic sync
• D: No crash unless used incorrectly

4. Why does this component re-render?

const Child = React.memo(({ onClick }) => {
  console.log("Render");
  return <button onClick={onClick}>Click</button>;
});

<Child onClick={() => console.log("Hi")} />

Options:

✅ Correct Answer: B

✔ Explanation:

• New function reference each render → fails shallow comparison

❌ Why others are wrong:

• A: Memo works fine with functions
• C: Events don’t trigger re-render by default
• D: Memo works with props

5. What is the best fix?

Options:

✅ Correct Answer: B

✔ Explanation:

const handleClick = useCallback(() => {
  console.log("Hi");
}, []);

❌ Why others are wrong:

• A: May break access to state
• C: Irrelevant
• D: Incorrect

6. What will happen?

function Child({ user }) {
  return <p>{user.name}</p>;
}

<Child />

Options:

✅ Correct Answer: B

✔ Explanation:

• user is undefined → user.name crashes

❌ Why others are wrong:

• A: No fallback
• C: No automatic handling
• D: React doesn’t infer props

7. What is the best fix?

Options:

✅ Correct Answer: C

✔ Explanation:

function Child({ user = {} }) {
  return <p>{user?.name}</p>;
}

❌ Why others are wrong:

• A/B alone may not fully cover
• D: Overkill

8. What is the issue here?

function Parent() {
  const [count, setCount] = useState(0);
  return <Child value={count} />;
}

Options:

✅ Correct Answer: B

✔ Explanation:

• Parent state change → re-render → child re-renders

❌ Why others are wrong:

• A: Incorrect
• C/D: Not applicable

9. How to optimize the child?

Options:

✅ Correct Answer: A

10. What happens with prop drilling?

Options:

✅ Correct Answer: B

✔ Explanation:

• Intermediate components depend on props unnecessarily

11. Which is better for deeply nested data?

Options:

✅ Correct Answer: B

12. What happens here?

const Child = React.memo(({ data }) => {
  console.log("Render");
  return null;
});

const data = { a: 1 };

<Child data={data} />

Options:

✅ Correct Answer: C

13. What is wrong with this pattern?

const [value, setValue] = useState(props.value);

Options:

✅ Correct Answer: B

✔ Explanation:

• State won’t update if prop changes

14. What is the better approach?

Options:

✅ Correct Answer: B

15. Why is children preferred over multiple props?

Options:

✅ Correct Answer: B

16. What happens here?

<Child key="1" value={10} />

<Child key="2" value={10} />

Options:

✅ Correct Answer: B

✔ Explanation:

• Key change → React treats as new component

17. Which causes unnecessary re-renders?

Options:

✅ Correct Answer: B

18. What is the main purpose of props?

Options:

✅ Correct Answer: B

🔚 Final Insight

• Reference equality vs value equality
• Rendering behavior
• Component design decisions
• Performance optimization

📘 React Props — Real-World Coding Problems (Senior Level)

🧩 Problem 1: Dynamic Profile Card System

📌 Problem Statement

🔒 Constraints

• Props: { user, variant }
• variant can be "compact" or "detailed"
• Must not mutate props

✅ Expected Behavior

• Compact → name + avatar
• Detailed → name + avatar + bio + stats

⚠️ Edge Cases

• Missing user fields
• Unknown variant

💡 Solution

function ProfileCard({ user = {}, variant = "compact" }) {
  if (variant === "detailed") {
    return (
      <div>
        <img src={user.avatar} />
        <h2>{user.name}</h2>
        <p>{user.bio}</p>
      </div>
    );
  }
  return <h2>{user.name}</h2>;
}

🧠 Explanation

• Uses default props to avoid crashes
• Conditional rendering based on props

🧩 Problem 2: Controlled Form Input Wrapper

📌 Problem Statement

🔒 Constraints

• Props: { value, onChange }
• Must not manage internal state

✅ Expected Behavior

• Value updates only via parent

⚠️ Edge Cases

• Undefined value
• onChange not passed

💡 Solution

function InputField({ value = "", onChange }) {
  return <input value={value} onChange={onChange} />;
}

🧠 Explanation

• Demonstrates controlled component via props

🧩 Problem 3: Prevent Unnecessary Re-renders

📌 Problem Statement

🔒 Constraints

• Must avoid unnecessary re-renders

⚠️ Edge Cases

• Parent re-renders frequently

💡 Solution

const ListItem = React.memo(({ item }) => {
  return <li>{item.name}</li>;
});

const item = useMemo(() => ({ name: "Item" }), []);
<ListItem item={item} />;

🧠 Explanation

• Combines React.memo + stable props

🧩 Problem 4: Modal with Render Props

📌 Problem Statement

🔒 Constraints

• Props: { render }

💡 Solution

function Modal({ render }) {
  return <div className="modal">{render()}</div>;
}

<Modal render={() => <p>Hello</p>} />

🧠 Explanation

• Demonstrates render prop pattern

🧩 Problem 5: Button with Behavior Injection

📌 Problem Statement

💡 Solution

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

🧠 Explanation

• Shows inversion of control

🧩 Problem 6: Deep Prop Drilling Refactor

📌 Problem Statement

🔒 Constraints

• Avoid prop drilling

💡 Solution

const DataContext = React.createContext();

<DataContext.Provider value={data}>
  <DeepChild />
</DataContext.Provider>

🧠 Explanation

• Avoids unnecessary prop passing

🧩 Problem 7: Derived State Anti-pattern Fix

📌 Problem Statement

const [value, setValue] = useState(props.value);

💡 Solution

function Component({ value }) {
  return <div>{value}</div>;
}

🧠 Explanation

• Avoids stale state issues

🧩 Problem 8: Safe Optional Props Rendering

📌 Problem Statement

💡 Solution

function User({ user }) {
  return <p>{user?.profile?.name || "Guest"}</p>;
}

🧩 Problem 9: Generic Table Component

📌 Problem Statement

🔒 Constraints

• Dynamic columns

💡 Solution

function Table({ data, columns }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => <th key={col}>{col}</th>)}
        </tr>
      </thead>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            {columns.map(col => <td key={col}>{row[col]}</td>)}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

🧩 Problem 10: Prevent Function Prop Re-Creation

📌 Problem Statement

💡 Solution

const handleClick = useCallback((id) => {
  console.log(id);
}, []);

🧩 Problem 11: Compound Component Pattern

📌 Problem Statement

💡 Solution

function Tabs({ children }) {
  return <div>{children}</div>;
}

🧩 Problem 12: Prop Validation with TypeScript

📌 Problem Statement

💡 Solution

type Props = {
  name: string;
};

🧩 Problem 13: Conditional Rendering Based on Props

📌 Problem Statement

💡 Solution

function Loader({ isLoading, children }) {
  return isLoading ? <p>Loading...</p> : children;
}

🧩 Problem 14: Reusable Layout Wrapper

📌 Problem Statement

💡 Solution

function Layout({ header, children, footer }) {
  return (
    <>
      {header}
      {children}
      {footer}
    </>
  );
}

🧩 Problem 15: Key Prop Behavior

📌 Problem Statement

💡 Explanation

• Changing key forces remount → resets state

🧩 Problem 16: Memoization Pitfall

📌 Problem Statement

💡 Solution

• Normalize props
• Avoid passing full objects

🧩 Problem 17: Dynamic Theme Injection

📌 Problem Statement

💡 Solution

function Box({ theme }) {
  return <div style={{ color: theme.color }} />;
}

🧩 Problem 18: Higher-Order Component with Props

📌 Problem Statement

💡 Solution

function withUser(Component) {
  return function Wrapped(props) {
    return <Component {...props} user={{ name: "John" }} />;
  };
}

🧩 Problem 19: Prop Normalization Layer

📌 Problem Statement

💡 Solution

const normalizedUser = {
  name: user.name || user.username
};

🧩 Problem 20: Performance Audit Scenario

📌 Problem Statement

💡 Solution

• Use React.memo
• Virtualization (React Window)
• Stable props

🔚 Final Takeaway

• Real-world prop usage
• Performance optimization
• Architecture decisions
• Debugging mindset

🛠️ React Props — Senior-Level Debugging Challenges (Production Scenarios)

🧩 1. Infinite Re-render due to Derived State

❌ Buggy Code

function Counter({ value }) {
  const [count, setCount] = useState(value);

  useEffect(() => {
    setCount(value);
  }, [count]); // ❌ wrong dependency

  return <p>{count}</p>;
}

🔍 What’s Wrong

• Effect depends on count but sets count → infinite loop

❓ WHY it happens

• Changing count triggers effect again → loop

✅ Fix

useEffect(() => {
  setCount(value);
}, [value]);

🧠 Best Practice

• Avoid syncing props to state unless necessary

🧩 2. React.memo Not Working

❌ Buggy Code

const Child = React.memo(({ config }) => {
  console.log("Rendered");
  return <div>{config.theme}</div>;
});

function Parent() {
  return <Child config={{ theme: "dark" }} />;
}

🔍 What’s Wrong

• Inline object causes new reference each render

❓ WHY

• Shallow comparison fails

✅ Fix

const config = useMemo(() => ({ theme: "dark" }), []);
<Child config={config} />

🧠 Best Practice

• Stabilize object/array props

🧩 3. Unexpected Undefined Crash

❌ Buggy Code

function Profile({ user }) {
  return <p>{user.name.toUpperCase()}</p>;
}

🔍 What’s Wrong

• user may be undefined

❓ WHY

• Props not guaranteed unless validated

✅ Fix

function Profile({ user = {} }) {
  return <p>{user.name?.toUpperCase() || "Guest"}</p>;
}

🧠 Best Practice

• Always guard optional props

🧩 4. Function Prop Causing Re-renders

❌ Buggy Code

<Child onClick={() => doSomething()} />

🔍 What’s Wrong

• New function every render

❓ WHY

• Breaks memoization

✅ Fix

const handleClick = useCallback(doSomething, []);
<Child onClick={handleClick} />

🧠 Best Practice

• Use useCallback for stable handlers

🧩 5. Prop Mutation Bug

❌ Buggy Code

function Child({ items }) {
  items.push("new"); // ❌ mutation
  return <div>{items.length}</div>;
}

🔍 What’s Wrong

• Mutating props

❓ WHY

• Breaks React’s data flow

✅ Fix

const newItems = [...items, "new"];

🧠 Best Practice

• Treat props as immutable

🧩 6. Stale Closure with Props

❌ Buggy Code

function Timer({ delay }) {
  useEffect(() => {
    const id = setInterval(() => {
      console.log(delay);
    }, 1000);
    return () => clearInterval(id);
  }, []); // ❌ missing dependency
}

🔍 What’s Wrong

• delay is stale

❓ WHY

• Closure captures initial value

✅ Fix

useEffect(() => {
  const id = setInterval(() => {
    console.log(delay);
  }, delay);
  return () => clearInterval(id);
}, [delay]);

🧠 Best Practice

• Always include props in dependencies

🧩 7. Over-rendering Child Components

❌ Buggy Code

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

🔍 Issue

• Child re-renders unnecessarily

❓ WHY

• No memoization

✅ Fix

const Child = React.memo(({ user }) => { ... });

🧠 Best Practice

• Memoize pure components

🧩 8. Incorrect Key Causing State Reset

❌ Buggy Code

{items.map((item, index) => (
  <Item key={index} value={item} />
))}

🔍 What’s Wrong

• Index as key

❓ WHY

• Order changes → wrong reconciliation

✅ Fix

key={item.id}

🧠 Best Practice

• Use stable unique keys

🧩 9. Conditional Props Breaking UI

❌ Buggy Code

<Button disabled={isLoading && "true"} />

🔍 What’s Wrong

• Passing string instead of boolean

❓ WHY

• "true" is truthy but incorrect type

✅ Fix

disabled={isLoading}

🧩 10. Spreading Unnecessary Props

❌ Buggy Code

<Component {...props} />

🔍 Issue

• Passing unused props

❓ WHY

• Increases coupling, risk of bugs

✅ Fix

<Component name={props.name} />

🧩 11. Breaking Controlled Component

❌ Buggy Code

<input value={value} />

🔍 Issue

• Missing onChange

❓ WHY

• Becomes read-only

✅ Fix

<input value={value} onChange={handleChange} />

🧩 12. Recomputing Expensive Props

❌ Buggy Code

<Chart data={processData(rawData)} />

🔍 Issue

• Expensive computation every render

❓ WHY

• Function runs each render

✅ Fix

const data = useMemo(() => processData(rawData), [rawData]);

🧩 13. Nested Object Prop Issue

❌ Buggy Code

<User settings={{ theme: { color: "blue" } }} />

🔍 Issue

• Deep object recreated

❓ WHY

• Breaks memo

✅ Fix

• Lift and memoize object

🧩 14. Children Misuse

❌ Buggy Code

function Wrapper({ children }) {
  children = <div>{children}</div>; // ❌ mutation
}

🔍 Issue

• Reassigning props

✅ Fix

return <div>{children}</div>;

🧩 15. Props Not Updating in Child

❌ Buggy Code

const [value, setValue] = useState(props.value);

🔍 Issue

• Not synced with prop changes

✅ Fix

• Use props directly OR sync via effect

🧩 16. Boolean Prop Misinterpretation

❌ Buggy Code

<MyComponent isActive="false" />

🔍 Issue

• String is truthy

✅ Fix

isActive={false}

🧩 17. Overusing Props Instead of Composition

❌ Buggy Code

<Card title="..." content="..." footer="..." />

🔍 Issue

• Rigid API

✅ Fix

<Card>
  <Header />
  <Body />
</Card>

🧩 18. Missing Dependency Causing Buggy UI

❌ Buggy Code

useEffect(() => {
  fetchData(id);
}, []); // ❌

🔍 Issue

• Doesn’t react to prop change

✅ Fix

[id]

🔚 Final Takeaway

• Reference equality pitfalls
• Stale closures
• Improper memoization
• Incorrect assumptions about props

🏗️ React Props — Real-World Machine Coding Problems (Senior / Architect Level)

• Component architecture
• Data flow via props
• Performance & scalability
• Real-world trade-offs

🧩 1. Configurable Data Table (Enterprise Grid)

📌 Requirements

• Render dynamic table using props:
  • columns, data, renderCell, sortConfig
• Support:
  • Sorting
  • Custom cell rendering
  • Column visibility toggle

🖥️ UI Behavior

• Click column header → sort
• Toggle columns → hide/show instantly

🔄 Data Flow

• Parent owns data & sorting state
• Table receives everything via props

⚠️ Edge Cases

• Empty data
• Missing keys
• Large datasets

⚡ Performance

• Virtualization (react-window)
• Memoized rows

🏗️ Architecture

• Table
• TableRow
• TableCell

🧠 Approach

1. Normalize columns
2. Pass render functions as props
3. Memoize rows

🧩 2. Headless Modal System

📌 Requirements

• Build a modal with:
  • isOpen, onClose, children
• No styling (headless)

🖥️ UI Behavior

• Close on overlay click / ESC

🔄 Data Flow

• Parent controls open/close

⚠️ Edge Cases

• Multiple modals
• Focus trap

⚡ Performance

• Lazy mount/unmount

🏗️ Architecture

• Modal
• Portal

🧠 Approach

• Use children for flexibility
• Use props for behavior injection

🧩 3. Multi-Step Form Wizard

📌 Requirements

• Steps passed as props:
  • steps, currentStep, onNext, onBack

🖥️ UI Behavior

• Navigate steps
• Validate before next

🔄 Data Flow

• Central form state in parent

⚠️ Edge Cases

• Skip steps
• Validation errors

⚡ Performance

• Avoid re-rendering all steps

🏗️ Architecture

• Wizard
• Step

🧠 Approach

• Render active step only
• Pass handlers via props

🧩 4. Reusable Dropdown with Custom Rendering

📌 Requirements

• Props:
  • options, renderOption, onSelect

🖥️ UI Behavior

• Keyboard navigation
• Custom UI per option

⚠️ Edge Cases

• Empty list
• Duplicate values

⚡ Performance

• Debounced filtering

🧠 Approach

• Render prop for flexibility

🧩 5. Infinite Scroll Feed

📌 Requirements

• Props:
  • fetchData, renderItem

🖥️ UI Behavior

• Load more on scroll

🔄 Data Flow

• Parent handles API

⚠️ Edge Cases

• Duplicate fetch
• End of list

⚡ Performance

• Intersection Observer

🧠 Approach

• Controlled via props

🧩 6. Theme System (Dynamic Styling)

📌 Requirements

• Pass theme via props
• Support light/dark

⚠️ Edge Cases

• Missing theme keys

⚡ Performance

• Memoize theme object

🧠 Approach

• Theme provider or prop drilling trade-off

🧩 7. Form Builder (Schema-driven UI)

📌 Requirements

• Props:
  • schema, onSubmit

🖥️ UI Behavior

• Dynamically render inputs

⚠️ Edge Cases

• Unknown field types

⚡ Performance

• Lazy render sections

🧠 Approach

• Map schema → components

🧩 8. Drag & Drop List

📌 Requirements

• Props:
  • items, onReorder

⚠️ Edge Cases

• Rapid drag events

⚡ Performance

• Avoid full list re-render

🧠 Approach

• Stable keys
• Memoized items

🧩 9. Notification System

📌 Requirements

• Props:
  • notifications, onDismiss

🖥️ UI Behavior

• Auto-dismiss

⚠️ Edge Cases

• Duplicate notifications

🧠 Approach

• Controlled list via props

🧩 10. Search with Debounced Input

📌 Requirements

• Props:
  • onSearch

⚡ Performance

• Debounce input

🧩 11. Reusable Card System (Composable UI)

📌 Requirements

• Use children for layout slots

🧠 Approach

• Composition over props explosion

🧩 12. Chart Wrapper (Reusable Visualization)

📌 Requirements

• Props:
  • data, config

⚠️ Edge Cases

• Empty dataset

⚡ Performance

• Memoized transformations

🧩 13. Permission-based Rendering

📌 Requirements

• Props:
  • permissions, children

🧠 Approach

if (!permissions.includes("admin")) return null;

🧩 14. Lazy Image Component

📌 Requirements

• Props:
  • src, placeholder

⚡ Performance

• Intersection Observer

🧩 15. File Upload Component

📌 Requirements

• Props:
  • onUpload, accept

⚠️ Edge Cases

• Invalid file types

🧩 16. Pagination Component

📌 Requirements

• Props:
  • page, totalPages, onChange

🧩 17. Headless Tooltip System

📌 Requirements

• Props:
  • content, children

🧩 18. Virtualized List

📌 Requirements

• Props:
  • items, rowHeight

⚡ Performance

• Render visible rows only

🧩 19. Undo/Redo System

📌 Requirements

• Props:
  • state, onUndo, onRedo

🧩 20. Live Collaborative Cursor Tracker

📌 Requirements

• Props:
  • users, positions

⚠️ Edge Cases

• Rapid updates

⚡ Performance

• Throttle updates

🔚 Final Architect Insight

• Prop-driven architecture
• Component composition vs configuration
• Performance tuning
• Scalable design patterns

📘 React Props — FAANG-Level Interview Questions (Senior Depth)

1. How would you design a component API using props for long-term scalability?

🔁 Follow-up

• How do you prevent prop explosion?
• When would you switch to composition?

✅ Strong Answer

• Start with minimal, explicit props
• Prefer composition (children) over configuration
• Group related props into objects when needed
• Design for extensibility without breaking changes

<Modal>
  <Header />
  <Body />
</Modal>

WHY:

• Reduces coupling
• Improves flexibility

❌ Weak Answer

• “Just add more props as needed” 👉 Fails because it ignores scalability and API design

2. Explain how React decides whether to re-render a component based on props.

🔁 Follow-up

• How does React.memo change this?
• What are its limitations?

✅ Strong Answer

• By default, React re-renders when parent renders
• React.memo does shallow comparison of props

Key Insight:

• Reference equality matters

❌ Weak Answer

• “React only re-renders when props change” 👉 Incorrect — parent re-render triggers child too

3. You notice a component re-rendering frequently despite unchanged data. How do you debug it?

🔁 Follow-up

• What tools would you use?

✅ Strong Answer

• Check:
  • Inline objects/functions
  • Parent re-renders
  • Missing memoization
• Use:
  • React DevTools Profiler

❌ Weak Answer

• “Add React.memo everywhere” 👉 Over-optimization without understanding cause

4. When would you avoid passing an object as a prop?

🔁 Follow-up

• When is it acceptable?

✅ Strong Answer

• Avoid when:
  • Object recreated each render
  • Component is memoized
• Acceptable when:
  • Stable reference (useMemo)
  • Small apps

❌ Weak Answer

• “Objects are always bad” 👉 Oversimplification

5. Design a reusable table component. What props would you expose?

🔁 Follow-up

• How do you support custom rendering?

✅ Strong Answer

• Props:
  • data, columns, renderCell
• Use render props for flexibility

❌ Weak Answer

• “Just pass data and map it” 👉 Not scalable or flexible

6. How do you handle deeply nested data without prop drilling?

🔁 Follow-up

• Trade-offs of Context API?

✅ Strong Answer

• Use Context for global/shared data
• Avoid overuse (causes re-renders)

❌ Weak Answer

• “Always use Context” 👉 Ignores trade-offs

7. What are the risks of syncing props to state?

🔁 Follow-up

• When is it justified?

✅ Strong Answer

• Risks:
  • Stale state
  • Sync bugs
• Use only for:
  • Derived/controlled transformations

❌ Weak Answer

• “It’s fine to copy props into state” 👉 Leads to bugs

8. How would you design a component that allows behavior injection?

🔁 Follow-up

• Compare with HOCs

✅ Strong Answer

• Use function props (callbacks)

<Button onClick={handleClick} />

❌ Weak Answer

• “Hardcode logic” 👉 Not reusable

9. Why does this cause unnecessary re-renders?

<Child config={{ theme: "dark" }} />

🔁 Follow-up

• How do you fix it?

✅ Strong Answer

• New object reference each render

useMemo(() => ({ theme: "dark" }), [])

❌ Weak Answer

• “React is inefficient” 👉 Misunderstanding core behavior

10. How do you decide between props vs global state?

🔁 Follow-up

• What are scaling concerns?

✅ Strong Answer

• Props:
  • Local, predictable
• Global state:
  • Shared, complex

❌ Weak Answer

• “Use Redux for everything” 👉 Overengineering

11. What is the role of children in API design?

🔁 Follow-up

• When not to use it?

✅ Strong Answer

• Enables composition
• Avoids rigid APIs

❌ Weak Answer

• “It’s just for nesting” 👉 Misses design importance

12. A component is slow due to heavy prop computation. How do you optimize?

🔁 Follow-up

• Trade-offs of memoization?

✅ Strong Answer

• Use useMemo
• Move computation outside render

❌ Weak Answer

• “Use useEffect” 👉 Wrong tool

13. Explain how prop changes trigger effects.

🔁 Follow-up

• What if dependency is missing?

✅ Strong Answer

• useEffect runs when dependencies change

❌ Weak Answer

• “Effects run on every render” 👉 Incorrect

14. How would you design a headless component using props?

🔁 Follow-up

• Why is this pattern useful?

✅ Strong Answer

• Logic via props, UI via children

❌ Weak Answer

• “Just build UI directly” 👉 Not reusable

15. How do you prevent unnecessary prop spreading?

🔁 Follow-up

• When is spreading useful?

✅ Strong Answer

• Explicit props preferred
• Spread only for wrappers

❌ Weak Answer

• “Always use spread” 👉 Risky

16. What happens when a key changes but props don’t?

🔁 Follow-up

• Real-world use case?

✅ Strong Answer

• Component remounts → state reset

❌ Weak Answer

• “Nothing changes” 👉 Incorrect

17. How do you handle optional props in large systems?

🔁 Follow-up

• Type safety strategies?

✅ Strong Answer

• Default values
• TypeScript

❌ Weak Answer

• “Just check manually” 👉 Not scalable

18. Describe a real-world bug caused by props and how you’d fix it.

🔁 Follow-up

• How to prevent it?

✅ Strong Answer

• Example:
  • Inline object → re-render loop
• Fix:
  • Memoization

❌ Weak Answer

• “I’d debug in console” 👉 Lacks depth

19. How would you audit a large app for prop-related performance issues?

🔁 Follow-up

• Metrics you’d track?

✅ Strong Answer

• Use Profiler
• Check:
  • Re-render frequency
  • Prop stability

❌ Weak Answer

• “Rewrite everything” 👉 Unrealistic

🔚 Final Interview Insight

• Architectural thinking
• Trade-offs (simplicity vs scalability)
• Performance awareness
• Debugging intuition