React Interview Questions and Answers

// Props — data passed from parent; read-only in the receiving component
function Greeting({ name, age }) {
  return <h1>Hello, {name} ({age})</h1>;
}

// State — private data managed within the component; triggers re-render when changed
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

// CORRECT
function SearchComponent() {
  const [query, setQuery] = useState('');
  const results = useSearch(query);   // Custom hook
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// WRONG — hook inside a condition (breaks rules)
function BrokenComponent({ show }) {
  if (show) {
    const [count, setCount] = useState(0);  // Error!
  }
}

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    let cancelled = false;   // Guard against race conditions

    async function loadUser() {
      const data = await fetchUser(userId);
      if (!cancelled) setUser(data);
    }

    loadUser();

    // Cleanup function — runs before next effect OR on unmount
    return () => {
      cancelled = true;
    };
  }, [userId]);  // Dependency array — re-runs when userId changes

  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

// Dependency array behavior:
// [] (empty)  — runs once on mount, cleanup on unmount
// [dep1, dep2] — runs when deps change
// omitted     — runs on every render (usually wrong)

// useState — best for simple, independent state values
const [count, setCount] = useState(0);
const [name, setName] = useState('');

// useReducer — best for complex state with multiple related actions
import { useReducer } from 'react';

const initialState = { count: 0, status: 'idle', error: null };

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'FETCH_START':
      return { ...state, status: 'loading', error: null };
    case 'FETCH_SUCCESS':
      return { ...state, status: 'success', count: action.payload };
    case 'FETCH_ERROR':
      return { ...state, status: 'error', error: action.payload };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <p>Count: {state.count} ({state.status})</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
    </>
  );
}

import { createContext, useContext, useState } from 'react';

// Create context
const ThemeContext = createContext('light');

// Provider wraps the component tree
function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <MainLayout />
    </ThemeContext.Provider>
  );
}

// Any descendant can consume without prop drilling
function ThemeToggle() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
      Current: {theme}
    </button>
  );
}

import { useMemo, useCallback, memo } from 'react';

// useMemo — memoize expensive computed value
function ProductList({ products, searchQuery }) {
  // Only recomputes when products or searchQuery changes
  const filteredProducts = useMemo(
    () => products.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase())),
    [products, searchQuery]
  );

  return filteredProducts.map(p => <ProductCard key={p.id} product={p} />);
}

// useCallback — memoize a function reference
function Parent() {
  const [count, setCount] = useState(0);

  // Without useCallback, new function reference every render →
  // Child re-renders even when not needed (if it's wrapped in memo)
  const handleSubmit = useCallback((data) => {
    submitForm(data, count);
  }, [count]);  // Only new function when count changes

  return <ExpensiveChild onSubmit={handleSubmit} />;
}

// memo — prevent re-render if props haven't changed (shallowly)
const ExpensiveChild = memo(function ExpensiveChild({ onSubmit }) {
  return <button onClick={() => onSubmit({})}>Submit</button>;
});

// BAD — key based on index; if items reorder, React sees same positions → wrong updates
{items.map((item, index) => (
  <TodoItem key={index} todo={item} />
))}

// GOOD — stable, unique key
{items.map(item => (
  <TodoItem key={item.id} todo={item} />
))}

// Also: avoid generating keys randomly (Math.random()) — defeats the purpose

import { lazy, Suspense } from 'react';

// Code-split a component — bundle for HeavyChart is loaded only when rendered
const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<div className="skeleton">Loading chart...</div>}>
        <HeavyChart data={data} />
      </Suspense>
    </div>
  );
}

// Nested Suspense boundaries for granular loading states
function App() {
  return (
    <Suspense fallback={<AppSkeleton />}>
      <Header />
      <Suspense fallback={<ChartSkeleton />}>
        <Dashboard />
      </Suspense>
    </Suspense>
  );
}

import { useState, useTransition } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value);  // Urgent — update input immediately

    startTransition(() => {    // Non-urgent — can be interrupted
      const filtered = heavySearch(e.target.value);
      setResults(filtered);
    });
  }

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <p>Searching...</p>}
      <ResultsList results={results} />
    </div>
  );
}

// page.tsx (Server Component — runs on server, no 'use client')
async function UserProfile({ userId }) {
  // Direct DB access — no API layer needed!
  const user = await db.users.findById(userId);
  const posts = await db.posts.findByUserId(userId);

  return (
    <div>
      <h1>{user.name}</h1>
      {/* InteractiveButton is a Client Component */}
      <InteractiveButton userId={userId} />
      <PostList posts={posts} />
    </div>
  );
}

function ContactForm() {
  async function submitAction(formData) {
    'use server';  // Server Action
    await sendEmail(formData.get('email'));
  }

  return (
    <form action={submitAction}>
      <input name="email" type="email" />
      <button type="submit">Send</button>
    </form>
  );
}

const data = use(fetchPromise);  // Suspends until resolved
const theme = use(ThemeContext); // Like useContext but composable

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? 'Sending...' : 'Send'}</button>;
}

const [optimisticMessages, addOptimistic] = useOptimistic(messages);

import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number = 300): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);  // Clear timer if value changes before delay
  }, [value, delay]);

  return debouncedValue;
}

// Usage
function SearchBox() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      searchAPI(debouncedQuery);  // Only fires 300ms after user stops typing
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

import { createContext, useContext, useState } from 'react';

const AccordionContext = createContext(null);

function Accordion({ children, defaultOpen = null }) {
  const [openId, setOpenId] = useState(defaultOpen);

  return (
    <AccordionContext.Provider value={{ openId, setOpenId }}>
      <div className="accordion">{children}</div>
    </AccordionContext.Provider>
  );
}

function AccordionItem({ id, title, children }) {
  const { openId, setOpenId } = useContext(AccordionContext);
  const isOpen = openId === id;

  return (
    <div>
      <button onClick={() => setOpenId(isOpen ? null : id)}>
        {title}
      </button>
      {isOpen && <div className="content">{children}</div>}
    </div>
  );
}

// Clean, expressive usage
<Accordion defaultOpen="faq-1">
  <AccordionItem id="faq-1" title="What is React?">
    React is a UI library...
  </AccordionItem>
  <AccordionItem id="faq-2" title="What are hooks?">
    Hooks are functions...
  </AccordionItem>
</Accordion>