React continues to dominate the frontend landscape in 2025. This guide covers everything from basic concepts to advanced patterns that will help you succeed in any React interview.

React Fundamentals

The Virtual DOM is a lightweight JavaScript representation of the actual DOM. When state changes, React creates a new Virtual DOM tree, diffs it with the previous one (reconciliation), and updates only the changed nodes in the real DOM. This batching and selective updating makes React performant.

Class components have lifecycle methods: mounting (constructor, render, componentDidMount), updating (shouldComponentUpdate, render, componentDidUpdate), and unmounting (componentWillUnmount). Functional components use useEffect to handle lifecycle events.

// useEffect lifecycle equivalent
useEffect(() => {
  // componentDidMount + componentDidUpdate
  console.log('Component mounted or updated');

  return () => {
    // componentWillUnmount
    console.log('Cleanup');
  };
}, [dependencies]);

Hooks let you use state and other React features in functional components. They were introduced to: reuse stateful logic between components, split complex components by concern rather than lifecycle, and avoid confusion with "this" in classes.

Advanced React Concepts

useCallback memoizes functions to prevent unnecessary re-renders of child components that receive callbacks as props. useMemo memoizes computed values to avoid expensive recalculations. Both accept a dependency array.

// useCallback vs useMemo
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

const memoizedValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

Suspense lets components wait for something before rendering, showing a fallback UI. It works with lazy loading (React.lazy), data fetching libraries that support it, and server components. Suspense boundaries can be nested for granular loading states.

Server Components render on the server only, reducing bundle size and enabling direct database/API access. They can't use hooks or browser APIs. Client Components handle interactivity. Next.js App Router uses this pattern by default.

State Management