React Interview Questions and Answers

BASIC LEVEL

Group 1: React Fundamentals

Q1. What is React?

React is a JavaScript library used to build interactive user interfaces. It uses reusable components and a declarative approach to UI development.

Keypoints: Meta, component-based architecture, declarative UI.

Q2. What are the main features of React?

React supports reusable components, JSX, one-way data flow, state management, and efficient UI updates through its rendering system.

Keypoints: Components, JSX, props, state, reconciliation.

Q3. What is a Single Page Application (SPA)?

An SPA loads a web page initially and updates its content dynamically without reloading the entire page for most navigation actions.

Keypoints: Client-side routing, faster navigation, fewer full-page reloads.

Q4. What is the Virtual DOM?

The Virtual DOM is a lightweight representation of the UI. React compares successive render results and updates the necessary parts of the actual DOM.

Keypoints: Virtual representation, reconciliation, DOM updates.

Q5. What is the difference between React and Angular?

React is primarily a UI library, while Angular is a comprehensive application framework. React commonly uses external libraries for routing and state management, whereas Angular provides many of these features within its ecosystem.

Keypoints: Library vs framework, JSX vs templates, flexible ecosystem vs integrated framework.

Group 2: JSX and Rendering

Q1. What is JSX?

JSX is a syntax extension for JavaScript that allows developers to write HTML-like markup inside JavaScript code.

const name = "Syed";

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

Keypoints: JavaScript expressions use {}, JSX is transformed during compilation, not HTML.

Q2. What are the rules of JSX?

JSX must return a single root element, use className instead of class, and close elements properly. JavaScript expressions can be embedded using curly braces.

Keypoints: Single root, camelCase attributes, closing tags.

Q3. How do you render a React application?

React 18 and later use createRoot() from react-dom/client to render the root component into an HTML element.

import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root"))
  .render(<App />);

Keypoints: createRoot(), root DOM element, component rendering.

Q4. What is conditional rendering?

Conditional rendering displays different UI elements depending on a condition. React supports JavaScript if, ternary operators, and logical && expressions.

{isLoggedIn ? <h2>Welcome</h2> : <h2>Login</h2>}

Keypoints: if, ternary operator, logical &&.

Q5. How do you render a list in React?

Use JavaScript's map() method to convert an array into JSX elements. Assign a stable, unique key to each item.

const names = ["Ali", "John", "Sara"];

return names.map(name => (
  <p key={name}>{name}</p>
));

Keypoints: map(), stable keys, list rendering.

Group 3: Components and Props

Q1. What is a React component?

A component is a reusable piece of UI that can contain markup and JavaScript logic. Modern React applications primarily use function components.

function Welcome() {
  return <h2>Welcome!</h2>;
}

Keypoints: Reusability, modularity, function components.

Q2. What are props?

Props are inputs passed from a parent component to a child component. They are read-only from the receiving component's perspective.

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

<Greeting name="Syed" />

Keypoints: Parent-to-child data, read-only, component configuration.

Q3. What is the difference between props and state?

Props are passed into a component by its parent, whereas state is data managed by the component or its state-management mechanism. Updating state can trigger a re-render.

Keypoints: Props are inputs; state is managed data; both influence rendering.

Q4. What is prop drilling?

Prop drilling occurs when data is passed through multiple intermediate components to reach a deeply nested child. Context API or a state-management library can help avoid unnecessary prop passing.

Keypoints: Nested components, passing props, Context API.

Q5. What is component composition?

Component composition means combining smaller components to build a larger UI. The children prop is a common way to place content inside a reusable component.

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

<Card><h3>Profile</h3></Card>

Keypoints: Reusability, children, flexible UI design.

Group 4: State and Event Handling

Q1. What is state in React?

State is data that a component remembers between renders. When state is updated using the appropriate setter, React schedules a re-render to reflect the new value.

Keypoints: useState, component data, re-rendering.

Q2. What is the useState hook?

useState adds a state variable to a function component and returns the current value and a setter function.

const [count, setCount] = useState(0);

<button onClick={() => setCount(c => c + 1)}>
  {count}
</button>

Keypoints: State variable, setter function, initial value.

Q3. How does event handling work in React?

