React Developer Interview 2026: 50+ Hooks, Performance & State Management Questions

The Virtual DOM is a JavaScript representation of the real DOM. React uses it as a layer of abstraction between your code and actual DOM manipulation.

Why not update the DOM directly?

• Batching: Multiple state updates can be batched into a single DOM update
• Diffing: React calculates the minimal changes needed (reconciliation)
• Predictability: Declarative code is easier to reason about than imperative DOM manipulation

{`// Without Virtual DOM (imperative)
element.innerHTML = 'new content';
element.classList.add('active');
element.setAttribute('data-id', '123');
// Each line triggers layout/paint

// With Virtual DOM (declarative)
setState({ content: 'new content', active: true, id: 123 });
// React batches and applies minimal changes`}

The Rules:

1. Only call hooks at the top level (not in loops, conditions, or nested functions)
2. Only call hooks from React functions (components or custom hooks)

Why these rules exist:

React relies on the order of hook calls to associate state with components. Hooks don't have names—React tracks them by position.

{`// BAD: Hook order changes between renders
function Component({ showName }) {
  if (showName) {
    const [name, setName] = useState('');  // Called conditionally!
  }
  const [age, setAge] = useState(0);
}

// First render: [name, age]
// Second render (showName=false): [age]
// React thinks 'age' state is 'name' state!

// GOOD: Consistent hook order
function Component({ showName }) {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  // Conditionally USE the value, not the hook
}`}

useState: Simple state, independent values

useReducer: Complex state logic, related state transitions

{`// useState: Good for simple, independent state
const [count, setCount] = useState(0);
const [name, setName] = useState('');

// useReducer: Better for complex, related state
const initialState = { count: 0, step: 1, history: [] };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        count: state.count + state.step,
        history: [...state.history, state.count]
      };
    case 'setStep':
      return { ...state, step: action.payload };
    case 'reset':
      return initialState;
  }
}

const [state, dispatch] = useReducer(reducer, initialState);`}

Use useReducer when:

• Next state depends on previous state in complex ways
• Multiple values need to update together
• State logic is complex enough to extract and test
• You want to pass dispatch down instead of multiple setters

useMemo: Memoizes a computed value

useCallback: Memoizes a function reference

{`// useMemo: Cache expensive computation
const sortedList = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

// useCallback: Cache function reference
const handleClick = useCallback(() => {
  console.log(id);
}, [id]);

// useCallback is actually useMemo for functions:
// useCallback(fn, deps) === useMemo(() => fn, deps)`}

When to use them:

• useMemo: Expensive calculations, derived state
• useCallback: Functions passed to memoized children (React.memo)

Dependency array controls when the effect runs:

{`useEffect(() => { ... });        // Runs after every render
useEffect(() => { ... }, []);    // Runs once on mount
useEffect(() => { ... }, [a, b]); // Runs when a or b changes`}

Why it runs twice in development (React 18+ Strict Mode):

React intentionally mounts, unmounts, and remounts components to help you find bugs in your effects. This catches:

• Missing cleanup functions (subscriptions, timers)
• Effects that aren't idempotent
• Race conditions in data fetching

{`// BAD: No cleanup, will leak subscriptions
useEffect(() => {
  const sub = api.subscribe(data);
}, []);

// GOOD: Proper cleanup
useEffect(() => {
  const sub = api.subscribe(data);
  return () => sub.unsubscribe(); // Cleanup!
}, []);`}

React.memo is a higher-order component that memoizes the rendered output. It performs a shallow comparison of props and skips re-rendering if props haven't changed.

{`const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  return items.map(item => );
});

// With custom comparison
const MyComponent = React.memo(Component, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id; // Return true to skip render
});`}

When to use:

• Pure functional components with expensive renders
• Components that re-render often with same props
• List items in large lists

When NOT to use:

