React Hooks Interview Questions

What are React Hooks?

React Hooks are functions in React that let you use state, lifecycle features, and other React capabilities inside functional components — without needing class components.

Before hooks, only class components could manage state and lifecycle. Hooks made functional components powerful and simpler.

What are the Rules of Hooks?

1. Only call Hooks at the top level of your function component

function MyComponent() {
  // ✅ Correct: Hooks are called at the top level
  const [count, setCount] = useState(0);

  if (count > 5) {
    // ❌ Incorrect: Hooks cannot be called inside conditions
    const [isHigh, setIsHigh] = useState(true);
  }

  return <div>{count}</div>;
}

2. Only call Hooks from React function components or custom Hooks

// ✅ Correct: Hooks are called from a react function component
function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}
// ❌ Incorrect: Hooks cannot be called from regular JavaScript functions
function notAComponent() {
  const [count, setCount] = useState(0); // This will cause an error
}

What are the Commonly Used Hooks in React?

The most commonly used Hooks in React are:

• useState: for creating state variable and function to update that state variable
• useRef: for creating refs variable which can store dom elements or any mutable value which does not cause re-render when updated.
• useEffect: its a lifecycle hook that is used to perform side effects
• useMemo: for memoizing expensive calculations and preventing unnecessary re-renders
• useCallback: for memoizing functions and preventing unnecessary re-renders when passing functions as props to child components
• useContext: for using context and its store and manage global state in react application
• useReducer: for managing complex state logic in react application
• useLayoutEffect: similar to useEffect but it fires synchronously after all DOM mutations, which can be useful for measuring layout and making visual updates before the browser paints.

What is the useState Hook?

The useState Hook is used to create state variable and function to update that state variable in functional components. It takes an initial state value as an argument and returns an array with two elements: the current state value and a function to update that state value.

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

What is the useRef Hook?

The useRef Hook is used to create a ref variable which can store a mutable value that does not cause a re-render when updated. It can also be used to store a reference to a DOM element.

function MyComponent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

What is the useEffect Hook?

The useEffect Hook is used to perform side effects in functional components. It takes a function as an argument that contains the code for the side effect. The function can also return a cleanup function that will be called when the component unmounts or when the dependencies change. It also accepts a second argument which is an array of dependencies, if these dependencies change, the function passed to useEffect will be re-run. If the array is empty, the effect will only run once when the component mounts.

useEffect(() => {
  // Side effect code here
  return () => {
    // Cleanup code here
  };
}, [dependencies]);

What is the useContext Hook?

The useContext Hook lets you subscribe to React context without nesting. It accepts a context object and returns the current context value.

const value = useContext(MyContext);

What are Custom Hooks?

Custom Hooks are JavaScript functions whose names start with “use” and may call other Hooks. They let you extract component logic into reusable functions.

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return size;
}