React Interview Master

React is a JavaScript library for building user interfaces, primarily for single-page applications. It's used for handling the view layer for web and ...

JSX stands for JavaScript XML. It allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild(...

Core features include Virtual DOM, JSX, Components, One-way data binding, and Simplicity (easy to learn and use).

Virtual DOM is a lightweight copy of the real DOM. React uses it to efficiently update the UI by comparing it with the previous version and only updat...

Components are the building blocks of a React application. They are independent, reusable pieces of UI that can be functional or class-based.

Functional components are simple functions returning JSX. Class components are ES6 classes. Functional components use Hooks for state, while Class com...

Props (properties) are read-only inputs passed from a parent component to a child component to communicate data.

State is an object that holds data that may change over the lifetime of a component. Unlike props, state is private and fully controlled by the compon...

Keys help React identify which items have changed, been added, or removed. They should be unique among siblings to optimize rendering performance.

useState is a Hook that allows you to add React state to functional components. It returns the current state value and a function to update it.

useEffect is used to perform side effects in functional components, such as data fetching, subscriptions, or manually changing the DOM.

In React, data flows in one direction: from parent to child via props. This makes debugging and tracking data changes easier.

An SPA is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

Events in React are named using camelCase (e.g., onClick) instead of lowercase. You pass a function as the event handler rather than a string.

Conditional rendering allows you to render different UI elements based on certain conditions using ternary operators, logical &&, or if-else statement...

Fragments let you group a list of children without adding extra nodes to the DOM. It's written as <React.Fragment> or shorthand <>.</>

It's a command-line tool that allows you to create a new React project with a pre-configured build setup.

Styles can be added via Inline CSS, CSS Stylesheets, CSS Modules, or CSS-in-JS libraries like Styled Components.

The children prop allows you to pass components or elements as data to other components, enabling powerful composition patterns.

Since 'class' is a reserved keyword in JavaScript, React uses 'className' to define CSS classes for HTML elements.

Hooks must be called at the top level (not inside loops or conditions) and only from React functional components or custom hooks.

React is a library (View only), uses Virtual DOM. Angular is a framework (Full MVC), uses Real DOM and two-way data binding.

In older React versions, event objects were reused for performance. Since React 17, event pooling has been removed.

Pass a function as a prop from parent to child. The child calls this function with data as an argument.

The default port is 3000.

It allows a file to export a single component or value as the default export, making it easier to import in other files.

Pass a callback function to the state setter: setState(prevState => prevState + 1).

A component that renders the same output for the same props and state. In class components, React.PureComponent handles shouldComponentUpdate automati...

NPM (Node Package Manager) is used to install libraries, dependencies, and manage script execution in a React project.

StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings for its descendants.

ReactDOM provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need...

Use curly braces with a block comment: {/* comment here */}.

React's cross-browser wrapper around the browser's native event, ensuring consistent behavior across different browsers.

An input whose value is driven by React state. Changes are handled by an onChange handler that updates the state.

An input that maintains its own internal state. You access its value using a Ref instead of state.

HTML events are strings (onclick='f()'), React events are functions (onClick={f}). React events use camelCase.

Babel is a JavaScript compiler that converts modern JSX/ES6+ code into backwards-compatible JavaScript that older browsers can understand.

Webpack is a module bundler that takes your assets (JS, CSS, images) and bundles them into small files for the browser.

Return 'null' from the component's render method or the functional component body.

A library used for type-checking props. It helps catch bugs by ensuring components receive the correct data types.

UI is what the user sees (JSX). Logic is how the data changes (State/Handlers). React separates these effectively.

A pattern where a function takes a component and returns a new component with enhanced capabilities.

It lists project metadata, dependencies, and scripts required for the application.

Forms are typically handled as controlled components where state manages the inputs and handleSubmit processes the submission.

The .map() function is the standard way to iterate over an array and return a list of JSX elements.

A JS feature often used in React to extract values from props or state objects into distinct variables.

A higher-order component that prevents a functional component from re-rendering if its props haven't changed.

It controls when the effect runs. Empty [] runs once, [prop] runs when prop changes, no array runs on every render.

Use a library like React Router with the <Link> component to navigate without refreshing the page.

It contains static files like index.html, images, and manifest.json that don't go through the build process.

Context API provides a way to share values like themes or user info globally without prop drilling. It involves a Provider and a Consumer (or useConte...

useMemo returns a memoized value (result of calculation). useCallback returns a memoized function (to prevent re-creation).

Using React.memo, useMemo, useCallback, lazy loading components with Suspense, and avoiding anonymous functions in props.

Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component (useful for modals).

Class components that catch JS errors anywhere in their child component tree, log those errors, and display a fallback UI.

Use Context API combined with useReducer for complex logic, or simpler libraries like Zustand or Jotai.

A hook for complex state logic. It's similar to Redux: takes a reducer (state, action) and returns the current state and a dispatch function.

Moving state to the closest common ancestor when several components need to reflect the same changing data.

Functions starting with 'use' that allow you to extract component logic into reusable functions that can still use other hooks.

React.memo is a HOC for components. useMemo is a hook for values within a component.

A technique for automatically passing a ref through a component to one of its children.

useRef returns a mutable ref object. Used for accessing DOM elements directly or persisting values without triggering re-renders.

v6 introduced <Routes> instead of <Switch>, relative paths, useNavigate hook, and a simplified API for nested routes.

Define an async function inside useEffect, call it, and handle cleanups/aborts to prevent memory leaks.

To wrap multiple pages in a consistent structure (Header, Footer, Sidebar) using the children prop.

Create a wrapper component that checks authentication state and redirects to login using <Navigate /> if not authenticated.

Server-side loads a new page from the server. Client-side updates the URL and changes the view without a full page reload.

Accepts a context object (from React.createContext) and returns the current context value for that context.

Passing data through many layers of components. Avoid it using Context API or state management libraries.

A technique for sharing code between components using a prop whose value is a function.

useEffect runs asynchronously after render. useLayoutEffect runs synchronously after all DOM mutations (before painting).

Use lazy loading, modern formats (WebP), responsive image sets, or frameworks like Next.js that handle it automatically.

Passing dependencies (like services or configurations) through props or Context to make components more testable and flexible.

The algorithm React uses to diff one tree with another to determine which parts need to be changed.

Using React DevTools, browser debugger statement, console logs, and profiling tools.

Occurs when iterating over an array without providing a unique 'key' prop to the rendered elements.

Use libraries like Formik or React Hook Form to manage validation, state, and complex submission logic efficiently.

React compares two versions of the virtual DOM. It assumes different types produce different trees and uses keys for list comparisons.

Initialize state from localStorage and use useEffect to sync state changes back to localStorage.

withAuth (auth checks), connect (Redux), withRouter (legacy routing), or custom withLogger.

Using Axios interceptors or a custom wrapper around the fetch API to catch 401/500 errors centrally.

Shadow DOM is a browser technology for scoping styles. Virtual DOM is a JavaScript concept for efficient UI updates.

lazy allows you to render a dynamic import as a regular component. Suspense lets you show a fallback UI while it's loading.

The <> shorthand doesn't support the 'key' attribute. For lists, you must use <React.Fragment key={id}>.

Customizes the instance value that is exposed to parent components when using refs.

Prevents memory leaks by clearing timers, unsubscribing from sockets, or cancelling fetch requests when a component unmounts.

Include all relevant state variables in the useEffect dependency array.

React recommends composition (using children or props) over inheritance to reuse code between components.

React groups multiple state updates into a single re-render for better performance (Automatic Batching in React 18).

Focus on user behavior using React Testing Library (RTL) and Jest for unit and integration tests.

Testing a component in isolation without rendering its children (mostly used with Enzyme, less common now).

Use semantic HTML, aria-* attributes, and tools like eslint-plugin-jsx-a11y to ensure accessibility.

The process where React attaches event listeners to HTML that was pre-rendered on the server.

Use Context API to provide a 'theme' string and CSS variables or a library like styled-components' ThemeProvider.

It pauses execution and opens the browser's debugger if available, allowing for step-by-step code inspection.

Check for infinite loops in useEffect (by adding/fixing dependencies) or event handlers updating state unconditionally.

Grouping related components, hooks, and services into feature-based folders instead of just 'components' or 'hooks'.

Using useSearchParams hook from react-router-dom to read and update query strings.

A set of new features that help React apps stay responsive and gracefully adjust to the user's device capabilities.

Import them as components (@svgr/webpack) or use them in <img> tags or as inline JSX for styling flexibility.

Fiber is the current reconciliation engine. It allows React to pause, prioritize, and reuse work, enabling features like Concurrent Rendering.

SSR: Server-Side Rendering (per request). SSG: Static Site Generation (build time). ISR: Incremental Static Regeneration (background update).

Using Module Federation (Webpack 5), iframes, or custom mounting logic to combine independent apps.

Allows you to mark state updates as non-urgent transitions, keeping the UI responsive while heavy updates happen in background.

Lets you defer re-rendering a non-urgent part of the tree until the urgent parts have finished updating.

Properly unsubscribing in useEffect, avoiding closures on old state, and profiling the application using browser memory tools.

React uses O(n) complexity by assuming stable keys and focusing on element type changes to efficiently update the tree.

Thunk uses function-based middleware for simple async. Saga uses Generators for complex side-effect management and testing.

Components that run only on the server, sending zero JavaScript to the client while still being interactive through client islands.

Managing state as small, independent 'atoms' that can be composed, avoiding the monolithic store approach of Redux.

A triple-curried function: (store) => (next) => (action) => { ... next(action); }.

Offloading heavy computations to a separate thread to prevent blocking the UI thread (main thread).

Don't use dangerouslySetInnerHTML unless necessary, use sanitization libraries (DOMPurify), and leverage modern CSP headers.

React 18 intentionally remounts components in dev mode to help developers find bugs related to side effects and cleanups.

A small, fast state-management library based on hooks. It has zero boilerplate compared to Redux.

Focusing on LCP (Lazy loading), FID (Transitions), and CLS (Fixed aspect ratios for media).

Splitting vendor code, route-based splitting, and dynamic imports for specific libraries only when needed.

Allows libraries to subscribe to external data stores in a way that's compatible with concurrent rendering.

Generates unique IDs stable across server and client, primarily for accessibility attributes.

React now batches state updates from promises, setTimeout, and native events, not just React events.

Removing unused code from the final bundle during the build process to minimize file size.

Using layout animations, variants, and AnimatePresence for entering/exiting shared layouts.

Using @testing-library/react-hooks to test custom hooks in isolation without a component.

Ensure server and client render identical content. Use useEffect for client-only logic or suppress warnings.

Sending HTML chunks to the client as they are ready, allowing parts of the page to show up before everything is loaded.

Using a function instead of a ref object to run code whenever the DOM node is set or unset.

A modern architectural pattern for splitting frontend apps into layers like features, entities, and shared.

Using react-i18next with lazy-loaded translation files and SEO-friendly routing.

Cookies (httpOnly) are safer from XSS; LocalStorage is easier but vulnerable to script injection.

A Webpack 5 feature allowing a JavaScript application to dynamically load code from another application at runtime.

Rendering only the visible portion of a large list to save memory and DOM nodes.

A hook for CSS-in-JS libraries to inject styles before other effects run, avoiding reflows.

Creating a library of atomic components, documented with Storybook, and shared via NPM.

Using BroadcastChannel API, localStorage events, or Shared Workers.

Decoupling the requester of an action from the object that performs the action (useful for undo/redo).

A 3kb alternative to React with the same API. Use it for extreme performance or size constraints.

A powerful library for data fetching, caching, and state synchronization with the server.

Modeling complex UI states as mathematical state machines to prevent impossible states.

Wrapping dispatch to add logging or async handle capabilities to useReducer.

CDN caching, Micro-frontends, robust CI/CD, and highly optimized bundle sizes.

Uses native components instead of web elements. No CSS, uses StyleSheet. No DOM, uses Yoga engine for layout.

Keeping filters and search terms in the URL query string so the page state is shareable.

Splitting context into smaller ones or using a selector-like pattern with children memoization.

Features likely to land in future versions (like previously with Hooks and Concurrent Mode).

Using multipart uploads, progress tracking, and secure presigned URLs for cloud storage.

JavaScript code that can run on both the client and the server.

Combining actions, reducers, and action types into a single file to reduce file scattering.

The foundation of libraries like Valtio or MobX to track changes automatically without explicit setters.

Customizing a theme or library by providing a file at a specific path that takes precedence.

React Forget (Compiler), native-like transitions, and move towards even more server-driven architectures.

Create a hook that takes a key and initial value. Use useState initialized with a function that reads from localStorage, and a useEffect that writes t...

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

Use a decrementing loop or reduce.

const reverseStr = str => [...str].reduce((acc, char) => char + acc, '');

Define a reducer function with 'increment' and 'decrement' actions.

const reducer = (state, action) => {
  switch(action.type) {
    case 'inc': return { count: state.count + 1 };
    case 'dec': return { count: state.count - 1 };
    default: return state;
  }
};

Use a combination of useEffect and setTimeout to delay execution until the user stops typing.

useEffect(() => {
  const timer = setTimeout(() => {
    setDebouncedValue(searchTerm);
  }, 500);
  return () => clearTimeout(timer);
}, [searchTerm]);

Split the sentence into an array of words and use 'reduce' to find the one with the maximum length.

const findLongest = str => str.split(' ').reduce((a, b) => b.length > a.length ? b : a);

Use a Set for a clean, efficient solution.

const unique = arr => [...new Set(arr)];

For simple objects, use JSON.parse(JSON.stringify(obj)). For complex ones involving recursive functions, handle them manually or use Lodash.

const deepClone = obj => JSON.parse(JSON.stringify(obj));

Compare the string with its reversed version.

const isPalindrome = str => str === [...str].reverse().join('');

Recursively iterate through keys and values.

const flatten = obj => Object.entries(obj).map(([k, v]) => `${k}=${v}`).join('&');

Use the built-in .flat(Infinity) or a recursive function.

const flatArray = arr => arr.flat(Infinity);

Iterate through the string and build a frequency map.

const countChars = str => [...str].reduce((acc, c) => ({ ...acc, [c]: (acc[c] || 0) + 1 }), {});

Use reduce to build an object where keys are the property values.

const groupBy = (arr, prop) => arr.reduce((acc, obj) => {
  const key = obj[prop];
  if (!acc[key]) acc[key] = [];
  acc[key].push(obj);
  return acc;
}, {});

Use async/await with try/catch and check response.ok.

async function getData(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error('Error');
    return await res.json();
  } catch (err) { console.error(err); }
}

A hook that returns a boolean state and a function to flip it.

function useToggle(initial = false) {
  const [s, setS] = useState(initial);
  const toggle = () => setS(!s);
  return [s, toggle];
}

Filter one array based on the presence of elements in the other.

const intersect = (a, b) => a.filter(v => b.includes(v));

Use the reduce method.

const sum = arr => arr.reduce((a, b) => a + b, 0);

Use useRef to store the previous value and update it in a useEffect after rendering.

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => { ref.current = value; });
  return ref.current;
}

