Client Flashcards
Array Methods - map, filter, reduce, forEach, find
map() → Returns a new array.
filter() → Filters based on condition.
reduce() → Accumulates values.
forEach() → Iterates but doesn’t return a new array.
find() → Returns first matching element.
Arrow Functions
Concise syntax, inherits this. from outer scope, not for constructor
Cleaner and concise syntax for functions.
Does not bind its own this – inherits from the enclosing scope.
Arrow functions cannot be used as constructors.
Be cautious with this inside arrow functions (especially in React event handlers).
Avoiding Unnecessary Context Re-renders
Purpose: Minimize re-renders of components consuming context values.
When to Use:
When you’re using React context for global state and you want to avoid re-renders of components that don’t need the updated context.
You can wrap individual components with useContextSelector (from third-party libraries) to select a smaller part of the context.
When It Becomes Overkill:
For simple context values that don’t trigger many re-renders.
Using too many context values or deeply nested context can actually hurt performance.
Best practices while designing states
Use state only when data changes over time. Else use const or props. Derive rest from state or props. Avoid derived state to avoid redundancy.
Minimal State : Less state → Fewer bugs
Group Related State : Easier updates
Separate unrelated state to avoid unnecessary re-renders. Avoid Deep Nesting : Flatten state when possible. Minimize state objects or use primitives when possible.
Functional Updates : Avoid stale state issues
Lazy Initialization : Initial calculation only once
Local State vs Lifted State : Simplifies structure
Controlled Inputs : Form inputs synced with state, Predictable input handling
Performance for Large Lists : Store IDs, use virtualization, Avoid unnecessary re-renders
Separate UI & Server State : Loading/Error separate from data, Improves readability & avoids mixing concerns
Can custom hooks return JSX?
No, Custom hooks should return state, functions, or data – not JSX. If you return JSX, it’s a component, not a hook.
Can useCallback cause stale state issues?
Yes, if state is used inside the callback, and it’s not part of the dependencies.
Example (WRONG):
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1); // Using stale `count`
}, []);
The callback captures count = 0 forever due to empty dependency array.
Correct Version:
const increment = useCallback(() => {
setCount((prevCount) => prevCount + 1);
}, []);
Always use functional updates inside setState when state is part of a memoized callback.
Can useCallback work with async functions?
Yes, but the async function is still re-created on dependency changes.
Example:
const fetchData = useCallback(async () => {
const data = await fetch('/api');
console.log(data);
}, []);
No special behavior for async – still a function reference.
Can useContext cause performance issues?
Yes, if large components depend on context values that change frequently.
Re-renders every consumer when context value changes, even if only part of the context is used.
Can useContext lead to stale state issues?
Rarely, because context re-renders the consumer when the value changes.
But if context value includes state, and you destructure it wrong, you can introduce stale state.
const { user } = useContext(UserContext);
If user changes but you cached it elsewhere, stale data issues may occur.
Always consume context values directly inside the component render scope.
Can useContext replace state management libraries like Redux?
For small apps, yes.
For large apps with complex state and performance concerns, Context alone can become problematic.
Context doesn’t solve state management complexity – it only avoids prop drilling.
Can useMemo memoize a component?
No, useMemo memoizes values, not React components.
For memoizing components, use React.memo instead.
Can useMemo result in a stale value problem?
Yes, if dependencies are incorrect or missing, you may get stale values.
Ensure all dependencies are specified accurately in the dependency array.
Example (WRONG):
const filteredList = useMemo(() => filterList(list), []);
If list changes, this memoized value won’t update, causing stale state.
Correct:
const filteredList = useMemo(() => filterList(list), [list]);
Can useMemo return a function?
Yes, but useCallback is preferred when memoizing functions.
useMemo is for values, useCallback is for functions.
Example:
const memoizedFunction = useMemo(() => () => doSomething(), []);
Better:
const memoizedFunction = useCallback(() => doSomething(), []);
Can you compare performance implications of using useState vs. useReducer in large applications?
Multiple state updates → Multiple re-renders.
Tightly coupled state variables can cause redundant updates.
Difficult to maintain when state dependencies increase.
Multiple state variables can cause many re-renders when updated independently. Single state object → one re-render per dispatch.
Complex State Updates Updating nested or dependent state can lead to stale state issues. Reducer centralizes logic, improving consistency.
Function Identity Inline setState functions may change frequently, causing unnecessary re-renders in children. dispatch is stable across renders, minimizing re-renders.
Can you convert an uncontrolled component to a controlled component?
Yes, initialize state with ref.current.value, then control it.
const inputRef = useRef();
const [value, setValue] = useState('');
useEffect(() => {
setValue(inputRef.current.value);
}, []);
<input ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} />
Can you explain useContext with an example? When is it preferred over passing props?
useContext accesses the value from React Context:
const UserContext = createContext(); const user = useContext(UserContext);
Preferred over props when:
Deep component trees → Avoid prop drilling.
Global state (e.g., theme, authentication).
Can you optimize performance with useReducer()?
Memoize the reducer (if heavy).
Memoize context values if using with Context.
Avoid re-creating action objects inside render
Split state into smaller reducers if it’s too complex.
Can you replace Redux with useReducer()?
For small to medium apps, useReducer() + Context can replace Redux. Redux is better for:
Large-scale apps.
Middleware support (e.g., for side effects).
DevTools debugging.
Can you think of a scenario where Virtual DOM might not provide a performance benefit?
Small Static UI: Minimal DOM updates → Overhead of diffing Virtual DOM is unnecessary.
Canvas / WebGL: Graphics handled outside DOM → React overhead adds no value.
Frequent Animations (e.g., charts): Constant re-renders → Virtual DOM diffing can become a bottleneck.
Takeaway: Heavy animations → React not always best.
Can you use useReducer() with Context API?
Yes, useReducer() is often combined with Context API to manage global state.
const StateContext = createContext();
const DispatchContext = createContext();
Provides state and dispatch globally.
Better than prop drilling.
Class vs Function Components
boilerplate, performance, memory weight, testing, reusability
Functional : Cleaner, less boilerplate. Potentially better (React optimizes function components with hooks, React.memo, Lighter without lifecycle machinery, Easier to test (pure functions), Hooks like useCustomHook() promote reuse
Class : Verbose with this binding, Slightly slower (more complex reconciliation in class), More memory overhead due to class instances, Harder to test due to this and lifecycle methods, Requires HOCs or render props for reuse
Class when legacy or needs complex lifeclycle ComponentDidMount
Closures
A function “remembers” the variables from its outer scope function even after the outer function has finished executing.
When a function is created inside another function, it has access to the outer function’s variables. If the inner function is returned or passed outside the outer function, it still retains access to those variables even after the outer function finishes execution.
function Counter() {
const [count, setCount] = React.useState(0);
function increment() {
setCount(count + 1);
}
return <button onClick={increment}>Count: {count}</button>;
}
Here, increment() closes over count. It remembers count even when the component re-renders.
Without closures, increment() would lose access to count.
Closures and React
State updates in React often use closures to remember previous values (e.g., in setState or useState).
Event handlers and callbacks (like those in useEffect) are closures that allow functions to remember state, props, or other values even after the component has re-rendered.
Optimization hooks like useCallback leverage closures to memoize functions and avoid unnecessary re-renders.
Closures allow React to manage private state and encapsulate logic within components, which leads to more modular and maintainable code.
Code Splitting (using React.lazy and Suspense)
Purpose: Break down your app into smaller bundles, so users only download what’s needed for the current page or component, reducing initial load time.
When to Use:
For large applications with multiple routes, where loading everything upfront would be inefficient.
When you have components or features that are not immediately needed (e.g., modal, settings page).
When It Becomes Overkill:
For small apps or apps where most components are always required immediately.
For small, fast-loading components, splitting them may cause more overhead than the benefit.
Can we have a function without a return inside App.js?
Yes, a function without a return statement is possible.
In that case, your component will not render anything in UI.
The common use case is for logging purpose.
Difference between DOM and HTML
HTML is a mark up language to structure/blueprint a web page. It is static text file and can’t change by itself.
DOM (Document Object Model) is programming interface that represents structure of HTML as tree of objects in-memory. Elements, attributes, texts are objects/nodes. JS can access, traverse and modify it dynamically
Critical aspects of useState
useState preserves state between re-renders. It resets only when the component unmounts and re-mounts or when the key (in lists) changes.
Updating state inside the render phase creates an infinite loop. Instead, use an event handler or useEffect when necessary
Lazy Initialization : Initial value is set only on first render. It is ignored on re-renders which means a function call in useState is run every render but ignored. Hence use a callback for expensive calculations
const [value, setValue] = useState(() => computeExpensiveValue());
setState is asynchronous. Accessing state immediately after will give old value.
setCount(count + 1); setCount(count + 1);
count won’t update immediately
~~~
setState(prev => prev + 1)
~~~
State should be immutable. Don’t mutate. Replace state because it does not merge like class component. Primitives replace, objects/arrays need spreading
setUser({ name: 'John' }); // This replaces the entire user object.
setUser(prev => ({...prev, name: 'John'}))
Debouncing or Throttling (for Input/Scroll Events)
Purpose: Limit the number of times an event handler (like typing, scrolling) is triggered to avoid unnecessary re-renders or function executions.
When to Use:
For handling user input or scrolling events where rapid updates can lead to performance issues.
For search input, window resizing, or scrolling where you don’t need to react to every change immediately.
When It Becomes Overkill:
For events that don’t trigger performance issues, or for cases where you need the response to be as immediate as possible.
index.html, index.js, index.css, App.js, reactDOM
index.html: Single page for React application.
App.js: Root component or container for other components. Defines the structure, layout, and routing in the application.
Index.css(Optional): This is a global CSS file that serves as the main stylesheet for the entire application.
index.js: Entry point for JavaScript. Renders the main React component (App) into the root DOM element.
ReactDOM is a JavaScript library that renders components to the DOM or browser.
NPM(Node Package Manager) is used to manage the dependencies for your React project, including the React library itself.
Declarative vs Imperative
Imperative syntax involves step by step process to achieve a particular goal.
vanilla JavaScript, jQuery has an imperative syntax.
Declarative syntax focuses on describing the desired result without specifying the step-by-step process.
JSX in React is used to write declarative syntax.
Tell the browser HOW to update the DOM. Describe WHAT the UI should look like based on state. React updates it.
✅ Less prone to bugs as React handles state synchronization.
Do functional components suffer from “stale state” issues?
Stale state happens when closures capture outdated state values in asynchronous code
State values are captured at the time of rendering.
In functional components, the entire function re-executes on every render.
JavaScript closures capture variables (like state) from from the render where they were created (function is executed).
If you create an event handler or setTimeout callback inside a render, it captures the state from that specific render cycle.
When the callback executes later, it still references the state from that render, not the updated state from newer renders.
Functional State Update (Recommended) – Gets the latest state:setCount(prevCount => prevCount + 1);
useRef (For Non-Reactive Values) – Tracks the latest value without re-rendering:
const countRef = useRef(0);
useEffect(() => {
countRef.current = count;
}, [count]);
Does useCallback prevent the function from re-running?
No, it only memoizes the function’s reference.
It does not prevent the logic inside the function from executing when called.
Does useCallback work with event handlers like onClick?
Yes, it is common to use useCallback for event handlers passed to child components.
But avoid it for simple event handlers that don’t depend on props/state because the cost of useCallback can outweigh its benefit.
Example (OK):
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
Example (Unnecessary):
<button onClick={() => console.log('Clicked')}>Click</button>
No need for useCallback if the event handler is inline and simple.
Does useContext trigger a re-render if the context value doesn’t change?
No re-render if the context value is the same (reference equality).
Re-render if the value is a new object/array on every render (even if logically identical).
Example (Bad):
<ThemeContext.Provider value={{ mode: 'dark' }}> // New object every render
Fix with useMemo:
const value = useMemo(() => ({ mode: 'dark' }), []);
<ThemeContext.Provider value={value}>
Does useMemo prevent re-renders of components?
No, useMemo does not prevent re-renders directly.
It only memoizes a value; to prevent component re-renders, you need React.memo.
Example:
const ChildComponent = React.memo(({ value }) => {
console.log('Child Rendered');
return <div>{value}</div>;
});
Ensuring React Component Render is a Pure Function
Same inputs → same output.
No side-effects (e.g., no setting state, no data fetching, no logging, no timers inside render).
Explain useMemo and useCallback. How do they improve performance, and when should you avoid them?
useMemo Memoizes a value to avoid expensive recalculations. useMemo(() => expensiveComputation(a, b), [a, b])
useCallback Memoizes a function to avoid creating a new function on every render.useCallback(() => doSomething(), [dependency])
Improves Performance:
* Avoid unnecessary recalculations.
* Prevent child components from re-rendering when receiving function props.
When to Avoid:
* Premature optimization.
* Use only when expensive calculations/functions are involved.
How Can You Handle Multiple Input Fields in a Controlled Form?
Use an object state with dynamic keys:
const [formData, setFormData] = useState({ name: '', email: '' });
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
<input name="name" value={formData.name} onChange={handleChange} />
<input name="email" value={formData.email} onChange={handleChange} />
Key Idea:
[e.target.name]: value dynamically updates state based on input name.
How can you measure Virtual DOM performance?
React DevTools Profiler identifies slow renders and helps optimize Virtual DOM usage.
How can you optimize context consumption for performance?
Split Contexts:
Separate unrelated state into different contexts.
Example: UserContext, ThemeContext, ModalContext.
Selective Context Usage:
If only part of a state is needed, split that state into smaller contexts.
Memoize Provider Values:
const value = useMemo(() => ({ user, updateUser }), [user]);
<UserContext.Provider value={value}>
How do useMemo and useCallback differ?
useMemo useCallback
Returns a memoized value. Returns a memoized function.
Used for expensive calculations. Used when passing stable callbacks to children.
useMemo(() => compute(), [deps]) useCallback(() => handleClick(), [deps])
How do you handle a situation where a child needs to update data from props?
Lift the state up to the parent and pass a callback function as a prop to the child. The child invokes the callback to request a state update from the parent.
How do you handle form inputs in React?
Prefer using controlled inputs. This means the input field’s value is controlled by React state. I bind the input’s value to state and update state using onChange. This ensures that React is the single source of truth.
const [name, setName] = useState('');
<input value={name} onChange={(e) => setName(e.target.value)} />
This approach makes input behavior predictable and is especially useful for form validation, resetting inputs, or conditional logic.
How Do You Handle Form Validation in a Controlled Component?
const [email, setEmail] = useState('');
const [error, setError] = useState('');
const validateEmail = (e) => {
const value = e.target.value;
setEmail(value);
setError(value.includes('@') ? '' : 'Invalid email');
};
<input value={email} onChange={validateEmail} />
{error && <p>{error}</p>}
Key Concept: Validate on every onChange → State-based validation.
Or, validate on submit: Validate all fields before submission.
How do you handle side effects like API calls inside useReducer()?
useReducer() itself is synchronous and doesn’t handle side effects.
To handle side effects (like API calls):
Use useEffect() in combination with dispatch actions.
dispatch() is synchronous.
However, React may batch updates asynchronously in some cases.
How do you manage API data fetching in React?
I always separate 3 states when fetching data:
Data (e.g., orders) – Holds API response.
Loading – Boolean to indicate API is in progress.
Error – Holds error message (if any).
This avoids mixing concerns. If I use data as null to mean loading, it becomes hard to read and extend later.
Fetched in useEffect hook
How do you manage dependencies in useCallback?
List all external state/props that the callback depends on.
If unsure, include everything – React will warn you about missing dependencies.
How do you optimize performance when rendering large datasets in React?
When working with large datasets like 10,000+ orders, rendering everything can crash the browser. So, I use two key techniques:
Store only IDs in state instead of entire objects for selection:const [selectedIds, setSelectedIds] = useState([]);
This keeps state lightweight and prevents unnecessary re-renders.
Virtualization (e.g., react-window):
It renders only the items visible on the screen. Instead of rendering 10,000 rows, it renders maybe 10 rows at a time.import { FixedSizeList as List } from 'react-window';
This improves performance drastically for large lists.
How do you reset a controlled form after submission?
const [formData, setFormData] = useState({ name: '', email: '' });
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
setFormData({ name: '', email: '' }); // Reset state
};How does dispatch differ from setState in terms of stability across renders?
setState can be inline (e.g., in event handlers), and its function identity may change across renders if not wrapped in useCallback.
dispatch from useReducer is always stable — does not change across renders.
This stability prevents unnecessary re-renders in child components relying on dispatch.
How does React batch state updates with hooks? When does it not batch?
React batches multiple state updates inside event handlers:
const handleClick = () => {
setCount(count + 1);
setName('John');
// React batches these updates into a single render
};
React does NOT batch updates inside async operations like setTimeout:
setTimeout(() => {
setCount(count + 1);
setName('John');
// This causes two separate re-renders before React 18
}, 1000);
React 18+ Automatic Batching:
Even async updates are batched by default.
How does React Hook Form optimize performance for forms?
Uncontrolled inputs with ref internally.
Tracks only fields that change.
Avoids re-rendering the entire form on every keystroke.
How does react optimize rendering
○ Async Rendering: React uses a technique called asynchronous rendering for smoother user experiences, enabling large apps to remain responsive.
○ Concurrent Mode: React’s concurrent rendering capabilities allow React to prioritize updates that are more important (e.g., user interactions) over less critical updates (e.g., network responses).
How does useContext work internally?
Reads the nearest Provider’s value for the context.
Reacts to changes: If the value inside Provider changes, all consumers (using useContext) re-render.
Context lookup happens during render phase.
How does useEffect work? How is it different from lifecycle methods like componentDidMount in class components?
useEffect() is a React Hook that handles side effects in functional components.
Side effects = Any logic that interacts with the outside world or is not directly related to rendering:
Fetching data (API calls).
Updating the DOM (e.g., title, event listeners).
Subscriptions (e.g., WebSockets, timers).
Before hooks, lifecycle methods like componentDidMount(), componentDidUpdate(), and componentWillUnmount() were used.
useEffect() combines all these into one function inside functional components.
[] : componentDidMount
[dependency] : componentDidUpdate
return : componentWillUnmount
Class Components: Lifecycle methods are scattered across the component.
Functional Components: useEffect combines them in one place (setup + cleanup).
How does useMemo improve performance?
Avoids recalculations: Skips recalculating expensive values on every render.
Reduces re-renders: Helps prevent child components from unnecessary re-rendering when memoized values (e.g., objects) are passed as props.
Explain state update in React
Same synchronous event → State updates are batched → Single re-render.
Async code (e.g., setTimeout) → No batching → Multiple re-renders.
useState() is a React Hook that adds state to functional components. It gives an array. state → Holds the current state value.
setState() → Updates state and triggers a re-render.
Initial Value Set once when the component is first rendered.
Every state update causes a re-render.
React remembers state between renders.
Each render gets its own snapshot of state.
When setState() is called:
State is updated.
Component re-renders.
Updated state value is used in the next render.
Batching (React 18) Multiple state updates in event handlers are batched into one re-render for efficiency.
Functional Updates Use a function inside setState() when new state depends on previous state.
How hooks relate to Virtual DOM
Hooks trigger renders (except useRef).
Every render = New Virtual DOM tree.
Diffing compares Virtual DOM trees.
Minimal changes update the Real DOM.
Effects (useEffect) run AFTER Virtual DOM has updated the Real DOM.
Too many state updates → Too many Virtual DOM calculations.
React.memo + useCallback → Reduce child re-renders.
useMemo → Avoid costly calculations inside Virtual DOM creation.
useEffect → Outside Virtual DOM; Side-effects only.
useRef → Bypass reactivity, manipulate DOM without Virtual DOM concerns.
How to handle 404 Page Not Found in React Router?
Use a * path:
~~~
<Route path=”*” element={<NotFound></NotFound>} />
~~~
How to Handle Forms in React?
Track each field using useState:
const [name, setName] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log(name);
};
Handle Submission:
<form onSubmit={handleSubmit}>
<input value={name} onChange={(e) => setName(e.target.value)} />
<button type="submit">Submit</button>
</form>
How to Implement Routing in React?
Install React Router:
~~~
npm install react-router-dom
~~~
Set Up Router in App.js:
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
Navigate Between Pages:
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}
How to prevent unnecessary re-renders?
useMemo → Memoize expensive values.
useCallback → Memoize functions.
React.memo() → Prevent child re-renders if props don’t change.
How to Protect Routes (Authentication)?
Custom component like ProtectedRoute checking isAuthenticated.
How Virtual DOM Works, Reconciliation
Every time state or props change, React re-renders the component.
React creates a new Virtual DOM tree based on the updated state/props.
React compares the new Virtual DOM with the previous Virtual DOM using a process called Diffing (or Reconciliation)
Finds minimal changes and batch update the real DOM efficiently
➡️ Diffing Algorithm:
O(n) complexity using key optimizations
Compares only the element type and key, no deep comparison
Key Optimizations:
React uses a heuristic approach where it only compares nodes of the same type (e.g., <div> with <div>).
React uses keys (when available) to identify components in lists, helping to improve diffing efficiency.
React Fiber reconciliation engine to compare, apply minimal updates
How would you convert a class component to a functional one?
- Remove the class syntax: Replace the class declaration with a functional component declaration (a function).
- Replace the constructor: Use useState to manage state instead of the constructor.
- Replace lifecycle methods: Use useEffect for methods like componentDidMount ([]) , componentDidUpdate([,,,]), componentWillUnmount (return function)
- Event handlers in class was arrow functions Those can be written as regular functions.
- The render method in the class component is replaced by the function body in the functional component. JSX is returned directly from the function.
How would you handle conditional fields in a controlled component?
const [hasPhone, setHasPhone] = useState(false);
const [phone, setPhone] = useState('');
{hasPhone && (
<input value={phone} onChange={(e) => setPhone(e.target.value)} />
)}
<button onClick={() => setHasPhone(!hasPhone)}>Toggle Phone</button>
Key Idea:
Conditionally render input but still control its state.
How would you migrate useState to useContext when state needs to be shared globally?
Extract state and logic into a context provider.
Wrap the app in the provider.
Replace useState calls with useContext consumers.
How would you prevent re-rendering of all consumers when only part of context changes?
Split the context into separate providers for different concerns.
Use selector patterns or custom hooks to derive specific parts of context.
How would you structure context for global UI state (like modal, toast notifications)?
Create a dedicated UIContext.
Store isModalOpen or toastMessage in this context.
Update it using a reducer if state grows.
const UIContext = createContext();
const UIProvider = ({ children }) => {
const [state, setState] = useState({ modalOpen: false });
const value = { state, setState };
return <UIContext.Provider value={value}>{children}</UIContext.Provider>;
};
const Modal = () => {
const { state, setState } = useContext(UIContext);
return state.modalOpen ? <div>Modal Content</div> : null;
};
If props are immutable, what happens if I change a prop inside a child component?
Mutating a prop inside a child doesn’t affect the parent or trigger a re-render. It breaks the unidirectional data flow pattern and will be overwritten when the parent re-renders. I never mutate props
If you forget to pass a required prop, what happens?
If the prop is used without a default, it results in undefined, often causing undefined is not a function or similar errors. I use default props or PropTypes to catch missing props early.
In What Scenarios Might Using Uncontrolled Components Be Advantageous?
Third-party Libraries: E.g., integrating non-React libraries (jQuery, etc.) that manipulate the DOM.
Performance Critical Forms: When frequent re-rendering is costly. E.g., large forms with dozens of inputs.
Initial Form Fill: Forms that load default values but don’t change often.
File Uploads: File inputs typically work better with ref.
const fileInputRef = useRef(null);
const handleSubmit = () => {
console.log(fileInputRef.current.files[0]);
};
<input type="file" ref={fileInputRef} />
Inline Functions in JSX – Good or Bad?
Inline functions are fine in most cases, but in lists or heavy renders, they create a new function every render. This can cause unnecessary child re-renders if the child depends on function reference stability. I use useCallback for performance-sensitive scenarios.
JSX (JavaScript XML), Transpiling
Syntax extension to JS to combine HTML like syntax with Javascript that transpiles into JavaScript. It’s syntactic sugar over React.createElement(). It helps us write HTML-like code in JS
- Readability: Easier to visualize structure.
- JavaScript Power: Embed logic into the UI easily.
Transpiling : Convert modern JSX syntax to plain JavaScript. JSX itself is not understood by browsers.
Babel (Transpiler) compiles JSX to React.createElement() calls.
JSX Syntax & Rules. Why CamelCase?
JavaScript inside {} {2 + 3}, {user.name}
One Parent Element Wrap everything inside <div> or <>…</> (Fragments).
Attributes use camelCase className, onClick, tabIndex
Self-closing tags <img></img>, <input></input>
Inline Styles { style: { color: ‘red’, fontSize: ‘14px’ } }
React uses DOM properties, not HTML attributes: In HTML, attributes are case-insensitive.
In JS DOM API, properties are camelCase.
Key Features of React
- Component based architecture
- Virtual DOM
- JSX
- Reusability and Composition
- Declarative syntax
- React Hooks
- Community and Ecosystem
Component-based: UI is broken into reusable components each handles state and logic. SoC
Reusability: Once you create a component, you can re-use it in different parts of your application or even in multiple projects.
Composition: Composition is creating new and big components by combining existing small components. Its advantage is, change to one small component will not impact other components.
public, src, npm, node_modules
Public folder contains static assets that are served directly to the user’s browser, such as images, fonts, and the index.html file.
src folder is used to store all the source code of the application which is then responsible for the dynamic changes in your web application.
NPM(Node Package Manager) is used to manage the dependencies for your React project, including the React library itself.
node_modules folder contains all the dependencies of the project, including the React libraries.
Limitations of the Virtual DOM
* Memory Overhead: ○ The virtual DOM does consume memory since it is an in-memory representation of the actual DOM. * Not a Silver Bullet: While React’s virtual DOM provides performance benefits, it's not a universal solution for all performance issues. For example, performance can still degrade with very large or deeply nested components. * Complexity in Large Apps: ○ In extremely large applications, managing the virtual DOM and optimizing performance might still require manual intervention, such as using React.memo, PureComponent, or shouldComponentUpdate.
Why Closures important
Data encapsulation and privacy: You can create functions that access variables in the outer scope without exposing them globally.
Maintaining state in asynchronous code (e.g., setTimeout, callbacks, promises).
Creating function factories (functions that return other functions with customized behavior).
Partial application and currying.
Pure Component - Definition
A Pure Component in React is a special type of component that only re-renders when its props or state change in a deeply meaningful way (i.e., when their reference changes). It’s optimized for performance, as it shallowly compares the props and state before deciding whether the component needs to re-render.
Regular component re-renders every time it receives new props or state, even if the new props or state are the same as the previous ones.
Parent re-render, child re-renders, pure only re-render if prop chng
React Fragments
Allows grouping multiple elements without adding extra DOM nodes (no <div> wrapper).
- Clean DOM: Avoids unnecessary nesting.
- Syntax: <></>
React Optimization
Memoization: Use React.memo, useMemo, and useCallback to avoid unnecessary re-renders, but avoid them for small, fast components.
Code Splitting: Break down your app into smaller chunks for large apps to improve load times.
Virtualization: Use for large lists, not small datasets.
Event Handling: Use debouncing or throttling for high-frequency events (e.g., input typing, scroll).
Keys: Always provide unique keys for list items to avoid reconciliation issues.
State Management: Be mindful of the complexity added by hooks like useReducer or useRef and avoid them when not necessary.
Disadvantages of React
React has a steep learning curve, frequent updates and new libraries , JSX complexity, SEO issues (without SSR), potential performance issues, and relies on third-party libraries for routing and state management.
SEO Challenges:
React is client-side rendering by default. Search engines may struggle to index content, though Server-Side Rendering (SSR) with Next.js can solve this.
Lack of Built-in Routing & State Management:
React is just a view library. For routing (React Router) or global state (Redux, Context API), you need third-party libraries.
When It Might Not Be Worth It:
Static Content: For static websites (e.g., a landing page), HTML + CSS + JS is often simpler and faster.
Simple Apps with Minimal Interactivity: Plain JS or frameworks like Vue (easier) could be quicker.
React.PureComponent and React.memo (for Class Components and Functional Components)
Purpose: Prevent unnecessary re-renders by doing a shallow comparison of props and state.
When to Use:
When you are dealing with complex components that don’t need to re-render unless props or state have changed.
When props are primitive values or shallow objects/arrays.
When It Becomes Overkill:
When the component is simple and re-renders are fast, the overhead of comparison might be unnecessary.
If the component relies on deep comparison (e.g., nested objects or arrays), PureComponent and React.memo won’t help much, and the shallow comparison may cause bugs.
Short-circuit Evaluation (&& and ||)
Nullish Coalescing (??)
Optional Chaining (?.)
&& → Returns second operand if the first is true.
|| → Returns second operand if the first is false.
?? -> Returns the right-hand side operand if the left is null or undefined.
Safely access nested properties.
const user = { profile: { name: ‘John’ } };
console.log(user.profile?.name); // ‘John’
console.log(user.profile?.age); // undefined
Should we memoize dispatch
dispatch Is Stable (Does Not Change Between Renders)
No need to memoize dispatch with useCallback.
dispatch function is the same across renders.
Unlike setState callbacks, you don’t need to pass latest state to handlers.
State update incorrect
const [items, setItems] = useState([]);
items.push(‘new item’);
setItems(items);
Mutating outside updater function does not create new reference. No re-render trigger
Correct way
setItems((prevItems) => […prevItems, ‘new item’]);
Truthy & Falsy Values
Falsy: 0, ‘’, null, undefined, NaN, false
Truthy: Everything else.
Unidirectional Data Flow
Props: Data flows from parent to child. Components cannot modify props; they receive data & render accordingly. Child can only notify using callbacks
- Predictability: Changes are easier to trace.
- Debugging: Data origin is clear.
Lexical Scope and Closures
JavaScript’s scoping model is lexical: it determines the scope of variables based on their position in the source code, not where the function is executed.
When a function is defined inside another function, it lexically “captures” the scope in which it was created. This means that even if the inner function is called outside its original scope, it still has access to variables in its outer scope because of the closure.
useState(initialValue) vs. useState(() => initialValue)
useState(props.initialValue) Evaluates props.initialValue on every render, but only uses it on the first render. On re-renders, initialValue is ignored, but it is still evaluated every time. If props.initialValue is a simple value (e.g., string/number), this is fine.
useState(() => props.initialValue) Evaluates the function only on the first render → Result is stored as initial state. Subsequent renders do not evaluate it again. Useful if initial state setup is expensive (e.g., calculations, API calls, large objects).
var vs let, const
let → Block-scoped (within {}), can be reassigned
const → Block-scoped, cannot be reassigned (but objects/arrays can be mutated)
var → Function-scoped, can be redeclared, hoisted, avoid using it
Virtual DOM, Difference between real DOM and virtual DOM
In-memory representation of the real DOM. React calculates differences (diffing) and updates only changed parts and in batches
Real DOM is browser representation of HTML and virtual DOM is lightweight in-memory JS representation of real DOM. Direct modification of real DOM is slow and re-renders whole page. Virtual DOM helps reduce unnecassary updates to real DOM. React updates virtual DOM, compares with previous, finds changes then updates real DOM in batches
Virtual DOM and Browser Optimization
- Rendering Pipeline: The browser renders the DOM through multiple steps like layout, painting, and compositing. React optimizes how it interacts with this pipeline through the virtual DOM to reduce unnecessary reflows and repaints.
- Reduced Layout Thrashing: React minimizes layout thrashing, which occurs when the browser has to recalculate the layout after every DOM update.
○ The virtual DOM abstracts away the differences between various browsers and platforms, allowing React to provide a consistent experience across environments.
Virtualization (e.g., using react-window or react-virtualized)
Purpose: Render only visible items in large lists, reducing DOM nodes and improving performance when dealing with large lists of data.
When to Use:
For large lists or tables that involve rendering hundreds or thousands of items.
When scrolling through long lists, where rendering everything at once would be inefficient.
When It Becomes Overkill:
For small lists or static data that don’t require virtualization.
If the UI performance is already good without virtualization, and it introduces additional complexity.
Why should we not use var
let,const - predictable,avoid bugs, strict no redeclaration, error catch with TDZ
Avoiding var ensures clearer, more predictable code and reduces potential bugs. It’s generally safer to use let and const due to their block scope, stricter behavior around redeclarations, and better error-catching mechanisms like the Temporal Dead Zone.
What are best practices for useMemo?
Use it for expensive calculations.
Use it to prevent referential inequality issues for objects/arrays.
Don’t use it everywhere – Premature optimization hurts readability.
Combine with useCallback when passing callbacks into children.
Always provide a dependency array – Empty if the value is constant.
What are Characteristics of Controlled Components?
State-Driven: Input value is bound to state.
Event Handling: Value updates via onChange event handler.
Predictable: React state is the single source of truth.
Validation: Easy to validate on every keystroke.
Dynamic Behavior: Supports conditional fields, form reset, etc.
What are Controlled Components in React?
A controlled component is a component whose form elements (like input fields or checkboxes) are controlled by the state of the application.
What are Custom Hooks?
A custom hook is a reusable function in React that encapsulates logic using built-in hooks like useState, useEffect, etc.
Naming Convention:
Always starts with use – e.g., useFetch, useAuth
Example – useCounter Custom Hook:
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount((prev) => prev + 1);
const decrement = () => setCount((prev) => prev - 1);
return { count, increment, decrement };
}
Usage:
function CounterComponent() {
const { count, increment, decrement } = useCounter();
return (
<div>
<p>{count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
}
Why Custom Hooks?
Encapsulate Stateful Logic: Abstract complex state/effect logic.
Reusability: Reuse across multiple components.
Cleaner Components: Separate logic from UI.
Separation of Concerns: Keep component focused on rendering, hook handles logic.
What are react hooks? Examples,
React Hooks are inbuilt functions provided by React that allow functional components to use state and lifecycle features.
Import it from react library
Manage state (useState)
Handle side effects like data fetching (useEffect)
Access context (useContext)
Optimize performance (useMemo, useCallback)
Work with refs and DOM elements (useRef)
What are Route Parameters in React Routing?
Route parameters are dynamic parts of the URL used to pass values to components.
Example:
<Route path="/user/:id" element={<User />} />
Access Parameters:
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
URL: /user/123 → Output: User ID: 123
What are the Advantages of Using Controlled Components in React Forms?
Predictable State: State is in sync with the input.
Validation: Easy to validate as the user types.
Dynamic Changes: Can enable, disable, or modify inputs based on other fields.
Controlled Updates: Useful in large applications needing form state management.
Integration: Works well with libraries like Formik, React Hook Form.
What are the best practices when using useContext?
Best Practice Why It Matters
Avoid unnecessary re-renders Split contexts by concern or memoize values
Don’t put everything in context Use local state where possible
Memoize context value if object/array Avoid new reference creation every render
Access context only where needed Avoid wrapping entire app in single context
Combine with useReducer for complex logic Better than stuffing logic into Provider
What are the Differences between Controlled & Uncontrolled Components?
Aspect Controlled Components Uncontrolled Components
Value Handling Controlled by React state (useState) Controlled by the DOM (ref)
Data Flow One-way binding (React state → Input) Access input value via ref when needed
Real-time Validation Easy, on every onChange Difficult
Performance Potentially slower for many fields Faster for simple, non-reactive forms
Best Use Case Interactive, dynamic forms Forms with default values, less interaction
Example value={state} + onChange={setState} ref={inputRef} + inputRef.current.value
What are the performance concerns with Context API?
Re-renders:
When context value changes, every consumer re-renders, even if they don’t use the changed value.
Optimization: Split contexts or memoize values:
const value = useMemo(() => ({ user, setUser }), [user]);
What are the performance risks if you overuse useMemo?
Unnecessary memory usage – Memoizing cheap calculations increases memory pressure.
Extra computation – Tracking dependencies and memoization logic adds complexity.
Reduced readability – Can clutter component logic.
What are the Roles of <Routes> and <Route> Components?</Route></Routes>
<Routes> Wrapper component that matches URL paths to child <Route> components. It replaces the old <Switch> component in React Router v6.
<Route> Defines a mapping between a URL path and a React component. It renders the component when the URL matches the path.
</Route></Switch></Route></Routes>
What are the use cases of useEffect
Fetching Data API calls when the component mounts.
DOM Updates Update document title.
Event Listeners Attach and clean up event listeners.
Timers/Intervals Set setInterval and clear it on unmount.
Subscribing to Services WebSocket or Redux store subscription.
What causes a functional component to re-render?
A functional component re-renders when its props or state change. Parent re-rendering passes new props, or the component’s internal state updates.
What causes memory leaks in react
Subscriptions Not Cleaned Up:
E.g., WebSocket connections, event listeners, or custom intervals not removed.
setTimeout / setInterval:
If a component is unmounted, but timers are still running, it can try to update state on an unmounted component, causing errors and leaks.
Async Operations (e.g., fetch):
If a component unmounts before fetch completes, setting state after unmount can lead to leaks.
Large Closures Holding References:
If functions capture large objects from outer scope (closures), they keep those objects in memory longer than needed.
Global Variables:
Accidentally storing state or components in global variables can prevent garbage collection.
What causes unnecessary re-renders in React?
Inline functions/objects in components.
Passing non-memoized props.
Changing parent state causing child re-renders.
What Does React.createElement() Do?
This is the core function JSX compiles to.
It creates a React element (Virtual DOM node).
Signature:
React.createElement(type, props, …children)
Example:
const element = React.createElement('h1', null, 'Hello');
React.createElement(
type, // 'h1', ComponentName, React.Fragment, etc.
props, // { id: 'header', className: 'myClass' } or null
...children // 'Hello', other React elements, arrays, etc.
);
What exactly happens to state when a prop changes
prop changes (due to the parent re-rendering with new values):
React re-renders the component with new props.
State is NOT automatically reset unless reset manually
key prop changes forces React to treat the component as a new instance.
Component is unmounted & re-mounted (e.g., conditional rendering) - Fresh instance created and state is reset
What happens if a dependency is an object or array?
Objects/Arrays are referentially different on every render, even with the same content.
This will cause useMemo to recalculate every render.
Solution:
Use useMemo or useCallback to wrap the object/array creation:
const options = useMemo(() => ({ sortBy: 'name' }), []);
What happens if dependencies change on every render?
If a dependency is unstable (e.g., object/array created inside the component), the function will still be recreated every render.
Example:
const options = { sortBy: 'name' };
const memoizedFunction = useCallback(() => doSomething(options), [options]);
This will break memoization because a new options object is created on every render.
Solution:
const options = useMemo(() => ({ sortBy: 'name' }), []);
const memoizedFunction = useCallback(() => doSomething(options), [options]);
What happens if hooks are called conditionally
Hook order matters for state and effects association. If changes : Assign the wrong state to the wrong variable.
Skip state initialization or updates.
function MyComponent({ condition }) {
const [count, setCount] = useState(0); // Hook 1
if (condition) {
const [text, setText] = useState(‘Hi’); // Hook 2 (conditionally)
}
const [name, setName] = useState(‘John’); // Hook 3
// React thinks Hook 3 is Hook 2 in the next render if condition is false! and updates hook 2 value to hook 3
}
What happens if the computation inside useMemo is async (e.g., fetch call)?
useMemo should not be used with side-effects like async functions.
Use useEffect instead for async logic.
useMemo is synchronous; it returns a value, not a Promise.
Bad Example:
const data = useMemo(async () => await fetchData(), []);
Correct Approach (with useEffect):
useEffect(() => {
async function fetchData() {
const result = await fetchAPI();
setData(result);
}
fetchData();
}, []);
What happens if the parent re-renders but the props are the same? React.memo
Without React.memo: By default, functional components will re-render every time the parent re-renders, regardless of prop change because functional components don’t have built-in performance optimizations like class components, which use the shouldComponentUpdate method to prevent unnecessary re-renders.
With React.memo: React.memo is a higher-order component that optimizes functional components by preventing unnecessary re-renders. It performs a shallow comparison of props and only re-renders the child component if the props have changed. This can help optimize performance, especially for expensive child components.
What happens if useContext is called outside a Provider?
Returns the default value provided to createContext().
Does NOT throw an error, but it can lead to subtle bugs.
Example:
const ThemeContext = createContext('light'); // 'light' is default value
const Component = () => {
const theme = useContext(ThemeContext); // theme will be 'light' if no Provider
};
What happens if you forget the default case in a reducer?
If the default case is omitted, an unhandled action will return undefined,
causing React to crash.
Best Practice: Always return the current state for unknown actions.
What happens if you omit the dependency array in useCallback?
Without the dependency array, the callback is re-created on every render, which defeats the purpose of useCallback.
Example:
const memoizedFunction = useCallback(() => {
console.log('Hello');
});
This is wrong and is the same as creating the function inside the component without useCallback.
Correct Version:
const memoizedFunction = useCallback(() => {
console.log('Hello');
}, []);
What is prop drilling, why avoid, how to avoid?
Prop Drilling : passing props through multiple intermediate components just to get data from a parent to a deeply nested child component.
Makes Code Hard to Read & Maintain: You pass props through components that don’t need them.
Tight Coupling: Intermediate components depend on props they don’t use, just to forward them down.
Re-renders: Any state/prop change causes unnecessary re-renders in all intermediate components.
We can avoid it using Context API, Redux, component composition, or modern libraries like Zustand and React Query.
What happens when you call setState multiple times in the same render?
Synchronous Updates:
State updates inside the same event handler are batched together and lead to one re-render in React. React batches state updates but doesn’t immediately apply them. Using old state values in consecutive setState calls without the functional form leads to stale state. Only the last update matters unless using functional updater.
Asynchronous Updates:
React does not batch updates that happen in asynchronous code (like setTimeout or promises, network calls). This leads to multiple re-renders and state updates based on the old value as state updates don’t get batched
React 18+:
In React 18 and above, automatic batching improves performance by batching synchronous and asynchronous updates together, which reduces unnecessary re-renders.
setCount(prevCount => prevCount + 2);
What if a useCallback dependency is an object or array?
Wrap it in useMemo to prevent recreating the object/array every render.
Example:
const options = useMemo(() => ({ sortBy: 'name' }), []);
const callback = useCallback(() => {
console.log(options.sortBy);
}, [options]);
What if you mix controlled and uncontrolled inputs?
Mixing is possible but not recommended.
Controlled fields: React state
Uncontrolled fields: ref
Mixing can cause confusion and bugs.
What if you skip the error state?
Without error state, the UI might freeze or show blank content, making it hard for users to understand what went wrong.
Separating error state allows me to show proper error messages and improve user experience.
What is a common mistake with useContext in useEffect?
Using useContext inside useEffect is often confused.
You should call useContext at the top level of the component – not inside useEffect.
const MyComponent = () => {
const theme = useContext(ThemeContext);
useEffect(() => {
console.log(theme);
}, [theme]); // Correct usage
};
What is a component. What are it’s main elements
Resuable, independent unit/ building blocks of UI manages state, behavior and rendering logic
React Component is a reusable, independent function or class that returns JSX. It has Props (inputs), State (data), and can use Hooks/Lifecycle methods for behavior.
Main Elements of a React Component:
JSX (JavaScript XML) → Describes the component’s UI.
Props (Properties) → Inputs passed from parent to child components.
State → Internal data that determines how the component behaves and re-renders.
Lifecycle (in class components) / Hooks (in functional components) → Manage side effects and behavior at different stages.
Component function returns virtual DOM node object
What is a SPA (Single Page Application)?
A SPA is a web application that loads a single HTML page and dynamically updates content as the user interacts with it, without refreshing the entire page or loading new page
Key SPA Characteristics Explanation
The entire app runs inside a single HTML file.
Client-side Routing URL changes without reloading the page. React Router handles navigation.
Dynamic Content Rendering Content updates via JavaScript (React) without a full reload.
API-Driven Data is fetched via REST APIs (e.g., fetch() or axios).
Fast User Experience No full-page reload → Faster transitions, app-like experience.
What is an action in useReducer()?
An action is an object with a type property:
{ type: ‘INCREMENT’, payload: 10 }
type describes the action.
payload carries additional data.
function counterReducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + action.payload };
case 'DECREMENT':
return { count: state.count - action.payload };
default:
return state;
}
}
What is Context API in React?
Context API is a built-in React feature for managing global state and passing data deeply through the component tree without prop drilling.
Use Case:
When multiple components need access to the same data (e.g., user authentication, theme).
Key Components:
React.createContext() – Creates context.
Provider – Wraps components, provides data.
Consumer / useContext() – Consumes context.
Example:
const UserContext = React.createContext();
function Parent() {
return (
<UserContext.Provider value={{ name: 'John Doe' }}>
<Child />
</UserContext.Provider>
);
}
function Child() {
const user = useContext(UserContext);
return <div>{user.name}</div>;
}
Key Benefits:
Avoids Prop Drilling
Global State Sharing
Easy to use with Hooks (useContext())
What is hoisting
Hoisting : variable and function declarations are moved to the top of their containing scope during the compile phase, before the code execution starts.
var: Hoisted and initialized with undefined, can be accessed before the declaration but will return undefined.
let, const : Both the declaration and the initialization are hoisted, but they are not initialized until the code execution reaches them. They are placed in a “temporal dead zone” (TDZ) until the code execution reaches the declaration. Accessing them before initialization results in a ReferenceError.
What is Key in React?
key is a special React prop used when rendering lists.React uses the key to track each component’s identity across renders. If the key changes, React destroys the old component and creates a new one, even if the type is the same.
What is Link in React Router?
Link is used to navigate between pages without refreshing the entire app. It updates the URL and renders the matched component.
What is React? Why React
JS open source Library, fast & dynamic interfaces with efficient updates without refresh, using virtual DOM. SPAs
React is a JavaScript library for building fast, dynamic, and modular user interfaces using a component-based, declarative approach with a virtual DOM for efficient updates without refreshing page. Especially beneficial for SPAs
Why : Open-source, cross-platform, SPAs, lightweight, fast, large community and ecosystem, easy testing
What is Routing and Router in React?
Routing is the process of navigating between different components/pages based on the URL path.
React Router is a library that enables routing in React applications.
Key Concepts:
Router: Wrapper component that enables routing functionality.
Route: Defines the path and component to render.
Navigation: Moving between pages using Link or useNavigate().
What is shallow comparison
A shallow comparison performed :only the first level of the object is compared. If props or state are objects/arrays/functions, React compares their references (not the contents inside them).
What is the best practice when combining useReducer() and useEffect()?
Dispatch side-effect-related actions inside useEffect().
Separate side-effect actions from pure state actions.
Example:
useEffect(() => {
fetchData().then((data) => dispatch({ type: 'SUCCESS', payload: data }));
}, []);
Explain Ways to avoid prop drilling
- Context API (Built-in Solution): Create a Context and use useContext() hook.
Best for: App-level state like theme, authentication, user data. - Redux (Global State Management Library): Centralized store holds the state. Any component can subscribe to the store and access state directly.
Best for: Large applications with complex state across multiple components. - Component Composition: Break components into smaller, reusable units.
Lift State Up only where necessary, pass only required data to specific components.
Best for: Simple state sharing across few components. - React Query / Zustand / Recoil (Modern State Libraries):
React Query: Handles server state (data fetching).
Zustand/Recoil: Simple state management without prop drilling.
Best for: Asynchronous data (API calls) and simplifying state access.
What is the difference between defaultValue and value in inputs?
value Controlled component (state drives value).
defaultValue Initial value for Uncontrolled component.
What is the difference between useEffect and useLayoutEffect?
useEffect
* Asynchronous – Runs after the render and paint.
* Non-blocking.
* Preferred in most cases.
useLayoutEffect
* Synchronous – Runs after render but before paint.
* Blocks painting until effect completes.
* Use for layout measurements or DOM manipulation.
What is the difference between useState and useReducer? When would you choose one over the other?
useState : Simpler state logic – like strings, numbers, booleans. Updates state directly
useReducer : Complex state logic – multiple sub-values, actions. Uses actions & reducer function to update state
When to use useReducer:
Complex state transitions (e.g., state derived from multiple actions). When the logic is complex (e.g., form state, shopping cart).
Next state depends on previous state.
Multiple pieces of state that evolve together.
When state logic is extracted into a separate reducer function (better readability).
useState() updates replace state, while
useReducer() updates derive state from current state.
Keeps state logic centralized.
Avoids multiple setState() calls when fields are related.
What is the execution flow of useEffect
Execution Flow:
Component Renders → Effect Runs.
Dependency Array Check: Trigger for effect to run
Empty Array [] → Runs once after initial render.
Array with values [count, user] → Runs when any dependency changes.
No Array (Dangerous) → Runs after every render.
Cleanup Function (Optional):
Runs before the next effect execution or when the component unmounts.
Useful for clearing timers, unsubscribing listeners, or canceling API calls.
What is the performance cost of overusing useCallback?
Overhead of memoization: Tracking dependencies and memoizing every callback can slow down the app, especially if the callback is trivial.
More complexity and less readability.
Rule of Thumb:
Use useCallback primarily when passing callbacks to memoized children (React.memo).
What is the purpose of passing initial state as an object in useReducer?
Initial state as an object provides flexibility to store multiple related values together.
It allows grouping of logically connected state variables.This approach improves readability and scalability as your state grows.
Avoids multiple useState calls for closely related data, reducing re-renders and improving performance.
It mirrors real-world applications, where state is often a collection of related fields.
What happens if you write an HTML-like tag in JSX without closing it properly, e.g., <img></img>?
What is the purpose of {} inside JSX? Can I put an if statement inside it?
What are React Fragments
JSX syntax error. React doesn’t auto-close; you must use <img></img>.
{} is to evaluate JS expressions.
❌ You cannot put a statement like if directly inside {}.
✅ Use ternary operator or logical expressions instead:{isLoggedIn ? <h1>Welcome</h1> : <h1>Please Sign In</h1>}
In React, a fragment is a way to group multiple children’s elements. Using a Fragment prevents the addition of unnecessary nodes to the DOM.
What is the relationship between React.memo() and useMemo()?
React.memo(): Prevents re-rendering of the entire component if props haven’t changed.
useMemo(): Memoizes values inside a component to optimize internal computations.
Combining Example:
const Child = React.memo(({ data }) => <div>{data.value}</div>);
function Parent({ data }) {
const memoizedData = useMemo(() => ({ value: data }), [data]);
return <Child data={memoizedData} />;
}
What is the relationship between useCallback and React.memo()?
React.memo memoizes a component based on props.
If a prop is a function, it triggers a re-render if the function reference changes.
useCallback ensures the function’s reference remains stable, preventing unnecessary re-renders.
Example:
const Child = React.memo(({ onClick }) => {
console.log('Child Rendered');
return <button onClick={onClick}>Click</button>;
});
const Parent = () => {
const handleClick = useCallback(() => console.log('Clicked'), []);
return <Child onClick={handleClick} />;
};
What is the relationship between useContext and Context.Provider?
Context.Provider provides a value to all descendant components.
useContext consumes the nearest Provider value in the component tree.
Example:
const ThemeContext = createContext();
const App = () => (
<ThemeContext.Provider value="dark">
<ThemedComponent />
</ThemeContext.Provider>
);
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
};
What is the “stale state” problem in useReducer()?
If closures capture old state, actions use outdated values. Solution:
Always rely on the state argument in the reducer.
Avoid accessing state from closures inside event handlers.
What is useCallback in React?
useCallback is a React Hook that returns a memoized version of a callback function.
It only changes when one of its dependencies changes.
Useful when passing callbacks to child components, especially when children are wrapped in React.memo.
Syntax:
const memoizedCallback = useCallback(() => {
// Some logic
}, [dependency1, dependency2]);
Key Purpose:
Performance optimization by preventing unnecessary re-creations of functions across renders.
Avoids causing child components to re-render when functions are passed as props.
What is useContext in React?
useContext is a React Hook that allows functional components to consume values from a React Context.
It avoids the need for Context.Consumer wrapper components.
Syntax:
const value = useContext(MyContext); Key Purpose:
Access global state or shared values (e.g., theme, user authentication, language).
Avoid prop drilling: Passing props through multiple layers of components.
What is useMemo and why is it used?
useMemo is a React Hook used to memoize the result of a computation and optimize performance.
It recalculates the value only when dependencies change.
It prevents expensive calculations from running on every render.
Syntax:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Use Case Examples:
Expensive Computations: Filtering large lists, heavy calculations.
Referential Equality: Preventing child re-renders when passing objects/arrays as props.
What is useReducer and when to use it over useState?
Complex state logic or state transitions depend on previous state.
Better for state with multiple sub-values (e.g., form data, multi-step flows).
What is useRef? How is it different from useState?
useRef : Holds a mutable value that persists across renders.Does not cause re-render. Accessing DOM elements or storing values that don’t need re-rendering.
useState : Triggers re-render when state is updated. Causes component to re-render.
Common Use: Managing component state.
What problem do React Hooks solve? Why were they introduced?
Hooks solve the problem of adding state and lifecycle features to functional components.
Before hooks, stateful logic was only possible in class components, which often led to:
Complex components with large lifecycle methods.
Difficult logic sharing between components.
Poor readability due to mixing stateful and side-effect logic.
Hooks simplify component logic by allowing state, side effects, and other React features in functional components.
Simplifies component logic → State and side effects in functional components.
Improves reusability → Custom hooks for sharing logic across components.
Reduces complexity → No need for lifecycle methods like componentDidMount, componentDidUpdate, etc.
What will happen if you omit the dependency array in useMemo?
If the dependency array is omitted:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b));
The value will recompute on every render, defeating the purpose of memoization.
Equivalent to not using useMemo.
What’s the difference between props and state?
State: internal data that changes over time, Props: data from parent
Props are immutable inputs passed from a parent to a child, controlling the component from outside. Read only
State is mutable, internal data controlled by the component itself, used when data changes over time
What’s the difference between useContext and Redux?
useContext Redux
Scoped to component tree Global state across app
Simpler, less boilerplate Predictable with middleware support
Triggers all consumers on change Fine-grained state updates with selectors
For small-medium apps For large-scale, complex apps
What’s the performance concern with too many controlled inputs?
Each onChange causes re-renders → Expensive for large forms with hundreds of inputs.
Optimization Techniques:
Debouncing: Delay updates (e.g., with lodash.debounce).
React Hook Form: Library to minimize re-renders.
What’s the problem with overusing useMemo and useCallback?
Unnecessary complexity.
Slower initial renders if misused.
Only optimize when performance is measurable.
When can Virtual DOM become inefficient?
Large lists without proper keys, frequent state changes without memoization, deep component trees.
When is useCallback unnecessary?
Avoid useCallback for local, simple handlers that don’t get passed as props.
Avoid for trivial operations (e.g., console.log or basic state updates).
Prefer useCallback when passing callbacks to memoized child components (React.memo).
When is useMemo actually necessary?
Computationally expensive calculations (e.g., data processing, filtering).
Avoid recreating objects/functions passed to child components.
When is useMemo unnecessary?
Primitive values (numbers, strings, booleans) don’t need useMemo.
Simple calculations – If the calculation is cheap, don’t memoize.
Overhead can outweigh benefits for trivial computations.
When NOT to Use SPA?
SEO SPAs require server-side rendering (SSR) for better SEO.
Initial Load Time Large bundle size can slow down initial load.
Simple Websites Static websites (e.g., blogs) don’t need SPA complexity.
When React.memo is necessary and when overkill
Purpose: Prevent unnecessary re-renders of functional components that receive the same props.
When to Use:
When a child component is receiving the same props multiple times and you want to avoid unnecessary re-renders.
When a component is expensive to render, and props don’t change often.
When It Becomes Overkill:
If the component is small and fast to render.
If props change frequently, as it would invalidate the memoization.
For lightweight components, the overhead of memoization could be worse than the re-renders themselves.
When should you NOT use useMemo?
When the computation is cheap – adds unnecessary complexity.
When the memoization itself is more costly than the calculation.
Overusing useMemo can hurt performance instead of improving it.
When state depends on previous state
Use functional updates
setCount((prevCount) => prevCount + 1);
setCount((prevCount) => prevCount + 1);
React batches updates. Old value may be stale
When useCallback is necessary and when it is overkill
Purpose: Prevent function recreation on every render, useful when passing functions down to child components wrapped with React.memo or PureComponent.
When to Use:
When passing functions as props to child components and you want to avoid re-creating the function on every render, especially in pure components.
When It Becomes Overkill:
If the function is not passed as a prop or does not change frequently, using useCallback introduces unnecessary complexity.
For small functions or non-expensive computations, the overhead of memoizing the function is typically not worth it.
When useMemo is necessary and when overkill
Purpose: Optimize expensive calculations that only need to be recomputed when their dependencies change.
When to Use:
When you have expensive calculations (e.g., sorting, filtering) that depend on props or state, and those calculations don’t need to be redone every render.
When It Becomes Overkill:
For simple calculations where the performance gain is negligible.
If you are memoizing values that change frequently, causing useMemo to still be recomputed often.
Small apps or lightweight computations where memoization overhead outweighs the performance gain.
When would you derive state from props?
Rarely because derived state can get stuck with stale props. Derive state if I need to initialize it from props or synchronize when props change, using useEffect for side effects because it runs after render phase.
const Child = ({ name }) => {
const [stateName, setStateName] = React.useState(name);
// Sync state with props when props change
React.useEffect(() => {
setStateName(name);
}, [name]);
return <p>Child State: {stateName}</p>;
};
State no change when prop change. State derived from props - out of sync
How React App Load and display the components in browser?
React app starts from index.html (entry point, usually in the public folder).
It contains a root <div id="root"></div> where React will load components.
index.js (or main.jsx) is the entry JavaScript file. React renders the root component (e.g., <App></App>) into #root div.ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Root Component(App: container of child components):
React Component (e.g., <App></App>) returns JSX.
JSX is compiled to React.createElement() calls (by Babel) → Creates Virtual DOM elements.
React compares Virtual DOM with Real DOM → Updates only necessary parts in Real DOM.
Display in Browser: React injects the final rendered output (HTML) into the #root div inside the index.html file.
Browser renders this updated DOM and displays the components.
Why Directly Setting State in Render is Problematic
const Child = ({ count }) => {
const [stateCount, setStateCount] = React.useState(count);
// This will cause an infinite re-render
setStateCount(count); // Directly setting state inside render
return <div>{stateCount}</div>;
};
When the component renders for the first time, stateCount is initialized with count from props (React.useState(count)).
As soon as React evaluates the component and the render function executes, it encounters setStateCount(count). React will try to update the state based on the props.
Setting state in the render function triggers a re-render of the component, but since the state update is part of the render process, the component re-renders again immediately after. This new render will again call setStateCount(count), starting the cycle over in loop
Why does React enforce immutability on props and state
Immutability allows React to efficiently detect changes via shallow comparison and re-render only the necessary parts. Mutability breaks this optimization
Why is const [state, setState] = useState() a const but still updates?
const → Variable is immutable per render, but next render gets a new value.
State itself is not constant, the reference is.
Why is storing IDs better than objects?
Objects can be large and cause unnecessary re-renders.
Comparing IDs is cheap because they are primitives.
When we update state with objects, React might compare object references, leading to performance hits.
Why is useCallback necessary in React?
Functions are re-created on every render in React. When passed as props, this triggers re-renders in child components, even if their props didn’t change.
useCallback creates a stable function reference, avoiding unnecessary child re-renders.
Why JSX
React’s philosophy➡️ UI is a function of state (UI = f(state)).
Readability & Ease of Development : Easier to visualize UI structure compared to React.createElement().
Combines Logic & UI : You can embed JavaScript expressions using { }.
Avoids String-Based Templates Safer than concatenating strings (like jQuery), reduces XSS risk.
Developer Experience (DX) Better error messages, syntax highlighting, and tooling support.
Why not use uncontrolled inputs?
Uncontrolled inputs rely on DOM state instead of React state. That breaks React’s declarative approach and can make form handling messy.
If we need to reset the form or conditionally disable fields, it becomes difficult to manage without controlled inputs.
Why should reducers be pure functions?
Reducers must be pure functions because:
Same inputs should always produce the same output.
No side effects (e.g., API calls, mutations).
Ensures predictability and easy debugging.
Why Virtual DOM?
Real DOM updates are expensive on performance, slow; Virtual DOM minimizes real DOM manipulations by differential updates and batching changes.
DOM manipulations are SLOW → Recalculating styles, layout, reflows.
Virtual DOM is FAST → Calculations in memory, reduced re-rendering.
Batch updates → React groups changes instead of updating the DOM for every small state change.
Why would you NOT always wrap every component in React.memo?
React.memo adds shallow comparison overhead. For simple or frequently changing components, memoization can hurt performance. I only memoize components that are expensive to re-render or receive stable props.
Write a template literal
Multi-line strings and embedding variables using ${} and back ticksHello ${variableName}
