Question 1

What are React Hooks and why were they introduced?

Accepted Answer

React Hooks are functions that let you use state and other React features in functional components. Introduced in React 16.8, they solve problems like complex class components, wrapper hell from HOCs, and difficulties sharing stateful logic between components.

Question 2

What are the rules of Hooks?

Accepted Answer

There are two rules: (1) Only call Hooks at the top level - never inside loops, conditions, or nested functions, and (2) Only call Hooks from React functional components or custom Hooks. These rules ensure React correctly tracks Hook state across renders.

Question 3

Why can't Hooks be called inside loops or conditions?

Accepted Answer

React tracks Hooks by their call order, not by name. If Hooks are called conditionally, the order can change between renders, causing React to associate state with the wrong Hook. This leads to bugs and unpredictable behavior.

Question 4

What is useState and what does it return?

Accepted Answer

useState is a Hook that adds state to functional components. It returns an array with two elements: the current state value and a function to update it. The initial state is passed as an argument and can be a value or a function.

Question 5

What is useEffect and when does it run?

Accepted Answer

useEffect is a Hook for performing side effects like data fetching, subscriptions, or DOM manipulation. It runs after the component renders. The dependency array controls when it re-runs - empty array means only on mount, no array means every render.

Question 6

What is the cleanup function in useEffect?

Accepted Answer

The cleanup function is returned from useEffect and runs before the component unmounts or before the effect re-runs. It's used to clean up subscriptions, timers, or event listeners to prevent memory leaks.

Question 7

What is the dependency array in useEffect?

Accepted Answer

The dependency array is the second argument to useEffect that controls when the effect runs. The effect only re-runs when values in the array change. An empty array means run once on mount; omitting it means run after every render.

Question 8

What is useContext and how does it work?

Accepted Answer

useContext is a Hook that lets you subscribe to React context without nesting. It accepts a context object created by createContext() and returns the current context value. When the context value changes, the component re-renders.

Question 9

What is useRef and what are its use cases?

Accepted Answer

useRef returns a mutable ref object that persists across renders. Common uses include accessing DOM elements, storing mutable values that don't trigger re-renders, and keeping references to timers or previous values.

Question 10

What is the difference between useRef and useState?

Accepted Answer

useState triggers a re-render when updated; useRef does not. useState is for values that affect the UI; useRef is for values that need to persist but shouldn't cause re-renders, like DOM references or interval IDs.

Question 11

What is the difference between useMemo and useCallback?

Accepted Answer

useMemo memoizes a computed value, returning the cached result until dependencies change. useCallback memoizes a function definition itself. Use useMemo for expensive calculations; useCallback for functions passed as props to prevent child re-renders.

Question 12

What is useReducer and when should you use it?

Accepted Answer

useReducer is an alternative to useState for complex state logic. It accepts a reducer function and initial state, returning current state and dispatch function. Use it when state has multiple sub-values or when next state depends on previous state.

Question 13

What causes infinite loops with Hooks?

Accepted Answer

Infinite loops commonly occur when useEffect updates state without proper dependencies, or when objects/arrays in dependencies are recreated each render. Fix by adding correct dependencies, using useCallback/useMemo, or moving values outside the component.

Question 14

What is a custom Hook and why create one?

Accepted Answer

A custom Hook is a JavaScript function starting with 'use' that calls other Hooks. Custom Hooks let you extract and reuse stateful logic between components without changing the component hierarchy. They're the primary way to share Hook-based logic.

Question 15

What is the difference between useEffect and useLayoutEffect?

Accepted Answer

useEffect runs asynchronously after the browser paints, while useLayoutEffect runs synchronously before paint. Use useLayoutEffect for DOM measurements or mutations that need to happen before the user sees the update, like preventing flicker.

React Hooks Fundamentals(5 questions)

What are React Hooks and why were they introduced?

What are the rules of Hooks?

Why can't Hooks be called inside loops, conditions, or nested functions?

What is the difference between class components and functional components with Hooks?

How does React track which Hook belongs to which component?

Performance and Best Practices(6 questions)

How do you optimize performance when using Hooks?

What causes infinite loops with Hooks and how do you prevent them?

How do you handle stale closures in Hooks?

What are the best practices for organizing Hooks in a component?

How do you debug issues with Hooks?

What is the React Hooks ESLint plugin and why is it important?

useState Hook(6 questions)

How does useState work and what does it return?

What is the difference between useState with a value vs a function initializer?

How do you update state based on the previous state value?

Why does useState not merge objects like this.setState in class components?

How do you handle multiple state variables - one useState or multiple?

What happens when you call useState with the same value?

useEffect Hook(7 questions)

What is useEffect and when does it run?

What is the cleanup function in useEffect and when is it called?

What is the dependency array in useEffect and how does it work?

What is the difference between useEffect with no dependency array, empty array, and array with values?

How do you fetch data with useEffect?

What are common mistakes when using useEffect?

How do you handle async functions inside useEffect?

useContext Hook(4 questions)

What is useContext and how does it work?

How do you create and use a Context with useContext?

What are the performance implications of useContext?

When should you use useContext vs prop drilling vs state management libraries?

useRef Hook(5 questions)

What is useRef and what are its use cases?

What is the difference between useRef and useState?

How do you access DOM elements with useRef?

Why doesn't updating a ref trigger a re-render?

What is the difference between useRef and createRef?

useMemo and useCallback(6 questions)

What is useMemo and when should you use it?

What is useCallback and when should you use it?

What is the difference between useMemo and useCallback?

When should you NOT use useMemo or useCallback?

How do useMemo and useCallback help with performance optimization?

What are the common mistakes when using useMemo and useCallback?

useReducer Hook(5 questions)

What is useReducer and when should you use it over useState?

How does useReducer work with actions and reducers?

What is the difference between useState and useReducer?

How do you handle complex state logic with useReducer?

How do you combine useReducer with useContext for state management?

Custom Hooks(5 questions)

What is a custom Hook and why would you create one?

What are the naming conventions for custom Hooks?

How do you share stateful logic between components using custom Hooks?

What are some common custom Hook patterns?

How do you test custom Hooks?

Advanced Hooks(7 questions)

What is useLayoutEffect and how does it differ from useEffect?

What is useImperativeHandle and when would you use it?

What is useDebugValue and how do you use it?

What is useDeferredValue and when would you use it?

What is useTransition and how does it help with performance?

What is useId and what problem does it solve?

What is useSyncExternalStore and when would you use it?