Ensure the function only executes once per specified interval.

function throttle(fn, limit) {
  let lastFunc; let lastRan;
  return function() {
    if (!lastRan) { fn.apply(this, arguments); lastRan = Date.now(); }
    else { ... }
  }
}

Compare lengths and every element.

const equals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);

Use two pointers to compare elements and push the smaller one.

function merge(a, b) { ... }

Sum of two previous digits.

const fib = n => n <= 1 ? n : fib(n - 1) + fib(n - 2);

Classic problem using modulo operators.

for(let i=1;i<=100;i++) {
  console.log((i%3?'':'Fizz')+(i%5?'':'Buzz')||i);
}

Loop from 2 to sqrt(n) and check divisibility.

const isPrime = n => {
  for(let i=2, s=Math.sqrt(n); i<=s; i++) if(n%i===0) return false;
  return n > 1;
};

Split string and map words to upper case first index.

const cap = s => s.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');

Calculate expected sum and subtract actual sum.

const missing = (arr, n) => (n * (n + 1) / 2) - arr.reduce((a, b) => a + b);

Use Intersection Observer API to detect when the user reaches the bottom.

new IntersectionObserver(([e]) => {
  if(e.isIntersecting) loadMore();
}).observe(loaderRef.current);

Controlled uses state, uncontrolled uses ref.

