React Advanced, Performance, and Architecture Interview Questions

15 questions on rendering performance, Suspense, error boundaries, Server Components, state management, testing, and project structure.

1. 1. How do you find and fix performance problems in a React app?

   Measure first with the React DevTools Profiler and the browser Performance panel to see which components render too often or too slowly. Typical fixes: move state down so fewer components re-render, split big components, memoize expensive work with useMemo or React.memo where it matters, virtualize long lists, lazy-load code, and avoid creating new objects in props needlessly.

2. 2. What causes a component to re-render?

   A component re-renders when its own state changes, when its parent re-renders (even with the same props, unless memoized), or when a context it reads changes. Re-rendering is not the same as updating the DOM: React only commits real changes after diffing.

3. 3. What is code splitting, and how do React.lazy and Suspense help?

   Code splitting loads parts of the app only when needed. React.lazy loads a component through a dynamic import, and Suspense shows a fallback while it loads.

   const Settings = React.lazy(() => import('./Settings'));
   
   function App() {
     return (
       <Suspense fallback={<p>Loading...</p>}>
         <Settings />
       </Suspense>
     );
   }

4. 4. What are error boundaries?

   Components that catch errors thrown while rendering their children and show a fallback UI instead of crashing the whole tree. They must be class components (using componentDidCatch or getDerivedStateFromError), or you can use a library such as react-error-boundary. They do not catch errors in event handlers or async code, which you handle with try/catch.

5. 5. What are higher-order components, render props, and why have hooks mostly replaced them?

   A higher-order component is a function that takes a component and returns an enhanced one. A render prop is a prop whose value is a function that returns UI. Both share logic but add nesting and make code harder to follow. Custom hooks share the same logic more directly, without extra components in the tree.

6. 6. What are React Server Components?

   Server Components render on the server and send their output to the client without shipping their JavaScript, so they can read data directly (from a database, for example) and keep bundles smaller. Client Components, marked with 'use client', handle interactivity and state. Frameworks such as Next.js implement the server side. Server components cannot use state or browser-only APIs.

7. 7. What is the difference between client-side rendering, server-side rendering, and static generation?

   Client-side rendering builds the page in the browser from JavaScript, which is simple but slower to first content and weaker for SEO. Server-side rendering builds HTML per request on the server, so users and crawlers get content immediately, and React then hydrates it. Static generation builds HTML ahead of time, which is fastest to serve but needs rebuilds or revalidation for changing data.

8. 8. What is hydration?

   When server-rendered HTML reaches the browser, React attaches event handlers and state to it so it becomes interactive. If the HTML React renders on the client differs from what the server sent (for example because of the current time or random values), it produces a hydration mismatch warning.

9. 9. How do you manage global state in a React application?

   Start with local state and lift it only as far as needed. Use context for low-frequency shared data like theme and auth. For complex or high-frequency client state use a library such as Redux Toolkit, Zustand, or Jotai. Treat server data (API results) separately with a caching library such as TanStack Query rather than copying it into global state.

10. 10. How would you structure a large React project?

    Group code by feature (components, hooks, and API calls for one feature together), keep shared UI primitives in a common folder, separate data access from presentation, and set consistent naming and import rules. Add TypeScript, linting, and tests. The right structure is the one the team can navigate easily, and it should evolve as the app grows.

11. 11. How do you test React components?

    Use React Testing Library with a test runner such as Vitest or Jest. Render the component, interact with it as a user would (find by role and label, click, type), and assert on what appears, rather than testing implementation details. Mock network calls at the boundary (for example with Mock Service Worker), and use Playwright or Cypress for end-to-end flows.

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

12. 12. How do you make a React app accessible?

    Use semantic HTML elements (button, nav, label), associate labels with inputs, manage focus for dialogs and route changes, provide text alternatives for images, ensure keyboard operability and sufficient color contrast, and use ARIA only when native elements cannot do the job. Test with a screen reader and tools such as axe and eslint-plugin-jsx-a11y.

13. 13. How do you handle forms and validation?

    For small forms, controlled inputs with state are enough. For larger ones use a library such as React Hook Form, often with a schema validator like Zod, to manage field state, validation, and submission with fewer re-renders. Always validate again on the server, since client checks can be bypassed. React 19 form Actions can also handle submission directly.

14. 14. What are portals?

    createPortal renders children into a different DOM node outside the parent hierarchy, such as the end of the body. It is used for modals, tooltips, and dropdowns that must escape overflow or z-index constraints, while keeping React's event bubbling and context working through the original tree.

15. 15. What are common React security concerns?

    React escapes values in JSX, which protects against most XSS. Danger comes from dangerouslySetInnerHTML with untrusted HTML (sanitize it first), user-controlled href values such as javascript: URLs, storing tokens in localStorage where scripts can read them, and exposing secrets in client bundles. Keep dependencies updated and use a Content Security Policy.