Ecosystem Interview Questions
With Answers & Code Examples

Next.js 13+ introduced the App Router as a complete architectural shift:

// App Router — data fetching is just async/await
// app/users/page.tsx
async function UsersPage() {
  const users = await fetch('/api/users').then(r => r.json());
  return ;
}

// Pages Router equivalent
export async function getServerSideProps() {
  const users = await fetch('/api/users').then(r => r.json());
  return { props: { users } };
}
export default function UsersPage({ users }) {
  return ;
}

React Query manages server state with automatic caching, background updates, and synchronization — things you'd have to build manually with useEffect.

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// ─── Query — fetch and cache ──────────────────────────────────────────────────
function UserProfile({ id }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', id],      // cache key — same key = same cache
    queryFn: () => api.getUser(id),
    staleTime: 5 * 60 * 1000,   // treat as fresh for 5 minutes
    gcTime: 10 * 60 * 1000,     // keep in cache for 10 minutes
  });

  if (isLoading) return ;
  if (error) return ;
  return 
{user.name}
;
}

// ─── Mutation — update and invalidate ────────────────────────────────────────
function UpdateUser() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: (data) => api.updateUser(data),
    onSuccess: (data) => {
      // Invalidate cache → triggers refetch of all user queries
      queryClient.invalidateQueries({ queryKey: ['user'] });
      // OR optimistic update
      queryClient.setQueryData(['user', data.id], data);
    },
  });

  return (
     mutation.mutate({ id: 1, name: 'Bob' })}
      disabled={mutation.isPending}
    >
      {mutation.isPending ? 'Saving...' : 'Save'}
    
  );
}

import { create } from 'zustand';

// Define the store
const useCartStore = create((set, get) => ({
  items: [],
  total: 0,

  addItem: (item) => set(state => ({
    items: [...state.items, item],
    total: state.total + item.price,
  })),

  removeItem: (id) => set(state => {
    const item = state.items.find(i => i.id === id);
    return {
      items: state.items.filter(i => i.id !== id),
      total: state.total - (item?.price ?? 0),
    };
  }),

  clearCart: () => set({ items: [], total: 0 }),
}));

// Consume — component only re-renders when items changes
function CartBadge() {
  const items = useCartStore(state => state.items); // subscribe to slice
  return {items.length};
}

// Another component — only subscribes to total
function CartTotal() {
  const total = useCartStore(state => state.total);
  return ${total};
}

Zustand vs Context:

• Context — all consumers re-render on any context change. Fine for low-frequency updates (theme, auth).
• Zustand — subscription-based. Component re-renders only when its specific slice changes. Better for frequent updates and large stores.
• No Provider needed — Zustand store is a module. Import and use anywhere.

CRA (Create React App) is largely deprecated. Vite is the modern standard for React projects.

// Vite dev — serves files directly as ES modules
// Browser requests /src/App.tsx → Vite transforms just that file → instant

// CRA dev — bundles ALL files on start, then watches
// Every change → re-bundle affected module graph → slow

// Starting a new project
npm create vite@latest my-app -- --template react-ts
# vs
npx create-react-app my-app --template typescript  # avoid

Alternatives for production apps:

• Next.js — SSR, SSG, RSC, file-based routing
• Remix — full-stack, nested routing, web standards
• Vite + React Router — SPA with full control