> ## 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.
# Components
# π React Components (Functional & Class Basics) β Complete Theory Guide
***
## 1. πΉ Introduction
### β
What are Components?
In React, **components** are the fundamental building blocks of a UI.
They are **reusable, independent pieces of code** that return UI elements.
There are two main types:
* **Functional Components** (modern, preferred)
* **Class Components** (legacy but still important for understanding React evolution)
***
### π‘ Why Components are Important
* Enable **modular architecture**
* Promote **code reuse**
* Improve **maintainability**
* Allow **separation of concerns**
* Help manage **UI logic efficiently**
***
### π When & Why We Use Components
Use components when:
* UI can be broken into smaller parts (e.g., Navbar, Card, Button)
* You want reusable UI patterns
* You need to isolate logic (state, effects)
π Example:
Instead of writing a full page in one file, split into:
* ``
* `Hello, World! ;
}
```
#### Key Characteristics:
* Stateless (initially), but now use **Hooks**
* Lightweight and faster
* Easier to read and test
***
### πΉ 2.2 Class Components
A **class component** is a JavaScript class that extends `React.Component`.
```jsx theme={null}
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return Hello, World! ;
}
}
```
#### Key Characteristics:
* Uses lifecycle methods
* Has `this` binding
* Manages state via `this.state`
***
### πΉ 2.3 JSX β React Elements β Virtual DOM
#### Flow:
1. JSX is written
2. Transpiled to `React.createElement`
3. Creates Virtual DOM
4. React compares (Diffing)
5. Updates real DOM (Reconciliation)
```jsx theme={null}
const element = Hello ;
// becomes:
React.createElement('h1', null, 'Hello');
```
***
### πΉ 2.4 Props (Input to Components)
Props = Read-only data passed from parent to child.
```jsx theme={null}
function Greeting(props) {
return Hello, {props.name} ;
}
```
***
### πΉ 2.5 State (Internal Data)
State is mutable data inside a component.
#### Functional (Hooks):
```jsx theme={null}
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return setCount(count + 1)}>{count} ;
}
```
#### Class:
```jsx theme={null}
this.state = { count: 0 };
this.setState({ count: this.state.count + 1 });
```
***
### πΉ 2.6 Lifecycle (Class Components)
Important lifecycle methods:
| Phase | Method |
| ---------- | ---------------------- |
| Mounting | `componentDidMount` |
| Updating | `componentDidUpdate` |
| Unmounting | `componentWillUnmount` |
***
### πΉ 2.7 Functional Alternative to Lifecycle (Hooks)
* `useEffect()` replaces lifecycle methods
```jsx theme={null}
useEffect(() => {
console.log("Component Mounted");
}, []);
```
***
### πΉ 2.8 Component Tree & Re-rendering
* React builds a **component tree**
* Re-renders happen when:
* Props change
* State changes
***
### πΉ 2.9 Relationship with Other React Features
| Feature | Relationship |
| ------------ | ----------------------------- |
| Hooks | Used in functional components |
| Context API | Share data across components |
| Redux | External state management |
| React Router | Component-based navigation |
***
## 3. π§ͺ Syntax & Examples
***
### πΉ 3.1 Basic Functional Component
```jsx theme={null}
function App() {
return My App ;
}
```
***
### πΉ 3.2 Arrow Function Component
```jsx theme={null}
const App = () => Hello ;
```
***
### πΉ 3.3 Component with Props
```jsx theme={null}
const User = ({ name }) => {
return {name} ;
};
```
***
### πΉ 3.4 Nested Components
```jsx theme={null}
function App() {
return (
);
}
```
***
### πΉ 3.5 Conditional Rendering
```jsx theme={null}
function Status({ isLoggedIn }) {
return isLoggedIn ? Welcome : Please Login ;
}
```
***
### πΉ 3.6 List Rendering
```jsx theme={null}
const items = ['A', 'B', 'C'];
items.map((item, index) => {item} );
```
***
### πΉ 3.7 Class Component Example
```jsx theme={null}
class Counter extends React.Component {
state = { count: 0 };
render() {
return (
this.setState({ count: this.state.count + 1 })}>
{this.state.count}
);
}
}
```
***
### πΉ 3.8 Controlled Component
```jsx theme={null}
function Input() {
const [value, setValue] = useState("");
return (
{item} ) // β
```
π Fix:
```jsx theme={null}
items.map(item => {item} )
```
***
### β 4.3 Infinite Re-renders
```jsx theme={null}
setCount(count + 1); // inside render β
```
***
### β 4.4 `this` Binding Issues (Class)
```jsx theme={null}
this.handleClick = this.handleClick.bind(this);
```
***
### β 4.5 Incorrect useEffect Dependencies
```jsx theme={null}
useEffect(() => {
fetchData();
}, []); // missing dependencies β
```
***
### β 4.6 Re-rendering All Components
* Happens when parent state updates unnecessarily
π Fix:
* Use `React.memo`
* Split components
***
## 5. β
Best Practices
***
### πΉ 5.1 Prefer Functional Components
* Cleaner
* Hooks-based
* Future-proof
***
### πΉ 5.2 Keep Components Small & Focused
* One responsibility per component
***
### πΉ 5.3 Use Destructuring
```jsx theme={null}
const Card = ({ title }) => {title} ;
```
***
### πΉ 5.4 Use Proper Naming
* PascalCase for components:
* `UserCard`
* `Navbar`
***
### πΉ 5.5 Avoid Inline Functions (Performance)
```jsx theme={null}
doSomething()} />
```
π Use:
```jsx theme={null}
const handleClick = () => doSomething();
```
***
### πΉ 5.6 Use Memoization
```jsx theme={null}
export default React.memo(Component);
```
***
### πΉ 5.7 Avoid Prop Drilling
π Use:
* Context API
* State management tools
***
### πΉ 5.8 Use Keys Properly
* Never use index unless necessary
* Use unique IDs
***
### πΉ 5.9 Optimize Re-renders
* `useMemo`
* `useCallback`
***
### πΉ 5.10 Folder Structure
```
/components
/Button
Button.jsx
Button.css
```
***
## π Summary
* Components are the **core of React architecture**
* Functional components + Hooks are the **modern standard**
* Class components are **important for legacy understanding**
* Proper structure and optimization lead to **scalable apps**
***
Below is a **senior-level conceptual interview set** on **React Components (Functional & Class Basics)** β focused on *depth, internal behavior, trade-offs, and real-world thinking*.
***
# π§ Advanced React Components β Interview Questions & Answers
***
## 1. Why did React shift from Class Components to Functional Components with Hooks?
### β
Strong Answer
The shift was driven by **simplicity, composability, and better logic reuse**.
### π Key Reasons
1. **Separation of Concerns**
* Class components split logic across lifecycle methods
* Hooks allow grouping related logic together
2. **Avoid `this` Complexity**
* Class components require binding
* Functional components eliminate `this`
3. **Better Code Reuse**
* Hooks replace HOCs and render props
4. **Less Boilerplate**
### π‘ Example Comparison
**Class (fragmented logic):**
```jsx theme={null}
componentDidMount() {
fetchData();
}
componentDidUpdate() {
fetchData();
}
```
**Functional (cohesive logic):**
```jsx theme={null}
useEffect(() => {
fetchData();
}, [dependency]);
```
### βοΈ Trade-off
* Hooks introduce **dependency array complexity**
* Requires understanding of closures
***
## 2. How does React internally treat Functional vs Class components?
### β
Strong Answer
Internally, both are treated as **units that produce React elements**, but:
* **Class Components** β instantiated with `new`
* **Functional Components** β invoked as plain functions
### π Internal Differences
| Aspect | Functional | Class |
| ------------- | --------------------------- | ----------------------- |
| Execution | Function call | Class instance |
| State storage | Hook list (linked to fiber) | Instance (`this.state`) |
| Lifecycle | useEffect hooks | Lifecycle methods |
### π§ Fiber Insight
React stores hooks in a **linked list inside Fiber nodes**, maintaining order across renders.
***
## 3. Why must Hooks be called unconditionally and in the same order?
### β
Strong Answer
React relies on **call order to map hooks to internal state slots**.
### π Internal Reason
React does NOT track hooks by name β it tracks by **position**.
```jsx theme={null}
// β WRONG
if (condition) {
useEffect(() => {});
}
```
### π‘ Why it breaks?
* On next render, hook order changes
* React mismatches state
***
## 4. What actually triggers a component re-render?
### β
Strong Answer
A component re-renders when:
1. **State changes**
2. **Props change**
3. **Parent re-renders**
4. **Context changes**
### π Important Insight
React does NOT deeply compare values β it relies on **reference equality**.
```jsx theme={null}
setState({}) // always new reference β re-render
```
### βοΈ Optimization
* `React.memo`
* `useMemo`
* `useCallback`
***
## 5. Why is direct state mutation a critical issue?
### β
Strong Answer
React relies on **immutability for change detection**.
### π Problem
```jsx theme={null}
state.count = 1; // β no re-render
```
React cannot detect the change because:
* Reference is unchanged
### β
Correct
```jsx theme={null}
setCount(prev => prev + 1);
```
***
## 6. How does React reconcile component trees?
### β
Strong Answer
React uses a **diffing algorithm (Reconciliation)**:
1. Compare old vs new Virtual DOM
2. Identify minimal changes
3. Update real DOM efficiently
### π Key Assumptions
* Elements of different types β replace
* Keys help track identity
***
## 7. Why are keys critical in list rendering?
### β
Strong Answer
Keys help React **preserve component identity across renders**.
### π Problem Without Keys
```jsx theme={null}
items.map((item, index) => doSomething()} />
```
### β
Fix
```jsx theme={null}
const handleClick = useCallback(() => {}, []);
```
***
## 11. How does React.memo work internally?
### β
Strong Answer
* Performs **shallow comparison of props**
* Skips re-render if props unchanged
### β οΈ Limitation
```jsx theme={null}
```
### βοΈ Why not inheritance?
* Tight coupling
* Less reusable
***
## 17. How does React batch state updates?
### β
Strong Answer
React groups multiple updates into a single render for performance.
```jsx theme={null}
setCount(1);
setCount(2);
```
β One render
### π React 18+
* Automatic batching even in async code
***
## 18. What are render phases vs commit phases?
### β
Strong Answer
| Phase | Description |
| ------ | ----------------- |
| Render | Calculate changes |
| Commit | Apply to DOM |
### π Insight
* Render phase can be interrupted
* Commit phase is synchronous
***
## 19. Why can excessive component re-rendering become a bottleneck?
### β
Strong Answer
Because React:
* Re-executes component functions
* Recalculates Virtual DOM
### π Real-world Impact
* Slow UI in large trees
### β
Fix
* Memoization
* Splitting components
***
## 20. How do you decide component boundaries in a real application?
### β
Strong Answer
Based on:
1. **Reusability**
2. **Separation of concerns**
3. **Performance isolation**
### π‘ Bad Design
* One giant component
### π‘ Good Design
* Small, focused, composable components
***
# π Final Takeaway
Senior-level understanding of components is about:
* Thinking in **render cycles**
* Understanding **React internals (Fiber, reconciliation)**
* Managing **performance trade-offs**
* Designing **scalable component architecture**
***
Below is a **senior-level MCQ set (18 questions)** on **React Components (Functional & Class Basics)**.
Each question targets **deep understanding, edge cases, and real-world behavior**.
***
# π§ Advanced React Components β MCQs
***
## 1. What happens when you update state with the same value?
```jsx theme={null}
const [count, setCount] = useState(0);
setCount(0);
```
### Options:
A. Component always re-renders
B. Component never re-renders
C. React may skip re-render using Object.is comparison
D. React throws an error
### β
Correct Answer: C
### π‘ Explanation:
React uses **Object.is comparison**. If the value is identical, React **bails out of re-render**.
### β Why others are wrong:
* A: Incorrect β React optimizes unnecessary renders
* B: Not always true (edge cases like forced updates)
* D: No error occurs
***
## 2. What is the output?
```jsx theme={null}
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
setCount(1);
}, []);
console.log(count);
return null;
}
```
### Options:
A. Logs 0
B. Logs 1
C. Logs 0 then 1
D. Infinite loop
### β
Correct Answer: C
### π‘ Explanation:
* Initial render β logs `0`
* Effect runs after render β updates state β re-render β logs `1`
### β Others:
* A/B: Ignore lifecycle timing
* D: No dependency loop
***
## 3. Why is this problematic?
```jsx theme={null}
useEffect(() => {
fetchData();
}, []);
```
### Options:
A. It runs too many times
B. It may use stale variables
C. It blocks rendering
D. It causes memory leaks always
### β
Correct Answer: B
### π‘ Explanation:
The empty dependency array can cause **stale closure issues** if `fetchData` depends on changing values.
***
## 4. What happens here?
```jsx theme={null}
const obj = { a: 1 };
setState(obj);
setState(obj);
```
### Options:
A. Two re-renders
B. One re-render
C. No re-render
D. Error
### β
Correct Answer: B
### π‘ Explanation:
Same reference β React batches updates β single re-render.
***
## 5. What is the issue with index as key?
```jsx theme={null}
items.map((item, index) => handleClick()} />
```
### Options:
A. Syntax error
B. Recreates function every render
C. Blocks UI
D. Causes memory leak
### β
Correct Answer: B
***
## 12. What does React.memo NOT handle well?
### Options:
A. Primitive props
B. Stable references
C. Inline objects/functions
D. Static components
### β
Correct Answer: C
***
## 13. What happens here?
```jsx theme={null}
const [state, setState] = useState({ count: 0 });
setState({ count: 0 });
```
### Options:
A. No re-render
B. Re-render occurs
C. Error
D. Infinite loop
### β
Correct Answer: B
### π‘ Explanation:
New object reference β triggers render.
***
## 14. Why is this unsafe?
```jsx theme={null}
state.count++;
setState(state);
```
### Options:
A. Syntax issue
B. Mutation breaks React detection
C. Causes crash
D. Async issue
### β
Correct Answer: B
***
## 15. What is true about class vs functional?
### Options:
A. Class is faster
B. Functional supports hooks
C. Class supports hooks
D. Functional cannot manage state
### β
Correct Answer: B
***
## 16. What happens during reconciliation?
### Options:
A. Full DOM replacement
B. Minimal updates via diffing
C. No updates
D. Random updates
### β
Correct Answer: B
***
## 17. What is the problem here?
```jsx theme={null}
useEffect(() => {
setCount(count + 1);
}, [count]);
```
### Options:
A. Runs once
B. Infinite loop
C. No update
D. Error
### β
Correct Answer: B
***
## 18. Why prefer composition over inheritance?
### Options:
A. Less code
B. More flexibility and reuse
C. Required by React
D. Better performance only
### β
Correct Answer: B
***
# π Final Insight
These questions test:
* **Render cycle understanding**
* **Hook behavior & pitfalls**
* **Reconciliation & identity**
* **Performance reasoning**
* **Real-world debugging mindset**
***
Below is a **senior-level coding problem set (18 problems)** focused on **React Components (Functional & Class Basics)**.
Each problem simulates **real-world scenarios**, emphasizes **thinking**, and includes **edge cases + reasoning**.
***
# π§ Advanced React Component Coding Problems
***
## 1. π Smart Counter with Sync Issues
### 𧩠Problem
Build a counter that:
* Increments correctly even with rapid clicks
* Logs correct value after async delay
### β οΈ Constraints
* Avoid stale state
* Must handle async updates
### β
Expected Behavior
* Clicking 3 times β count = 3
* Console logs correct count
### β οΈ Edge Cases
* Rapid clicks
* Async delays
### π‘ Solution
```jsx theme={null}
const Counter = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(prev => prev + 1);
setTimeout(() => {
console.log("Latest:", count); // stale
}, 1000);
};
return {count} ;
};
```
### π§ Fix Explanation
Use ref to avoid stale closure:
```jsx theme={null}
const countRef = useRef(count);
useEffect(() => {
countRef.current = count;
}, [count]);
```
***
## 2. π Prevent Unnecessary Re-renders
### 𧩠Problem
Optimize a child component so it doesn't re-render unnecessarily.
### Constraints
* Parent updates frequently
### π‘ Solution
```jsx theme={null}
const Child = React.memo(({ data }) => {
console.log("Rendered");
return {data.value}
;
});
```
### π§ Explanation
Use `React.memo` + stable props (`useMemo`)
***
## 3. π§ Derived State Bug
### Problem
Sync prop β state without causing inconsistency.
### Edge Case
* Prop updates asynchronously
### β Bad
```jsx theme={null}
const [value, setValue] = useState(props.value);
```
### β
Solution
```jsx theme={null}
useEffect(() => {
setValue(props.value);
}, [props.value]);
```
***
## 4. π Search with Debounce
### Problem
Create search input with debounce.
### Constraints
* Avoid excessive API calls
### π‘ Solution
```jsx theme={null}
useEffect(() => {
const id = setTimeout(() => {
fetchResults(query);
}, 500);
return () => clearTimeout(id);
}, [query]);
```
***
## 5. π¦ Dynamic Form Builder
### Problem
Render form fields dynamically based on config.
### Edge Case
* Unknown field types
### Solution Idea
Use component mapping:
```jsx theme={null}
const components = {
text: TextInput,
checkbox: Checkbox,
};
```
***
## 6. π Controlled vs Uncontrolled Hybrid
### Problem
Input should:
* Work controlled OR uncontrolled
### Solution
```jsx theme={null}
const isControlled = value !== undefined;
```
***
## 7. π Infinite Loop Debugging
### Problem
Fix infinite re-render:
```jsx theme={null}
useEffect(() => {
setData(fetchData());
}, [data]);
```
### Solution
* Remove `data` dependency
* Use proper trigger
***
## 8. 𧩠Compound Components Pattern
### Problem
Build `` system:
```jsx theme={null}
```
### Solution Idea
Use Context API
***
## 9. π Expensive Calculation Optimization
### Problem
Prevent heavy recalculation
### Solution
```jsx theme={null}
const result = useMemo(() => expensiveFn(data), [data]);
```
***
## 10. π Shared State Between Siblings
### Problem
Two components share state
### Solution
Lift state up OR Context
***
## 11. 𧡠Async Data Race Condition
### Problem
Avoid outdated API results overriding new ones
### Solution
```jsx theme={null}
let active = true;
if (active) setData(result);
return () => active = false;
```
***
## 12. π§ Custom Hook Extraction
### Problem
Extract reusable logic (e.g., window resize)
### Solution
```jsx theme={null}
function useWindowSize() {}
```
***
## 13. π― Conditional Rendering Trap
### Problem
Prevent component losing state when hidden
### β Bad
```jsx theme={null}
{show && {count} ;
}
```
### β Whatβs Wrong
Logs stale `count` value.
### π€ Why It Happens
Closure captures **value at render time**, not latest state.
### β
Fix
```jsx theme={null}
const countRef = useRef(count);
useEffect(() => {
countRef.current = count;
}, [count]);
setTimeout(() => {
console.log(countRef.current);
}, 1000);
```
### π§ Best Practice
* Use `useRef` or functional updates for async logic
***
## 2. π Infinite useEffect Loop
### β Code
```jsx theme={null}
useEffect(() => {
setData(fetchData());
}, [data]);
```
### β Problem
Infinite re-render loop
### π€ Why
* `setData` updates `data`
* dependency triggers effect again
### β
Fix
```jsx theme={null}
useEffect(() => {
setData(fetchData());
}, []);
```
### π§ Best Practice
* Avoid updating dependencies inside effect
***
## 3. π¦ Re-render due to Object Props
### β Code
```jsx theme={null}
doSomething()} />
```
### β Problem
Child re-renders unnecessarily
### π€ Why
New function reference each render
### β
Fix
```jsx theme={null}
const handleClick = useCallback(() => doSomething(), []);