React event handlers are usually passed as functions through JSX event props such as onClick and onChange.

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

  return <button onClick={handleClick}>Click</button>;
}

Keypoints: Event props, function references, event handlers.

Q4. Why should we not modify state directly?

Direct mutation does not correctly notify React of a state change and can lead to stale or inconsistent UI. Use the setter function and create new objects or arrays when updating structured state.

setUser(prev => ({ ...prev, name: "Ali" }));

Keypoints: Avoid mutation, use setters, immutable updates.

Q5. What is the difference between onClick={handleClick} and onClick={handleClick()}?

The first passes a function reference for React to invoke when the event occurs. The second invokes the function during rendering and passes its return value instead.

Keypoints: Function reference vs immediate invocation; use an arrow function when arguments are needed.

INTERMEDIATE LEVEL

Group 5: React Hooks

Q1. What are React Hooks?

Hooks are functions that let function components use React features such as state, context, refs, and effects. Examples include useState, useEffect, and useRef.

Keypoints: Function components, state, effects, reusable logic.

Q2. What are the Rules of Hooks?

Call Hooks only at the top level of React function components or custom Hooks, not inside loops, conditions, or nested functions. This preserves consistent Hook ordering between renders.

Keypoints: Top-level calls, consistent order, custom Hooks.

Q3. What is useEffect?

useEffect synchronizes a component with external systems, such as network connections, browser APIs, or subscriptions. Its dependency array controls when the effect is re-synchronized.

useEffect(() => {
  document.title = "Dashboard";
}, []);

Keypoints: External synchronization, dependencies, cleanup.

Q4. What is the dependency array in useEffect?

An omitted dependency array causes the effect to run after every committed render; [] runs it on mount, with development Strict Mode caveats; [value] re-runs it when value changes.

Keypoints: Dependency tracking, effect lifecycle, Strict Mode.

Q5. What is a custom Hook?

A custom Hook is a JavaScript function whose name starts with use and that can reuse stateful React logic across components.

function useCounter() {
  const [count, setCount] = useState(0);
  return { count, increment: () => setCount(c => c + 1) };
}

Keypoints: Reusable logic, use prefix, shared behavior rather than shared state.

Group 6: Forms and Controlled Components

Q1. What is a controlled component?

A controlled form element gets its value from React state and updates that state through an event handler. React therefore controls the displayed input value.

const [name, setName] = useState("");

<input value={name}
       onChange={e => setName(e.target.value)} />

Keypoints: State-driven input, value, onChange.

Q2. What is an uncontrolled component?

An uncontrolled component stores its current input value in the DOM rather than React state. A ref can be used to access the value when needed.

const inputRef = useRef(null);

<input ref={inputRef} />
<button onClick={() => alert(inputRef.current.value)}>
  Read
</button>

Keypoints: DOM-managed value, refs, simpler input handling.

Q3. What is the difference between controlled and uncontrolled components?

Controlled inputs use React state as the source of truth, making validation and dynamic updates straightforward. Uncontrolled inputs rely on the DOM and are often accessed through refs.

Keypoints: React state vs DOM state, validation, refs.

Q4. How do you handle multiple form fields?

Store related fields in an object and use a shared change handler. Use a computed property name to update the field corresponding to the input's name.

const [form, setForm] = useState({ name: "", email: "" });

const handleChange = e =>
  setForm(prev => ({ ...prev, [e.target.name]: e.target.value }));

Keypoints: Object state, name attributes, immutable updates.

Q5. How do you validate a form?

Validate required fields and formats before submission, show field-level error messages, and prevent invalid submissions. Server-side validation is still necessary for security and data integrity.

Keypoints: Required fields, validation messages, server-side validation.

Group 7: API Integration and Asynchronous Operations

Q1. How do you fetch API data in React?

You can fetch data using fetch() or Axios, commonly inside an effect or through a dedicated data-fetching library. Handle loading, success, and error states.

useEffect(() => {
  fetch("/api/products")
    .then(r => {
      if (!r.ok) throw new Error("Request failed");
      return r.json();
    })
    .then(setProducts)
    .catch(setError);
}, []);

Keypoints: HTTP requests, loading state, error handling.

Q2. What is Axios?

Axios is an HTTP client library used to send requests and receive responses. It supports features such as interceptors, request configuration, and automatic JSON response transformation.