• Components that almost always receive new props
• Simple components (memo overhead isn't worth it)
• When props include callbacks created inline (they'll always be new!)

{`// Controlled: React state is source of truth
function Controlled() {
  const [value, setValue] = useState('');
  return (
     setValue(e.target.value)}
    />
  );
}

// Uncontrolled: DOM is source of truth
function Uncontrolled() {
  const inputRef = useRef();
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  return ;
}`}

When to use controlled: Form validation, conditional disabling, formatting input, most cases

When to use uncontrolled: File inputs (must be uncontrolled), simple forms, integrating with non-React code

1. Measure first (React DevTools Profiler):

• Identify components that re-render frequently
• Find expensive renders (flame chart)
• Look for unnecessary re-renders

2. Common optimizations:

• Memoization: React.memo, useMemo, useCallback (when needed)
• State colocation: Keep state close to where it's used
• Virtualization: react-window for long lists
• Code splitting: React.lazy + Suspense
• Avoid inline objects/functions: In props passed to memoized children

{`// Code splitting with lazy loading
const HeavyComponent = lazy(() => import('./HeavyComponent'));

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

Reconciliation is how React decides what to update in the DOM. It compares the new Virtual DOM tree with the previous one.

Key assumptions (make it O(n)):

1. Elements of different types produce different trees (full rebuild)
2. Keys hint which children are stable across renders

How it works:

• Same element type → Update attributes, recurse on children
• Different element type → Unmount old tree, mount new tree
• Lists without keys → Positional comparison (slow, buggy)
• Lists with keys → Match by key, reorder efficiently

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

// Test rendering and user interaction
test('submits form with user data', async () => {
  const onSubmit = jest.fn();
  render();

  // Query elements like a user would
  await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');
  await userEvent.type(screen.getByLabelText(/password/i), 'password123');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));

  expect(onSubmit).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123'
  });
});

// Test async behavior
test('loads and displays data', async () => {
  render();

  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText('John Doe')).toBeInTheDocument();
  });
});`}

Testing philosophy:

• Test behavior, not implementation
• Query elements the way users find them (role, label, text)
• Avoid testing internal state directly

Custom hooks are functions that use other hooks to encapsulate reusable logic. They must start with "use".

{`// Custom hook for API calls
function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        if (!cancelled) {
          setData(json);
          setLoading(false);
        }
      } catch (e) {
        if (!cancelled) {
          setError(e);
          setLoading(false);
        }
      }
    }

    fetchData();
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

// Usage
function UserProfile({ userId }) {
  const { data: user, loading, error } = useApi(\`/api/users/\${userId}\`);
  // ...
}`}

Create custom hooks when:

• Logic is reused across multiple components
• Component logic is complex and can be extracted
• You want to share stateful logic (not UI)

Architecture decisions:

• State management: useReducer for complex form state, or React Hook Form for performance
• Validation: Zod/Yup schema with real-time and submit-time validation
• Field arrays: Handle add/remove/reorder with stable keys

{`// Using React Hook Form + Zod
const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  addresses: z.array(z.object({
    street: z.string(),
    city: z.string(),
  })).min(1),
});

function ComplexForm() {
  const { register, control, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "addresses",
  });

  return (
    

      
      {errors.name && {errors.name.message}}

      {fields.map((field, index) => (
        

          
           remove(index)}>Remove
        
      ))}
       append({ street: '', city: '' })}>
        Add Address
      
    
  );
}`}

{`function InfiniteList() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const observerRef = useRef();
  const lastItemRef = useRef();

  // Intersection Observer for detecting scroll to bottom
  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setPage(p => p + 1);
        }
      },
      { threshold: 1.0 }
    );

    if (lastItemRef.current) {
      observerRef.current.observe(lastItemRef.current);
    }

    return () => observerRef.current?.disconnect();
  }, [hasMore, items.length]);

  // Fetch data when page changes
  useEffect(() => {
    fetchItems(page).then(newItems => {
      setItems(prev => [...prev, ...newItems]);
      setHasMore(newItems.length === PAGE_SIZE);
    });
  }, [page]);

  return (
    

      {items.map((item, i) => (
        

          {item.content}
        
      ))}
      {hasMore && }
    
  );
}`}

Production considerations:

• Virtualization for very long lists (react-window)
• Handle loading, error states
• Debounce scroll events if using scroll listener
• Consider using React Query for caching and deduplication