# Mastering the React Interview Top Questions and Best Practices ## TL;DR React interviews in 2026 focus on Server Components, Actions, the `use()` hook, and React Compiler. Understand the difference between server and client rendering, how Server Components reduce bundle size, and why React's automatic memoization changes how you structure apps. Know Next.js App Router patterns since that's the de facto React deployment standard. ## Introduction React has evolved dramatically since its early days. What was a cutting-edge pattern two years ago might be considered legacy today. If you're preparing for a React interview in 2026, you need to understand not just the fundamentals—which haven't changed—but also the modern paradigm shift toward server-side rendering as the default, the rise of Server Components, and React's new compiler-driven optimizations. This guide covers the questions you're likely to encounter, organized by concept with practical answers and code examples. Whether you're interviewing for your first React role or advancing to a senior position, these topics form the foundation of modern React development. ## Understanding React 19's Core Paradigm Shift **Q: What's the fundamental difference between Server Components and Client Components?** A: Server Components (new in React 19) execute only on the server and never send client-side code. They can access databases, APIs, and secrets directly. Client Components execute in the browser and can use hooks like `useState` and `useEffect`. Server Components are the default now. You explicitly mark components with `'use client'` to make them interactive: ```jsx // Server Component (default in Next.js App Router) export default async function PostList() { const posts = await db.posts.findAll(); return (

{post.title}

); } // Client Component (explicitly marked) 'use client'; import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ; } ``` Why? Server Components reduce JavaScript sent to browsers, improve time-to-interactive, and simplify data fetching. **Q: How do Server Components affect data fetching?** A: In Server Components, you can use `async`/`await` directly without moving to an API route. You fetch data server-side before rendering: ```jsx // No API route needed export default async function UserProfile({ userId }) { const user = await fetch(`https://api.example.com/users/${userId}`).then(r => r.json()); return (

{user.name}

{user.bio}

); } ``` If the component needs interactivity (like a form), you extract the interactive part into a Client Component and pass the data as props. ## React Actions and Form Handling **Q: What are React Actions and why do they matter?** A: Actions are asynchronous functions that run on the server. They're typically used for mutations—creating, updating, or deleting data. They simplify form handling by eliminating the need for API routes: ```jsx 'use client'; import { createPost } from './actions'; export default function CreatePostForm() { return (

<button type="submit">Create Post</button>
    </form>
  );
}
```

And in `actions.ts`:

```typescript
'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  const content = formData.get('content');

await db.posts.create({ title, content });
  revalidatePath('/posts');
}
```

Actions automatically handle errors, loading states, and cache revalidation. They're more secure because sensitive logic never exposes to the client.

## The `use()` Hook and Async Operations

**Q: When do you use the `use()` hook?**

A: The `use()` hook lets Client Components consume server-side data or promises. It's useful for converting async operations into synchronous values:

```jsx
'use client';
import { use } from 'react';

export default function PostContent({ postPromise }) {
  const post = use(postPromise);

return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}
```

Server Component wraps the data fetch and passes the promise:

```jsx
export default function PostPage({ slug }) {
  const postPromise = fetch(`/api/posts/${slug}`).then(r => r.json());

return <Suspense fallback={<p>Loading...</p>}>
    <PostContent postPromise={postPromise} />
  </Suspense>;
}
```

This pattern bridges server and client boundaries cleanly.

## React Compiler and Automatic Memoization

**Q: What does React Compiler do?**

A: React Compiler (in development/preview) automatically memoizes components and values. You don't manually write `useMemo`, `useCallback`, or `React.memo` anymore. The compiler detects expensive operations and optimizes them:

```jsx
// Before: manual optimization
function ExpensiveComponent({ data, onUpdate }) {
  const cachedValue = useMemo(() => processData(data), [data]);
  const cachedCallback = useCallback(() => onUpdate(cachedValue), [cachedValue, onUpdate]);

return <Child value={cachedValue} onChange={cachedCallback} />;
}

