React Interview Prep

JSX

JSX compiles to React.createElement(type, props, ...children). It's not HTML — className, htmlFor, camelCase events.

Copy// JSX
const el = Click;

// Compiled to:
const el = React.createElement('button', { onClick: handleClick, className: 'btn' }, 'Click');

Props

• Read-only — never mutate props
• One-way data flow (parent → child)
• Spread carefully: <Comp {...props} />

Controlled vs Uncontrolled Forms

Copy// Controlled: React owns the value
const [email, setEmail] = useState('');
 setEmail(e.target.value)} />

// Uncontrolled: DOM owns the value
const inputRef = useRef(null);

Keys in Lists

Keys help React identify which items changed. Use stable, unique IDs — never array indices (causes bugs on reorder/delete).

Copy// BAD: index as key
{items.map((item, i) => 
)}

// GOOD: stable ID
{items.map(item => 
)}

useState — Lazy Init & Functional Updates

Copy// Lazy init: only called once
const [filters, setFilters] = useState(() =>
  JSON.parse(localStorage.getItem('filters') || '[]')
);

// Functional update: safe when depending on prev state
setCount(prev => prev + 1);

useEffect — Dependency Array Rules

CopyuseEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal })
    .then(r => r.json())
    .then(setData);
  return () => controller.abort(); // Cleanup!
}, [url]); // Re-runs when url changes

useRef — Beyond DOM Refs

Copy// Store mutable value without triggering re-render
const renderCount = useRef(0);
renderCount.current++;

// Store previous value
const prevValue = useRef(value);
useEffect(() => { prevValue.current = value; }, [value]);

useReducer — Complex State

Copytype Action = { type: 'increment' } | { type: 'reset'; payload: number };

function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'reset':    return action.payload;
  }
}

Rules of Hooks

• Only call hooks at the top level (never inside loops/conditions)
• Only call hooks in React functions (not regular JS)
• Why? Hooks use a linked list — call order must be consistent

Custom Hook Example

Copyfunction useLocalStorage(key: string, initial: T) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });
  const set = (v: T) => {
    setValue(v);
    localStorage.setItem(key, JSON.stringify(v));
  };
  return [value, set] as const;
}

Composition over Inheritance

React favors composition. Pass components as props (children, named slots) rather than extending classes.

Higher-Order Components (HOC)

Copyfunction withAuth
(WrappedComponent: React.ComponentType
) {
  return function AuthGuard(props: P) {
    const { user } = useAuth();
    if (!user) return ;
    return ;
  };
}

const ProtectedDashboard = withAuth(Dashboard);

Compound Components

Components that work together, sharing implicit state via Context. Example: <Select> + <Option>.

Copyconst TabCtx = React.createContext('');

function Tabs({ children, defaultTab }: Props) {
  const [active, setActive] = useState(defaultTab);
  return {children};
}

function Tab({ id, children }: TabProps) {
  const active = useContext(TabCtx);
  return ;
}

Error Boundaries

Class components only (as of React 18). Catch JS errors in the component tree and show fallback UI.

Copyclass ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(err: Error, info: React.ErrorInfo) {
    logErrorToService(err, info);
  }
  render() {
    return this.state.hasError ?  : this.props.children;
  }
}

Decision Matrix

Context with useReducer (Production Pattern)

Copyconst AuthCtx = createContext(null);

function AuthProvider({ children }: Props) {
  const [state, dispatch] = useReducer(authReducer, initialState);
  return (
    
      {children}
    
  );
}

function useAuth() {
  const ctx = useContext(AuthCtx);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

Zustand (Minimal Boilerplate)

Copyconst useStore = create((set) => ({
  count: 0,
  increment: () => set(s => ({ count: s.count + 1 })),
}));

// In component:
const count = useStore(s => s.count);  // Fine-grained subscription

React.memo — Memoize Component Output

Copyconst ExpensiveList = React.memo(function ExpensiveList({ items }: Props) {
  return 
{items.map(i => 
{i.name}
)}
;
});

// memo only helps if parent re-renders with same props
// For function props, use useCallback in parent!

useMemo & useCallback

Copy// useMemo: memoize expensive computed value
const sorted = useMemo(() =>
  [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// useCallback: stable function reference for React.memo children
const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(i => i.id !== id));
}, []);  // no deps = never recreated

Code Splitting

Copyconst Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    }>
      
        } />
      
    
  );
}

Virtualization for Long Lists

Use react-window or @tanstack/react-virtual. Only render visible rows (e.g. 50 of 10,000) instead of all.

Web Vitals Targets

React Router v6

Copy// App.tsx

  }>
    } />
    } />
  


// Layout.tsx
function Layout() {
  return <>

Key Router Hooks

• useNavigate() — programmatic navigation
• useParams() — URL params (:id)
• useSearchParams() — query string
• useLocation() — current path + state

TanStack Query — Server State

Copyconst { data, isLoading, error } = useQuery({
  queryKey: ['users', userId],
  queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  staleTime: 5 * 60 * 1000,  // 5 min cache
});

// Mutation with optimistic update
const mutation = useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await queryClient.cancelQueries({ queryKey: ['users'] });
    const prev = queryClient.getQueryData(['users']);
    queryClient.setQueryData(['users'], old => updateInList(old, newUser));
    return { prev };  // Rollback context
  },
  onError: (_, __, ctx) => queryClient.setQueryData(['users'], ctx.prev),
});

React Fiber Architecture