Keypoints: HTTP client, interceptors, request and response handling.

Q3. How do you handle loading and error states?

Maintain separate state variables for loading, data, and errors. Set loading before the request, handle failures, and reset loading in a finally block.

Keypoints: isLoading, error, try/catch/finally.

Q4. What is an Axios interceptor?

An interceptor runs before a request is sent or after a response is received. It can centralize authentication headers, logging, and selected error-handling behavior.

Keypoints: Request interceptor, response interceptor, shared HTTP logic.

Q5. How do you prevent stale API responses?

Cancel obsolete requests using AbortController or an appropriate client-library cancellation mechanism, and ignore results from outdated requests. This is important when search terms or component inputs change quickly.

Keypoints: Request cancellation, race conditions, cleanup.

Group 8: React Router

Q1. What is React Router?

React Router is a routing library that maps URLs to UI components and supports navigation without requiring a full-page reload for typical client-side routes.

Keypoints: Routes, navigation, SPA.

Q2. How do you define routes?

Use BrowserRouter, Routes, and Route in React Router's declarative routing API.

import { BrowserRouter, Routes, Route } from "react-router";

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</BrowserRouter>

Keypoints: BrowserRouter, Routes, Route. In many projects, these exports are imported from react-router-dom; follow the installed version's documentation.

Q3. What is the difference between Link and a normal anchor?

Link performs client-side navigation through the router, generally avoiding a full-page reload. A normal anchor navigates to a URL through the browser and may reload the page.

Keypoints: Client-side navigation, browser navigation, user experience.

Q4. How do you access route parameters?

Use the useParams() Hook to retrieve dynamic segments declared in the route path.

const { id } = useParams();
// Route example: /products/:id

Keypoints: Dynamic routes, useParams, route parameters.

Q5. What are nested routes?

Nested routes let a parent route render shared layout UI while child routes render inside an Outlet. They are useful for dashboards, admin areas, and shared navigation layouts.

Keypoints: Parent-child routes, Outlet, shared layouts.

Group 9: Context API and State Management

Q1. What is the Context API?

Context lets components read shared values without passing props through every intermediate component. It is useful for data such as themes, locale, and authenticated-user information.

Keypoints: Shared values, provider, consumer through useContext.

Q2. What is useContext?

useContext reads the current value of a Context from the closest matching provider above the component.

const ThemeContext = createContext("light");

function App() {
  const theme = useContext(ThemeContext);
  return <div className={theme}>Hello</div>;
}

Keypoints: Context object, provider value, consumer.

Q3. What is Redux?

Redux is a state-management library that centralizes application state in a store. Redux Toolkit is the recommended modern approach for most Redux applications.

Keypoints: Store, actions, reducers, Redux Toolkit.

Q4. What is the difference between Context API and Redux?

Context provides a way to distribute values through a component tree; Redux provides a more structured state-management system with reducers, middleware, and development tooling. Context can be sufficient for simple shared state, while Redux can suit complex application-wide state.

Keypoints: Value distribution vs state-management architecture, middleware, debugging.

Q5. What is useReducer?

useReducer manages state through a reducer function that receives the current state and an action and returns the next state. It is useful when state transitions are more complex than a simple setter can comfortably express.

function reducer(state, action) {
  if (action.type === "increment") return state + 1;
  return state;
}

const [count, dispatch] = useReducer(reducer, 0);

Keypoints: Reducer, action, dispatch, predictable transitions.

Group 10: Lists, Keys, and Component Lifecycle

Q1. Why are keys important in React?

Keys help React match list items between renders so it can identify inserted, removed, or reordered elements. Prefer stable unique identifiers rather than array indexes when the list can change.

Keypoints: Identity, reconciliation, stable IDs.

Q2. Why should array indexes be avoided as keys?

Indexes can cause React to associate existing component state with the wrong item when items are inserted, deleted, or reordered. Indexes are acceptable for truly static lists that never change order.

Keypoints: Reordering, component state, stable identity.

Q3. What are the lifecycle phases of a React component?

Conceptually, components mount, update, and unmount. Function components use rendering, Effects, and cleanup functions to implement the relevant behavior.

Keypoints: Mount, update, unmount, effect cleanup.

