React Hooks Interview Questions

February 26, 2026 • By Surya Singh • React • Hooks • Frontend • Interview

React Hooks interview questions — useState, useEffect, useContext, custom hooks patterns.

ReactHooksFrontendInterview

Key Takeaways

  • 1useState for local UI state; useEffect for side effects (data fetch, subscriptions); useContext for sharing without prop drilling.
  • 2useCallback memoizes functions; useMemo memoizes values—use only when profiling shows a real benefit.
  • 3useRef persists a value across renders without causing re-renders; use for DOM refs, timers, or mutable state.
  • 4Custom hooks encapsulate reusable logic; rules of hooks: only call at top level, only from React functions.

The questions below are commonly asked in technical interviews. Each answer is written to help you understand the concept clearly and explain it confidently. Focus on understanding the "why" behind each answer—that is what interviewers care about.

In this guide

Interview Questions & Answers

What is useState and when should I use it?

useState is a hook that adds local state to a function component. You pass an initial value and get back the current state and a setter. When you call the setter, React re-renders the component with the new state. Use it for anything the UI needs to reflect: form inputs, toggle state, modals, etc. The setter can accept a value or a function (prev => next) when the new state depends on the previous—important for updates inside closures (e.g., event handlers, useEffect) to avoid stale state.

// React (JavaScript) - useState
// const [count, setCount] = useState(0);
// setCount(c => c + 1);  // functional update

// C# Blazor equivalent - state + re-render
int _count = 0;
void Increment() {
    _count++;
    StateHasChanged();  // triggers re-render
}

// C# WPF/MVVM - property with INotifyPropertyChanged
private int _count;
public int Count {
    get => _count;
    set { _count = value; OnPropertyChanged(); }
}

What is the difference between useCallback and useMemo?

useCallback returns a memoized function. useMemo returns a memoized value. Both take a dependency array—if dependencies do not change, the cached result is returned. Use useCallback when you pass a function to a child that is wrapped in React.memo—without it, a new function reference each render causes the child to re-render. Use useMemo for expensive computations that you do not want to repeat every render. Do not overuse: both have a cost (storing and comparing deps). Use only when profiling shows a measurable problem.

When should I use useRef vs useState?

useRef persists a value across renders but does not trigger a re-render when it changes. Use it for: (1) DOM references (inputRef.current.focus()), (2) storing a previous value for comparison, (3) timers or intervals (store the ID so you can clear it), (4) any mutable value that the logic needs but the UI does not. Use useState when the value affects what is rendered. If you update a ref and nothing happens on screen, that is expected—refs are for "behind the scenes" state.

What are the rules of hooks and why do they exist?

Two rules: (1) Only call hooks at the top level—not inside loops, conditions, or nested functions. (2) Only call hooks from React function components or custom hooks. React relies on the order of hook calls to match state between renders. If you call a hook conditionally, the order can change between renders and state gets mixed up. That is why you must call hooks unconditionally at the top level. The same applies to custom hooks—they must call other hooks in a consistent order.

How do I create a custom hook?

A custom hook is a function whose name starts with "use" and that may call other hooks. It encapsulates reusable logic. For example, useDebounce(value, delay) returns a debounced value; useLocalStorage(key) returns [value, setValue] synced with localStorage. Extract logic when you find yourself duplicating the same useEffect + useState pattern. Custom hooks can return anything—a value, a tuple, or nothing (e.g., a hook that sets up a subscription). They follow the same rules of hooks as built-in hooks.

Loading...

XLinkedInFacebook
Surya Singh

Surya Singh

Azure Solutions Architect & AI Engineer

Microsoft-certified Azure Solutions Architect with 8+ years in enterprise software, cloud architecture, and AI/ML deployment. I build production AI systems and write about what actually works—based on shipping code, not theory.

  • Microsoft Certified: Azure Solutions Architect Expert
  • Built 20+ production AI/ML pipelines on Azure
  • 8+ years in .NET, C#, and cloud-native architecture
LinkedInTwitter/XAbout Me