React Functional Components and Hooks Questions

Focuses on the functional component model and React hooks API. Topics include using state with useState, managing side effects and lifecycle with useEffect including dependency arrays and cleanup, avoiding common pitfalls such as stale closures and infinite loops, memoization and performance patterns with useMemo and useCallback, state management with useReducer, context consumption with useContext, building and testing custom hooks, rules of hooks, and common patterns for data fetching, event handling, and component local state. Emphasis spans from junior correct usage to advanced patterns and debugging of hooks.

MediumTechnical

30 practiced

You have a Timer component that uses useEffect to run setInterval every second and logs the current count. A naive implementation logs stale values due to closures. In React (JavaScript), show the incorrect approach and then implement two correct fixes: (1) use a functional state update inside the interval, and (2) use a ref to always read the latest value inside the interval. Explain pros and cons of each solution.

Sample Answer

**Incorrect (stale closure)**

javascript

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const id = setInterval(() => {
      // This closes over the initial `count` -> stale value
      console.log("stale count:", count);
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []); // [] means effect runs once; `count` inside is stale
}

**Fix 1 — Functional state update (recommended)**

javascript

useEffect(() => {
  const id = setInterval(() => {
    setCount(prev => {
      console.log("latest via functional update:", prev + 1);
      return prev + 1;
    });
  }, 1000);
  return () => clearInterval(id);
}, []); // safe: no stale closure because we use prev value

Pros:- Simple, idiomatic React- No refs; safe with strict-mode double-invoke (state updates still correct)

Cons:- Works best when interval logic only needs previous state (not useful if you need to read other latest values or complex derived state).

**Fix 2 — useRef to read latest value**

javascript

import { useRef } from "react";

const countRef = useRef(count);
useEffect(() => { countRef.current = count; }, [count]);

useEffect(() => {
  const id = setInterval(() => {
    console.log("latest via ref:", countRef.current);
    // can call setCount(countRef.current + 1) or setCount(prev=>prev+1)
    setCount(prev => prev + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

Pros:- Allows reading any latest value inside callbacks (multiple vars)- Useful for complex side effects or when you must avoid re-subscribing effect on every change

Cons:- More boilerplate; ref updates are mutable (less declarative)- Easy to misuse and introduce subtle bugs if you forget to sync ref

Choose functional updates when the interval only depends on previous state; use refs when the callback needs multiple up-to-date values or you must avoid effect re-creation.

EasyTechnical

53 practiced

Implement a counter using useReducer in a functional React component. The reducer should support actions: 'increment', 'decrement', 'reset', and 'increment-by' with a payload amount. Provide the reducer, useReducer setup, and dispatch examples. Explain when useReducer is preferable to multiple useState calls.

Sample Answer

**Approach**Use a reducer to centralize state transitions for clarity and predictable updates. Good when related state updates are complex or share logic.

**Reducer + useReducer setup**

javascript

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'increment-by':
      return { count: state.count + (action.payload || 0) };
    case 'reset':
      return initialState;
    default:
      throw new Error('Unknown action: ' + action.type);
  }
}

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'increment-by', payload: 5 })}>
        +5
      </button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

**When to prefer useReducer**- Multiple related state fields with shared update logic- Complex transitions or when you want centralized, testable update logic- When next state depends on previous state (avoids stale closures)For simple independent states, multiple useState calls are fine.

MediumTechnical

27 practiced

You're building a complex multi-field form with nested objects and validation rules. Describe and implement (in JavaScript/React) how you would structure state and actions with useReducer to handle field updates, synchronous validation, async validation, and submission states. Explain advantages compared to managing many separate useState hooks.

Sample Answer

**Approach (brief)**

I’d centralize the form as a single reducer managing nested values, field-level meta (touched, errors, validating), and global submission state. Actions handle sync updates, trigger async validations, and submission lifecycle so logic is testable and predictable.

**Reducer + hooks (implementation)**

javascript

import React, { useReducer, useCallback } from 'react';

const initialState = {
  values: { profile: { name: '', email: '' }, address: { city: '' } },
  errors: {},
  touched: {},
  validating: {},
  submitting: false,
  submitError: null
};

function formReducer(state, action) {
  switch(action.type) {
    case 'FIELD_CHANGE':
      return {
        ...state,
        values: setIn(state.values, action.path, action.value),
        errors: unsetIn(state.errors, action.path),
      };
    case 'FIELD_BLUR':
      return { ...state, touched: setIn(state.touched, action.path, true) };
    case 'SYNC_VALIDATE':
      return { ...state, errors: { ...state.errors, ...action.errors } };
    case 'ASYNC_VALIDATE_START':
      return { ...state, validating: setIn(state.validating, action.path, true) };
    case 'ASYNC_VALIDATE_END':
      return {
        ...state,
        validating: setIn(state.validating, action.path, false),
        errors: setIn(state.errors, action.path, action.error || null)
      };
    case 'SUBMIT_START':
      return { ...state, submitting: true, submitError: null };
    case 'SUBMIT_END':
      return { ...state, submitting: false, submitError: action.error || null };
    default: return state;
  }
}