// With React Compiler: no optimization code needed
function ExpensiveComponent({ data, onUpdate }) {
  const cachedValue = processData(data); // Compiler auto-memoizes
  const cachedCallback = () => onUpdate(cachedValue); // Auto-memoized callback

return <Child value={cachedValue} onChange={cachedCallback} />;
}
```

The compiler analyzes your code at build time and injects memoization where needed. This reduces boilerplate and makes code more readable.

## Next.js App Router Patterns

**Q: How do you structure a full-stack feature in Next.js App Router?**

A: The pattern is: Server Component → Client Component for interactivity → Action for mutations → Cache revalidation.

```jsx
// app/posts/page.tsx - Server Component
import { PostList } from './components/PostList';

export default async function PostsPage() {
  const posts = await db.posts.findAll();

return (
    <div>
      <h1>Posts</h1>
      <PostList initialPosts={posts} />
    </div>
  );
}

// components/PostList.tsx - Client Component
'use client';
import { useState } from 'react';
import { deletePost } from '../actions';

export function PostList({ initialPosts }) {
  const [posts, setPosts] = useState(initialPosts);

async function handleDelete(id) {
    await deletePost(id);
    setPosts(posts.filter(p => p.id !== id));
  }

return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          {post.title}
          <button onClick={() => handleDelete(post.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

// actions.ts
'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';

export async function deletePost(id: string) {
  await db.posts.delete(id);
  revalidatePath('/posts');
}
```

## Legacy Patterns (Still Asked)

**Q: What are class components and when are they still relevant?**

A: Class components are the pre-hooks way of managing state and side effects. They're rarely used in new code but appear in legacy codebases:

```jsx
class Counter extends React.Component {
  state = { count: 0 };

render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}
```

Functional components with hooks are the modern standard. If you encounter class components in an interview, show you understand them but emphasize hooks-based approaches.

**Q: What's the difference between `useEffect` and server-side data fetching?**

A: `useEffect` runs in the browser after rendering. If you can fetch data server-side (in a Server Component or Action), you should—it's faster and doesn't create a loading waterfall:

```jsx
// Slower: client-side fetch with waterfall
'use client';
import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser);
  }, [userId]);

return user ? <p>{user.name}</p> : <p>Loading...</p>;
}

// Faster: server-side fetch
export default async function UserProfile({ userId }) {
  const user = await fetch(`https://api.example.com/users/${userId}`).then(r => r.json());
  return <p>{user.name}</p>;
}
```

## Common Interview Topics

**React Hooks Overview:**
- `useState`: state management
- `useEffect`: side effects and cleanup
- `useContext`: prop-drilling avoidance
- `useReducer`: complex state logic
- `useCallback`: memoized callbacks
- `useMemo`: memoized expensive values
- `useRef`: access DOM elements or mutable storage
- `use()`: consume promises in Client Components

**Performance Optimization:**
- Code splitting with dynamic imports
- Image optimization (AVIF, WebP)
- Bundle analysis tools (Webpack Bundle Analyzer)
- Lazy loading components with `Suspense`
- React DevTools Profiler for identifying render issues

**Testing Best Practices:**
- Unit tests with Vitest or Jest
- Component testing with React Testing Library
- Integration tests for full features
- E2E tests with Playwright or Cypress

## Key Takeaways

React in 2026 is fundamentally about **server-first rendering**. Interviews now expect you to understand when to use Server Components versus Client Components, how Actions simplify mutations, and why the React Compiler changes how you think about optimization.

Master these core concepts, understand the Next.js App Router, and be prepared to discuss both modern patterns and legacy code. Interviewers want to see that you understand *why* certain choices exist, not just *how* to write code.

The most successful React developers in 2026 think in terms of data flow, server boundaries, and user experience—not just component state management.
</article></body></html>

#interview-prep

Mastering the React Interview top Questions and Best Practices

Stay on the Nerd Track