Q4. What is the purpose of effect cleanup?

A cleanup function releases or reverses external resources created by an effect, such as event listeners, timers, and subscriptions. React runs cleanup before re-synchronizing an effect and when the component unmounts.

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

Keypoints: Resource cleanup, subscriptions, memory leaks.

Q5. What is React Strict Mode?

StrictMode is a development-only tool that helps identify potential problems. It may run extra renders and effect setup/cleanup cycles in development to expose impure rendering and missing cleanup.

Keypoints: Development checks, purity, effect cleanup.

ADVANCED LEVEL

Group 11: Performance Optimization

Q1. What is React.memo?

React.memo can skip re-rendering a function component when its props have not changed according to its comparison. It is useful when re-rendering is expensive and the props are often unchanged.

const UserCard = React.memo(function UserCard({ name }) {
  return <p>{name}</p>;
});

Keypoints: Memoization, prop comparison, measure before optimizing.

Q2. What is useMemo?

useMemo caches the result of a calculation between renders while its dependencies remain unchanged. Use it when the calculation is expensive or stable identity matters for a measured optimization.

const filtered = useMemo(
  () => items.filter(item => item.active),
  [items]
);

Keypoints: Cached calculation, dependencies, performance optimization.

Q3. What is useCallback?

useCallback caches a function reference between renders while its dependencies remain unchanged. It can help when passing callbacks to memoized children or when stable function identity is required.

const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []);

Keypoints: Function identity, dependency array, memoized children.

Q4. What is the difference between useMemo and useCallback?

useMemo caches a calculated value, while useCallback caches a function reference. Both are performance tools and should be used when they provide a meaningful benefit.

Keypoints: Value vs function, dependency tracking, avoid unnecessary memoization.

Q5. How can you optimize a large React application?

Use profiling to identify bottlenecks, split code into lazy-loaded chunks, virtualize large lists, reduce unnecessary renders, and optimize network requests and assets.

Keypoints: React Profiler, code splitting, virtualization, network optimization.

Group 12: Advanced Hooks and Concurrent Rendering

Q1. What is useRef?

useRef stores a mutable value that persists across renders without triggering a re-render when changed. It is commonly used to access DOM elements or keep non-visual information between renders.

const inputRef = useRef(null);

<button onClick={() => inputRef.current.focus()}>
  Focus Input
</button>

Keypoints: Persistent reference, DOM access, no re-render on mutation.

Q2. What is useLayoutEffect?

useLayoutEffect runs after DOM mutations but before the browser repaints. It is useful when layout must be measured or adjusted before the user sees the result, but can block painting.

Keypoints: Layout measurement, pre-paint timing, use sparingly.

Q3. What is useTransition?

useTransition lets you mark certain state updates as non-urgent so React can keep more urgent interactions responsive. It returns isPending and a function to start a transition.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(value);
});

Keypoints: Non-urgent updates, pending state, responsive UI.

Q4. What is useDeferredValue?

useDeferredValue allows a part of the UI to lag behind a rapidly changing value so expensive rendering can be deferred. It does not itself debounce network requests.

Keypoints: Deferred rendering, responsive input, not request debouncing.

Q5. What is Suspense?

Suspense displays a fallback UI while a supported child operation is waiting, such as a lazy-loaded component. Data-fetching support depends on the React framework or library being used.

<Suspense fallback={<p>Loading...</p>}>
  <LazyDashboard />
</Suspense>

Keypoints: Fallback UI, React.lazy, supported asynchronous rendering.

Group 13: Error Handling and Testing

Q1. What is an Error Boundary?

An Error Boundary catches rendering errors in descendant components and displays fallback UI. Traditional Error Boundaries do not catch event-handler errors, most asynchronous errors, or errors thrown inside the boundary itself.

Keypoints: Fallback UI, descendant render errors, class-based implementation or framework support.

Q2. What is unit testing in React?

Unit testing checks a small piece of functionality in isolation, such as a utility function or component behavior. Common tools include Vitest or Jest with React Testing Library.

Keypoints: Isolated behavior, assertions, automated tests.

Q3. What is React Testing Library?

React Testing Library helps test components through user-observable behavior, such as accessible roles, labels, and visible text, rather than relying on component implementation details.

