Hello
; // Babel compiles to: const element = React.createElement("h1", { className: "title" }, "Hello"); ``` **Key differences from HTML:** * `class` becomes `className` (because `class` is a reserved word in JS) * `for` becomes `htmlFor` * All tags must be closed (``) * Style is an object: `style={{ color: "red", fontSize: "16px" }}` * Curly braces `{}` embed any JavaScript expression: `
{user.name}
` * You cannot use `if/else` directly in JSX -- use ternary or logical AND: `{isLoggedIn ?{name}
{email}
Hello
` is available as `props.children`
**Callback props for upward communication:**
```jsx theme={null}
function Parent() {
const [name, setName] = useState("");
return
-
{items.map((item) => (
// Always provide a unique key!
- {item.name} ))}
You typed: {value}
; } ``` ## Why it's important: Prevents inconsistent state across components.Theme is {theme}
; } ``` ## Context API Example: ```jsx theme={null} import { createContext, useContext } from "react"; const ThemeContext = createContext("light"); function GrandParent() { return (Theme is {theme}
; } ``` ## When to use Context: When data (like theme, user, locale) is needed globally or deeply nested.element, not the entire DOM return (
Virtual DOM Example
Count: {count}
` to ``), React destroys the old subtree and rebuilds
* If the type is the same, React only updates the changed attributes
* **Keys** help React identify which list items changed, were added, or removed
**What interviewers are really testing:** Whether you understand the trade-offs of the VDOM approach and can explain reconciliation, or just repeat "Virtual DOM is fast."
**Red flag answer:** "The Virtual DOM makes React faster than vanilla JavaScript." This is technically incorrect -- it makes React fast enough while being declarative.
**Follow-up:**
1. Svelte compiles away the Virtual DOM entirely. What is the argument for and against React's VDOM approach?
2. How do React's `key` props affect the reconciliation algorithm? What happens with unstable keys?
3. What is the difference between the "render phase" and the "commit phase" in React's rendering pipeline?
* **Controlled Component**: React controls the input's value using state
* **Uncontrolled Component**: The DOM handles the input's value directly via ref
## Code Example (Controlled):
```jsx theme={null}
import { useState } from "react";
function ControlledInput() {
const [value, setValue] = useState("");
return (
setValue(e.target.value)}
placeholder="Controlled"
/>
);
}
```
## Code Example (Uncontrolled):
```jsx theme={null}
import { useRef } from "react";
function UncontrolledInput() {
const inputRef = useRef();
const handleSubmit = () => {
alert(inputRef.current.value);
};
return (
<>
);
}
```
Controlled is best for validation or dynamic UI; uncontrolled can be used for performance or simple forms.
Hooks are special functions that let you use React features (state, lifecycle, context, etc.) in function components.
* `useEffect` allows you to perform side effects (like data fetching, DOM updates, event listeners)
* The dependency array controls when the effect runs
## Code Example:
```jsx theme={null}
import { useEffect, useState } from "react";
function FetchUser() {
const [user, setUser] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users/1")
.then((res) => res.json())
.then(setUser);
}, []); // runs once after component mounts
return
Custom Hooks allow you to reuse logic between components. You create one when multiple components share the same logic (e.g., fetching, resizing, authentication).
## Code Example:
```jsx theme={null}
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then(setData);
}, [url]);
return data;
}
// Usage
function User() {
const user = useFetch("https://jsonplaceholder.typicode.com/users/1");
return
In React 18, **automatic batching** means that all state updates—no matter where they happen (events, timeouts, async functions)—are grouped into a single re-render.
## Difference from Earlier Versions:
* **React 17 and earlier**: Only updates in React event handlers were batched
* **React 18**: All updates are batched automatically, even in async code
## Example:
```jsx theme={null}
function DataFetcher() {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState(null);
const fetchData = async () => {
setIsLoading(true); // Update 1
const result = await fetch('/api/data');
const json = await result.json();
setData(json); // Update 2
setIsLoading(false); // Update 3
};
}
```
## What Happens in React 18:
All 3 updates (`setIsLoading(true)`, `setData()`, and `setIsLoading(false)`) are batched together, and the component re-renders only **once**.
This reduces unnecessary re-renders and makes your app faster, especially when fetching data from APIs or using setTimeout/Promises.
Event handler batching means React groups multiple state updates made inside the same event handler (like a button click or input change) into a single re-render.
* ✅ This helps avoid multiple re-renders for each individual state update
* ✅ It's built-in and works in both class and functional components
* ✅ This behavior has existed in React even before version 18
## Real-Life Example:
```jsx theme={null}
function Form() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = () => {
setName('John Doe'); // 1st update
setEmail('john@example.com'); // 2nd update
// React batches these - only one re-render!
};
return (
When `handleSubmit` runs, React batches the two state updates, and the component re-renders only once, not twice. This makes the UI faster and avoids flicker or lag.
`flushSync()` is a special React method that tells React to apply state updates **immediately**—not later, not in the next render cycle, but right now.
Normally, React waits and batches updates to make rendering more efficient. But sometimes, you need the UI to update right away—synchronously.
## Example:
```jsx theme={null}
import { useState } from 'react';
import { flushSync } from 'react-dom';
function Counter() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
flushSync(() => {
setCount(count + 1); // force this update to be applied right away
});
console.log('Count after flushSync:', count); // logs updated count
};
return ;
}
```
## When to Use:
* **Testing**: When writing tests, you want to ensure all updates are done before checking the result
* **Real-time UI**: In collaborative editors or games where instant feedback is critical
* **Third-party libraries**: When working with libraries that depend on real-time DOM updates
Use it sparingly—React delays updates on purpose to improve performance. Only force sync updates when truly needed.
These help optimize unnecessary re-renders by caching:
* **React.memo** → skips re-rendering if props haven't changed
* **useMemo** → skips recalculating expensive values
* **useCallback** → skips recreating identical function references
These do **not** prevent re-renders — they help avoid **unnecessary** re-renders.
## Example with React.memo:
```jsx theme={null}
const Child = React.memo(({ name }) => {
console.log("Child rendered");
return
During a re-render with `useEffect`:
1. React re-executes the component function
2. Compares old + new Virtual DOM
3. Decides what to update in the real DOM (reconciliation)
4. **Cleanup function runs** (if dependencies changed or component unmounts)
5. New effect runs after the updated DOM is committed
## Real Example:
```jsx theme={null}
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Effect runs");
return () => {
console.log("Cleanup runs");
};
}, [count]);
return (
);
}
```
## On First Render:
* `count` is 0
* Renders JSX
* Prints: "Effect runs"
## Click Button → Re-render:
* `setCount(1)` triggers re-render
* JSX re-evaluated
* **Cleanup prints**: "Cleanup runs"
* **Then new effect prints**: "Effect runs"
Use memoization and avoid unnecessary renders:
* `React.memo()` → prevents re-render if props haven't changed
* `useMemo()` → memoizes values
* `useCallback()` → memoizes functions
* Avoid anonymous functions inside render if possible
## Code Example:
```jsx theme={null}
import React, { useState, useCallback, memo } from "react";
const Child = memo(({ onClick }) => {
console.log("Child rendered");
return ;
});
function Parent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount((c) => c + 1), []);
return (
<>
Both are optimization hooks, but they serve different purposes:
| Hook | Purpose | Returns |
| ------------- | ---------------------- | ------------------------------- |
| `useMemo` | Memoizes **values** | The memoized value |
| `useCallback` | Memoizes **functions** | The memoized function reference |
## useMemo Example:
```jsx theme={null}
function ExpensiveComponent({ items }) {
// Recalculates only when items change
const total = useMemo(() => {
return items.reduce((sum, item) => sum + item.price, 0);
}, [items]);
return
Don't overuse these hooks. They have their own overhead. Only use when you have performance issues.
Debouncing delays the execution of a function until after a specified time has passed.
## Example:
```jsx theme={null}
function SearchComponent() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
useEffect(() => {
if (!query) {
setResults([]);
return;
}
const timer = setTimeout(() => {
// Perform search
fetch(`/api/search?q=${query}`)
.then(r => r.json())
.then(setResults);
}, 500); // Wait 500ms after user stops typing
return () => clearTimeout(timer);
}, [query]);
return (
Debouncing reduces API calls and improves performance by waiting for the user to finish typing.
Use `useEffect` with a resize event listener:
## Example:
```jsx theme={null}
function ResponsiveComponent() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return
Handling async operations in React:
## In useEffect:
```jsx theme={null}
useEffect(() => {
async function fetchData() {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
}
fetchData();
}, []);
```
## In Event Handlers:
```jsx theme={null}
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(formData)
});
const result = await response.json();
console.log('Success:', result);
} catch (error) {
console.error('Error:', error);
}
};
```
## With Promises:
```jsx theme={null}
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => setError(error));
}, []);
```
You cannot make the useEffect callback itself async. Always define an async function inside useEffect and call it.
`useEffect` is commonly used for data fetching because it runs after render and can handle async operations.
## Example:
```jsx theme={null}
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchUser() {
try {
setLoading(true);
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
setUser(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
fetchUser();
}, [userId]); // Re-fetch when userId changes
if (loading) return
For better data fetching, consider React Query or SWR which handle caching, refetching, and error states automatically.
Error boundaries catch JavaScript errors in the component tree and display fallback UI.
## Error Boundary Example:
```jsx theme={null}
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Error caught:', error, errorInfo);
// Log to error reporting service
}
render() {
if (this.state.hasError) {
return
```
## Important Notes:
* Error boundaries only catch errors in **children components**
* They don't catch errors in event handlers, async code, or during SSR
* Use multiple error boundaries for granular error handling
Error boundaries must be class components. Functional components cannot be error boundaries (yet).
Dynamic form handling with validation:
## Example:
```jsx theme={null}
function DynamicForm() {
const [formData, setFormData] = useState({});
const [errors, setErrors] = useState({});
const handleChange = (name, value) => {
setFormData(prev => ({ ...prev, [name]: value }));
// Clear error when user types
if (errors[name]) {
setErrors(prev => ({ ...prev, [name]: '' }));
}
};
const validate = () => {
const newErrors = {};
if (!formData.email) newErrors.email = 'Email required';
if (!formData.email?.includes('@')) newErrors.email = 'Invalid email';
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
console.log('Form valid:', formData);
}
};
return (
);
}
```
For complex forms, consider libraries like React Hook Form or Formik for better validation and performance.
Lazy loading defers loading components until they're needed, reducing initial bundle size.
## How it works:
* Components are split into separate chunks
* Loaded only when required (route navigation, conditional rendering)
* Reduces initial JavaScript bundle size
## Example:
```jsx theme={null}
import { lazy, Suspense } from 'react';
// Lazy load the component
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
function App() {
return (
Loading...
}>
{user ? user.name : "Loading..."}
; } ``` ## Behavior based on dependencies: * `[]` → runs once (on mount) * `[var]` → runs when var changes * no array → runs on every render{user ? user.name : "Loading..."}
; } ``` ## When to use: When you want to abstract and share reusable React logic without duplicating code.
setName(e.target.value)}
/>
setEmail(e.target.value)}
/>
);
}
```
{name}
; }); function Parent() { const [count, setCount] = useState(0); return ( <>Count: {count}
Total: {expensiveValue}
;
}
```
## Example with useCallback:
```jsx theme={null}
const Child = React.memo(({ onClick }) => {
return ;
});
function Parent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(c => c + 1), []);
return {count}
Count: {count}
Total: ${total}
;
}
```
## useCallback Example:
```jsx theme={null}
function Parent() {
const [count, setCount] = useState(0);
// Function reference stays stable
const handleClick = useCallback(() => {
setCount(c => c + 1);
}, []);
return
setQuery(e.target.value)}
placeholder="Search..."
/>
);
}
```
## Custom Hook Version:
```jsx theme={null}
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}
// Usage
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
if (debouncedQuery) {
fetchResults(debouncedQuery);
}
}, [debouncedQuery]);
```
-
{results.map(item =>
- {item.name} )}
Window: {windowSize.width} x {windowSize.height}
;
}
```
## Custom Hook Version:
```jsx theme={null}
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
// Usage
function Component() {
const { width, height } = useWindowSize();
return {width} x {height}
;
}
```
Loading...
; if (error) returnError: {error}
; return{user?.name}
;
}
```
Something went wrong.
; } return this.props.children; } } // UsageUser ID: {id}
;
}
```
## Navigation:
```jsx theme={null}
import { useNavigate, Link } from 'react-router-dom';
function Navigation() {
const navigate = useNavigate();
return (
<>
About
);
}
```
{state.count}
{user?.name}
;
}
```
Loading...
; if (error) returnError: {error.message}
; return{user.name}
;
}
```
## Example - useLocalStorage:
```jsx theme={null}
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
return initialValue;
}
});
const setValue = (value) => {
try {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error(error);
}
};
return [storedValue, setValue];
}
```
{seconds}s
;
}
```
**3. Tracking previous values:**
```jsx theme={null}
function usePrevious(value) {
const ref = useRef();
useEffect(() => { ref.current = value; });
return ref.current;
}
```
**Key distinction from useState:**
| Aspect | useState | useRef |
| ---------------------------- | ------------------------- | ----------------------------------------------------- |
| Triggers re-render on change | Yes | No |
| Persists across renders | Yes | Yes |
| Mutable directly | No (use setter) | Yes (`ref.current = x`) |
| Best for | UI state (what user sees) | Internal state (timer IDs, DOM refs, previous values) |
**What interviewers are really testing:** Whether you know that not every piece of mutable data needs to be state. Using `useState` for timer IDs or render counts causes unnecessary re-renders.
**Red flag answer:** "useRef is for accessing DOM elements." That is one use case, but missing the mutable-value-without-re-render use case shows shallow understanding.
**Follow-up:**
1. Why does storing a timer ID in `useState` vs `useRef` cause different behavior? Which is correct?
2. How does `useRef` avoid the stale closure problem that `useState` can have in callbacks?
3. What is `useImperativeHandle` and when would you pair it with `forwardRef`?
Please login first
; } returnWelcome to Dashboard
; export default withAuth(Dashboard); ``` **Why HOCs are less common now:** Custom hooks solve the same problem (sharing logic) with less indirection. A `useAuth()` hook is simpler than `withAuth(Component)`. However, HOCs are still valid for: * **Cross-cutting concerns that need to wrap rendering** (error boundaries, layout wrappers) * **Third-party library integration** (React-Redux's `connect()` is a HOC) * **When you need to intercept or modify rendering**, not just add data **Common pitfalls:** * HOCs lose the original component's static methods -- use `hoist-non-react-statics` to copy them * Refs do not pass through -- use `React.forwardRef` to forward refs * Too many HOCs create "wrapper hell": `withAuth(withTheme(withRouter(Component)))` -- this is why hooks won **What interviewers are really testing:** Whether you understand the evolution from HOCs to hooks and can articulate trade-offs between the patterns. **Red flag answer:** "HOCs are outdated, just use hooks." They are less common but not obsolete -- understanding both shows pattern literacy. **Follow-up:** 1. How would you refactor a HOC into a custom hook? What changes and what does not? 2. What is the "wrapper hell" problem with HOCs and how do hooks solve it? 3. Can you compose multiple HOCs? What problems arise from deep HOC nesting? setPos({ x: e.clientX, y: e.clientY })}>
{render(pos)}
);
}
// Usage -- the consumer decides how to display the mouse position
Mouse at {x}, {y}
} /> ``` **The evolution of code sharing patterns in React:** | Era | Pattern | Pros | Cons | | ----- | ------------ | ------------------------------ | -------------------------------- | | 2015 | Mixins | Simple | Naming conflicts, tight coupling | | 2016 | HOCs | Composable | Wrapper hell, prop conflicts | | 2017 | Render Props | Explicit data flow | Callback nesting, less readable | | 2019+ | Custom Hooks | Clean, composable, no wrappers | Requires hooks rules knowledge | **When render props are still useful:** For libraries that need to give consumers complete control over rendering (e.g., Downshift, React Table v7, Formik's `
{items[index].name}
);
return (
{user.name}
;
}, (prevProps, nextProps) => {
// Custom shallow comparison
return prevProps.user.id === nextProps.user.id;
});
```
Something went wrong!
; return this.props.children; } } // UsageHello
WorldHello
React // Only this changes