// Controlled
<input value={val} onChange={e => setVal(e.target.value)} />
// Uncontrolled
const ref = useRef(); <input ref={ref} />

Memoize the result of a sort to prevent re-sorting on every render.

const sorted = useMemo(() => items.sort(), [items]);

Generate random hex values.

const randomColor = () => '#' + Math.floor(Math.random()*16777215).toString(16);

Use setInterval within useEffect and clean it up.

useEffect(() => {
  const id = setInterval(() => setTime(t => t - 1), 1000);
  return () => clearInterval(id);
}, []);

Use filter and indexOf.

const findDupes = arr => arr.filter((v, i) => arr.indexOf(v) !== i);

Memoize high-cost functions passed as props.

const handleClick = useCallback(() => doSomething(id), [id]);

Regex replace with upper case function.

const toCamel = s => s.replace(/(_\w)/g, m => m[1].toUpperCase());

An object with subscribe, unsubscribe, and publish methods.

const PubSub = { events: {}, subscribe(name, fn) { ... }, publish() { ... } };

Use match with a digits regex.

const getNumbers = s => s.match(/\d+/g);

Loop from 1 to n multiplying results.

const factor = n => { let r=1; for(let i=2;i<=n;i++) r*=i; return r; };

Generate stable unique IDs.

const id = useId();
<label htmlFor={id}>Name</label><input id={id} />