Keypoints: User-centric tests, accessibility, maintainable tests.

Q4. How do you test a button click?

Render the component, find the button by its accessible role and name, simulate a user click, and verify the expected result.

render(<Counter />);
await user.click(screen.getByRole("button", { name: /increment/i }));
expect(screen.getByText("1")).toBeInTheDocument();

Keypoints: Render, query, user interaction, assertion.

Q5. What is snapshot testing?

Snapshot testing records a serialized representation of a rendered output and compares future results against it. It can detect unexpected changes, but it does not replace tests of meaningful user behavior.

Keypoints: Regression detection, review changes, avoid overly broad snapshots.

Group 14: Security and Authentication

Q1. How do you protect routes in React?

Use authentication state and routing logic to control which screens are displayed. The backend must independently enforce authentication and authorization because client-side route protection is not a security boundary.

Keypoints: Route guards, authentication state, server-side authorization.

Q2. Where should JWT tokens be stored?

Storage depends on the threat model. JavaScript-accessible storage such as localStorage is vulnerable to token theft through XSS; secure, HttpOnly cookies can reduce that exposure but require appropriate CSRF protection.

Keypoints: XSS, HttpOnly cookies, Secure, SameSite, CSRF.

Q3. What is Cross-Site Scripting (XSS)?

XSS occurs when an attacker injects malicious script content that executes in another user's browser. Avoid unsafe HTML injection, sanitize untrusted HTML when necessary, and use appropriate browser security controls.

Keypoints: Untrusted input, output handling, avoid unsafe dangerouslySetInnerHTML.

Q4. How do you handle authorization in a React application?

The frontend can hide or disable actions based on permissions for usability, but the API must validate permissions for every protected operation. Never rely on UI checks alone.

Keypoints: Role-based UI, API authorization, least privilege.

Q5. How do you manage environment variables?

Use the build tool's supported environment-variable mechanism for configuration that may be exposed to the client. Never put secrets, private keys, or database credentials in frontend environment variables.

Keypoints: Public configuration, build-time variables, no client-side secrets.

Group 15: Architecture and Real-World Scenarios

Q1. How would you structure a large React application?

Organize code by feature or domain, keep reusable UI components separate, and isolate API clients, shared hooks, and application-level providers. The exact structure should match team size and project complexity.

Keypoints: Feature-based structure, separation of concerns, maintainability.

Q2. How do you share state between sibling components?

Move the shared state to their closest common parent and pass the value and update callbacks as props. For broader shared state, consider Context or a dedicated state-management library.

Keypoints: Lifting state up, common parent, shared state.

Q3. How do you prevent unnecessary API calls when searching?

Debounce user input, cancel obsolete requests where possible, and avoid issuing a request when the search value has not meaningfully changed. A data-fetching library can also cache and deduplicate requests.

Keypoints: Debouncing, cancellation, caching, request deduplication.

Q4. How do you implement pagination?

Maintain the current page and page size in state, request or select the corresponding records, and update the displayed list when the page changes. For large datasets, server-side pagination is often more efficient.

Keypoints: Current page, page size, server-side pagination.

Q5. How do you implement file uploads?

Use a file input, create a FormData object, and send it to a backend endpoint. Validate file type and size on both client and server, and enforce secure storage and access controls.

Keypoints: FormData, multipart upload, server validation.

Q6. How would you handle global API errors?

Centralize common HTTP behavior in an API client or data-fetching layer, and use shared error handling for logging, user notifications, and authentication failures. Avoid redirect loops and preserve useful error details.

Keypoints: Axios interceptors, error boundaries for rendering errors, centralized handling.

Q7. How would you migrate an Angular application to React?

Map Angular components and services to React components, Hooks, and API modules; migrate routing and forms; then move features incrementally and verify behavior with tests.

Keypoints: Component mapping, routing, forms, incremental migration.

Q8. How do you deploy a React application with a .NET Web API?

Build the React frontend and deploy it to a static host or web server, then deploy the .NET API separately or alongside it. Configure API URLs, HTTPS, CORS where applicable, and SPA fallback routing.

Keypoints: Frontend build, API deployment, CORS, HTTPS, routing.

Q9. What is server-side rendering (SSR)?