Fiber is React's reconciliation engine (React 16+). It represents each component as a "fiber" unit of work. Key capability: interruptible rendering.

• Work is broken into units that can pause/resume
• Higher-priority updates (user input) can interrupt lower-priority ones
• Enables Concurrent Mode, Suspense, time-slicing

Concurrent Features (React 18+)

Copy// useTransition: mark updates as non-urgent
const [isPending, startTransition] = useTransition();
startTransition(() => setSearchQuery(value));  // Can be interrupted

// useDeferredValue: defer rendering of slow parts
const deferred = useDeferredValue(query);
// deferred lags behind query — list re-renders at lower priority

Automatic Batching (React 18)

Copy// React 18: all setStates batched even in async/event handlers
async function handleClick() {
  setLoading(true);   // }
  setError(null);     // } — React 18 batches all 3,
  setData(result);    // }   one single re-render
}

Server Components (React 19 / Next.js)

• Render on the server, send HTML — zero JS to client
• Can access DB/FS directly (no useEffect needed)
• Cannot use useState, useEffect, browser APIs
• Client components: add 'use client' directive

Copy// Server Component (default in Next.js App Router)
async function UserList() {
  const users = await db.user.findMany();  // Direct DB access!
  return 
{users.map(u => 
{u.name}
)}
;
}

Philosophy: Test behavior, not implementation. Query by what users see, not internal state.

React Testing Library Queries (Priority Order)

1. getByRole — most accessible, preferred
2. getByLabelText — for form inputs
3. getByPlaceholderText — fallback for inputs
4. getByText — for non-interactive text
5. getByTestId — last resort only

Component Test Example

Copyimport { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('submits login form', async () => {
  const user = userEvent.setup();
  render();

  await user.type(screen.getByLabelText(/email/i), 'a@b.com');
  await user.type(screen.getByLabelText(/password/i), 'secret');
  await user.click(screen.getByRole('button', { name: /log in/i }));

  expect(mockSubmit).toHaveBeenCalledWith({ email: 'a@b.com', password: 'secret' });
});

Mock Service Worker (MSW)

Copy// handlers.ts
export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  }),
];

// No real network calls in tests!

Testing Async

Copytest('loads and displays users', async () => {
  render();
  expect(screen.getByText(/loading/i)).toBeInTheDocument();
  await waitFor(() => screen.getByText('Alice'));
  expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
});

TypeScript with React

Copy// Props typing
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  children?: React.ReactNode;
}

// Event handler typing
const handleChange = (e: React.ChangeEvent) => {
  setEmail(e.target.value);
};

CSS Strategy Comparison

Folder Structure: Feature-Based (Preferred)

Copysrc/
  features/
    auth/
      components/LoginForm.tsx
      hooks/useAuth.ts
      api/authApi.ts
      index.ts         ← barrel export
    dashboard/
      components/...
      hooks/...
  shared/
    components/Button.tsx
    utils/formatDate.ts
  app/
    App.tsx
    routes.tsx

Anti-pattern: layer-based folders (components/, hooks/, services/) — forces cross-cutting changes across many directories.

Barrel Exports (Index Files)

Copy// features/auth/index.ts
export { LoginForm } from './components/LoginForm';
export { useAuth } from './hooks/useAuth';

// Import cleanly:
import { LoginForm, useAuth } from 'features/auth';

Storybook

Document and develop components in isolation. Each component gets a "story" showing all its states. Essential for design systems and shared component libraries.

Code Review Checklist for React PRs

• Are hooks dependencies arrays correct? (no stale closures)
• Is state minimal? (derive values, don't duplicate)
• Are effects cleaning up? (subscriptions, timers, abort)
• Any unnecessary any TypeScript casts?
• Accessibility: ARIA roles, keyboard navigation, focus management
• Performance: any render waterfall? Unnecessary re-renders?

ADR (Architecture Decision Record)

Document significant technical decisions: context, options considered, decision, and consequences. Prevents "why did we do this?" months later.

Mentoring Junior Developers

• Pair program on complex problems — explain the "why"
• PR comments as teaching opportunities, not criticism
• Assign "stretch" tasks just beyond their comfort zone
• Code reviews: ask questions before suggesting ("what happens if…?")

Migration Strategy (e.g. React 18 upgrade)

1. Audit breaking changes and deprecated APIs
2. Update in a separate branch, fix one issue at a time
3. Update tests to reflect new behavior (batching, Strict Mode)
4. Feature-flag rollout with monitoring
5. Write an ADR capturing trade-offs

Performance Budgeting

• Set LCP < 2.5s, INP < 100ms, CLS < 0.1 as CI gates
• Bundle size budgets per route (e.g. max 200KB initial JS)
• Use Lighthouse CI or SpeedCurve for tracking over time

Rendering Strategies

• CSR — JavaScript renders in browser; bad for SEO, fast navigations
• SSR — rendered on every request; always fresh, slower TTFB
• SSG — built at build time; fastest, but stale until redeploy
• ISR — SSG + revalidate after N seconds; best of SSG + SSR
• Streaming SSR — progressive HTML chunks; faster FCP

App Router vs Pages Router

Next.js App Router (13.4+) is the new standard: Server Components by default, nested layouts, server actions. Pages Router still works but is legacy. New projects should use App Router.

When to Choose React without Next.js

• Internal dashboards / admin tools (SEO irrelevant)
• When you already have a separate backend (Rails, Django)
• PWAs or Electron apps