React Interview Questions for Entry-Level Roles

Q: What is useState and how does it work?

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

useState returns a pair: the current value and a setter function. When you call the setter, React schedules a re-render with the new value. State updates are asynchronous; if you log count immediately after setCount, you see the old value.

Q: What is useEffect and when does it run?

import { useState, useEffect } from "react";

function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // runs on mount and when userId changes

  return user ? <h1>{user.name}</h1> : <p>Loading...</p>;
}

The dependency array controls when the effect runs. Empty array: runs once on mount. No array: runs after every render. With values: runs when those values change.

Q: Why does React re-render and how can you prevent unnecessary re-renders?

React re-renders a component when its state changes, its parent re-renders, or its context value changes. To prevent unnecessary re-renders:

• React.memo wraps a component so it only re-renders when its props change (shallow comparison)
• useMemo memoises an expensive calculation so it only recomputes when dependencies change
• useCallback memoises a function reference so child components receiving it as a prop do not re-render

Q: What is the key prop and why does React need it?

When rendering a list, React needs key to identify which items changed, were added, or were removed. Without stable keys, React rebuilds the entire list on every update, which is slow and can cause bugs with input state.

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Use a stable, unique identifier from your data. Never use the array index as the key if items can be reordered or deleted.

Q: What is the difference between props and state?

Props are passed from parent to child and are read-only. State is internal to a component and can be changed by the component itself. When state changes, the component re-renders. When props change, the child re-renders.

Q: How do you share state between sibling components?

Lift the state up to the nearest common parent and pass it down as props:

function Parent() {
  const [query, setQuery] = useState("");
  return (
    <>
      <SearchInput value={query} onChange={setQuery} />
      <SearchResults query={query} />
    </>
  );
}

For deeply nested state, use React Context or a state management library. But start with lifting state up, because most apps do not need a global store.

Q: What is a controlled vs uncontrolled component?

A controlled component stores its value in React state. An uncontrolled component stores its value in the DOM and you read it with a ref. Controlled is the standard approach for forms in React:

// Controlled
function ControlledInput() {
  const [value, setValue] = useState("");
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

// Uncontrolled
function UncontrolledInput() {
  const ref = useRef<HTMLInputElement>(null);
  const handleSubmit = () => console.log(ref.current?.value);
  return <input ref={ref} />;
}

Q: What are custom hooks?

Custom hooks are functions that start with "use" and call other hooks. They let you extract reusable logic from components:

function useLocalStorage(key: string, initial: string) {
  const [value, setValue] = useState(() => {
    if (typeof window === "undefined") return initial;
    return localStorage.getItem(key) || initial;
  });

  useEffect(() => {
    localStorage.setItem(key, value);
  }, [key, value]);

  return [value, setValue] as const;
}