SSR generates HTML on the server for a request before delivering it to the browser. It can improve initial content delivery and SEO when implemented appropriately, but requires framework and infrastructure support.

Keypoints: Server-generated HTML, initial rendering, hydration.

Q10. What is hydration?

Hydration attaches React's client-side behavior to HTML that was already rendered on the server. The initial client render must match the server-rendered markup to avoid hydration mismatches.

Keypoints: SSR, client interactivity, markup consistency.

Group 16: JavaScript Concepts Required for React

Q1. What is destructuring?

Destructuring extracts values from arrays or properties from objects into variables. React frequently uses it to access props and Hook return values.

const { name, age } = user;
const [count, setCount] = useState(0);

Keypoints: Objects, arrays, concise syntax.

Q2. What is the spread operator?

The spread operator (...) expands an iterable or object’s enumerable properties. It is commonly used to create new arrays or objects when updating React state.

setItems(prev => [...prev, newItem]);

Keypoints: Immutable updates, copying, combining arrays and objects.

Q3. What is a closure?

A closure is a function that retains access to variables from its lexical scope even after the outer function has finished executing. Closures are fundamental to event handlers and Hooks.

Keypoints: Lexical scope, captured variables, stale closures.

Q4. What is the difference between map() and forEach()?

map() returns a new array containing the results of calling a function on each element. forEach() performs an action for each element and does not return a mapped array.

Keypoints: Transformation vs iteration, return value, JSX lists.

Q5. What is a Promise?

A Promise represents the eventual success or failure of an asynchronous operation. React applications commonly use Promises with fetch, Axios, and async/await for API calls.

Keypoints: Pending, fulfilled, rejected, asynchronous operations.

Group 17: Additional Advanced Interview Questions

Q1. What is reconciliation?

Reconciliation is React's process of comparing the previous and next render outputs to determine the required updates. Element types and keys help React decide whether to preserve or replace component instances.

Keypoints: Render comparison, component identity, keys.

Q2. What is batching in React?

Batching groups multiple state updates so React can process them with fewer renders. Modern React supports automatic batching across many asynchronous contexts when using the modern root API.

Keypoints: Grouped updates, fewer renders, state update scheduling.

Q3. Why can state updates appear asynchronous?

State setters schedule updates; they do not immediately change the state value captured by the currently executing render or event handler. React processes the update and provides the new value in a subsequent render.

Keypoints: Render snapshots, queued updates, functional setters.

Q4. What is the difference between useEffect and useLayoutEffect?

useEffect is intended for synchronizing external systems and generally does not block painting. useLayoutEffect runs before repaint and is appropriate when an effect must measure or synchronously adjust layout.

Keypoints: Effect timing, browser painting, layout measurement.

Q5. What is a portal in React?

A portal renders a component's DOM nodes into a different DOM container while retaining its place in the React component tree. It is useful for modals, tooltips, and overlays.

createPortal(<Modal />, document.getElementById("modal-root"));

Keypoints: createPortal, DOM placement, React event propagation.

Q6. What is lazy loading in React?

Lazy loading defers loading a component's code until it is needed. React.lazy() is commonly paired with Suspense to display a fallback while the component loads.

const Dashboard = lazy(() => import("./Dashboard"));

Keypoints: Code splitting, dynamic imports, Suspense.

Q7. What is the difference between CSR and SSR?

Client-side rendering (CSR) builds much of the UI in the browser using JavaScript. Server-side rendering (SSR) generates HTML on the server first and can improve initial content visibility and search indexing when configured correctly.

Keypoints: Rendering location, initial load, SEO considerations.

Q8. What is the purpose of useId?

useId generates IDs suitable for associating related UI elements, such as a form label and input. It should not be used to generate list keys.

Keypoints: Accessibility, stable relationships, not list identity.

Q9. What is useImperativeHandle?

useImperativeHandle customizes the value exposed through a ref, allowing a parent to access a limited set of imperative methods on a child component.

Keypoints: Ref customization, imperative APIs, component encapsulation.

Q10. What is the React Compiler?

The React Compiler is a build-time optimization tool that can automatically memoize components, values, and functions where appropriate. Its availability and behavior depend on the project's React version and compiler configuration.

Keypoints: Automatic memoization, compiler configuration, reduce manual optimization.

Quick Revision: Key React Concepts