// Helper utilities setIn/unsetIn omitted for brevity

export function useForm() {
  const [state, dispatch] = useReducer(formReducer, initialState);

  const change = useCallback((path, value) => {
    dispatch({ type: 'FIELD_CHANGE', path, value });
    // run sync validation
    const syncErr = runSyncValidators(path, value, state.values);
    dispatch({ type: 'SYNC_VALIDATE', errors: syncErr });
  }, [state.values]);

  const blur = useCallback((path) => dispatch({ type: 'FIELD_BLUR', path }), []);

  const asyncValidate = useCallback(async (path, validator) => {
    dispatch({ type: 'ASYNC_VALIDATE_START', path });
    const error = await validator(getIn(state.values, path));
    dispatch({ type: 'ASYNC_VALIDATE_END', path, error });
  }, [state.values]);

  const submit = useCallback(async (onSubmit) => {
    dispatch({ type: 'SUBMIT_START' });
    try {
      await onSubmit(state.values);
      dispatch({ type: 'SUBMIT_END' });
    } catch (e) {
      dispatch({ type: 'SUBMIT_END', error: e.message || 'Submit failed' });
    }
  }, [state.values]);

  return { state, change, blur, asyncValidate, submit, dispatch };
}

**Why this is better than many useState hooks**

- Single source of truth for nested data and meta; avoids prop-drilling and many setState calls.- Easier to implement atomic transactions (update + validation + async) and optimistic UI.- Reducer makes transitions explicit, easier to test and to reason about side effects.- Better performance: batch related updates in one dispatch vs many setState re-renders.

**Notes**- Use memoized helpers and selective rendering (React.memo) to avoid unnecessary re-renders.- Keep heavy async logic outside reducer (thunks/effects).

EasyTechnical

31 practiced

Explain the Rules of Hooks in React for functional components. Describe why hooks must be called unconditionally and only at the top level of a component (or from other hooks), and give at least two concrete examples of incorrect hook usage and the problems they cause.

Sample Answer

**Brief rule summary**

- Hooks must be called in the same order on every render.- Call hooks only at the top level of React functional components or from other custom hooks.- Don’t call hooks inside loops, conditions, or nested functions.

**Why unconditionally and top-level**

React relies on call order to map each hook call to internal state. If a hook is skipped or moved between renders (conditional or inside loop), React’s internal hooks array gets out of sync, causing wrong state, runtime errors, or crashes. The rules ensure deterministic lifecycle and enable optimizations (and the eslint-plugin-react-hooks rule enforces this).

**Incorrect examples & problems**

1) Conditional hook — breaks order

jsx

function Comp({ show }) {
  if (show) {
    useEffect(() => { console.log('shown'); }, []);
  }
  const [count, setCount] = useState(0); // may shift index when show changes
  return null;
}

Problem: When show toggles, hook indices shift → state mixes between hooks or throws.

2) Hook inside nested callback — not invoked each render

jsx

function Comp() {
  function onClick() {
    useState(0); // invalid: hooks must run during render
  }
  return <button onClick={onClick}>Click</button>;
}

Problem: Throws "Hooks can only be called inside the body of a function component" and defeats render-based lifecycle.

**Best practices**

- Always call hooks at top level.- Create custom hooks to encapsulate conditional logic and call them unconditionally from the component.- Enable eslint-plugin-react-hooks to catch violations.

MediumTechnical

56 practiced

Implement a custom hook useDebounce(value, delay) that returns the debounced version of value, updating only after the delay milliseconds have passed without changes. Include cleanup to cancel timers when value or delay changes and provide a TypeScript function signature for the hook.

Sample Answer

**Approach (brief)** Use useState to hold debounced value and useEffect to reset a timer whenever value or delay changes. Cleanup cancels the timer to avoid stale updates or memory leaks. Type-safe with generics.

**Code**

typescript

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const id = window.setTimeout(() => setDebounced(value), delay);

    // Cleanup: cancel timeout if value or delay changes or component unmounts
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}

export default useDebounce;

**Explanation & reasoning**- useEffect schedules update after delay; cleanup prevents multiple timers and avoids setting state on unmounted components.- Generic signature ensures it works with any type (string, number, object).

**Complexity & edge cases**- Time: O(1) per change; Space: O(1) extra.- Handle delay = 0 (immediate update). For objects, remember shallow equality—use stable references or memoization if needed.

**Alternatives**- Use lodash.debounce for callbacks (not state), or expose cancel function via useRef for advanced control.

Unlock Full Question Bank

Get access to hundreds of React Functional Components and Hooks interview questions and detailed answers.

Join thousands of developers preparing for their dream job.