Initialize AbortController and pass its signal to fetch.

const ctrl = new AbortController();
fetch(url, { signal: ctrl.signal });
return () => ctrl.abort();

Sort descending and take second unique value.

const secondLarge = arr => [...new Set(arr)].sort((a,b)=>b-a)[1];

Update state on window 'resize' event.

const useWinSize = () => {
  const [size, setSize] = useState({ w: window.innerWidth, h: window.innerHeight });
  useEffect(() => {
    const handle = () => setSize({ w: window.innerWidth, h: window.innerHeight });
    window.addEventListener('resize', handle);
    return () => window.removeEventListener('resize', handle);
  }, []);
  return size;
};

Recursively merge properties to preserve nested structures.

const deepMerge = (a, b) => { ... }

Use Promise.all with an array of fetches.

const results = await Promise.all(urls.map(u => fetch(u).then(r=>r.json())));

Use Fisher-Yates algorithm.

const shuffle = arr => arr.sort(() => Math.random() - 0.5);

Filter out the value.

const removeVal = (arr, val) => arr.filter(item => item !== val);

A hook that skips the first run (on mount).

const isFirst = useRef(true);
useEffect(() => {
  if(isFirst.current) { isFirst.current = false; return; }
  fn();
}, deps);

Check Object.keys(obj).length === 0.

const isEmpty = obj => Object.keys(obj).length === 0 && obj.constructor === Object;

Sum divided by length.

const avg = arr => arr.reduce((a,b)=>a+b,0) / arr.length;

Use crypto.randomUUID() or a specific generator function.

const uuid = () => crypto.randomUUID();

A component that manages state and provides it to children.

const Provider = ({ children }) => {
  const [state, set] = useState();
  return <Ctx.Provider value={{state, set}}>{children}</Ctx.Provider>
};

Use the new FormData constructor.

const handleSubmit = e => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(e.target));
};