# React Quiz

## Question 1

What does `useState` return?

A) The current state value only
B) The setter function only
C) An array of [value, setter]
D) The previous state value

<!-- ANSWER: C -->
<!-- EXPLANATION: useState returns a two-element array: [currentValue, setterFunction]. You typically destructure it as const [value, setValue] = useState(initial). -->

## Question 2

When does `useEffect` run if the dependency array is `[count]`?

A) Never
B) Only on initial mount
C) On every render
D) When count changes (and on mount)

<!-- ANSWER: D -->
<!-- EXPLANATION: The dependency array tells React when to re-run the effect. [count] means run when count changes. It also runs once on mount with the initial value. -->

## Question 3

Which is the correct way to update state based on the previous value?

A) `setCount(count + 1)`
B) `setCount(prev => prev + 1)`
C) `count = count + 1`
D) `this.setState({ count: count + 1 })`

<!-- ANSWER: B -->
<!-- EXPLANATION: When the new state depends on the previous state, use the functional form setCount(prev => prev + 1) to avoid stale closure bugs, especially in async or batched updates. -->

## Question 4

Why do we need keys when rendering a list in React?

A) To improve performance
B) To help React identify which items changed, were added, or removed
C) For accessibility
D) Keys are optional and not required

<!-- ANSWER: B -->
<!-- EXPLANATION: Keys help React's reconciliation algorithm track element identity across renders. Without stable keys, React may reuse DOM nodes incorrectly, leading to bugs when reordering or deleting items. -->

## Question 5

What is a controlled component?

A) A component that controls its children
B) An input whose value is driven by React state
C) A component that uses useController
D) A component wrapped in a form library

<!-- ANSWER: B -->
<!-- EXPLANATION: A controlled component is an form input whose value is set by React state (value={state}) and updated via onChange. The React component is the single source of truth. -->

## Question 6

Where can you call hooks?

A) Anywhere in the function body
B) Only inside event handlers
C) Only at the top level of a function component or custom hook
D) In class components

<!-- ANSWER: C -->
<!-- EXPLANATION: Hooks must be called at the top level — not inside loops, conditions, or nested functions. This ensures hooks are called in the same order on every render, which React relies on. -->

## Question 7

<!-- VISUAL: drag-order -->

Put these React render lifecycle stages in the correct order:

A) Component returns JSX (render output)
B) useState/useReducer initialize or return current state
C) DOM updates (browser paints)
D) useEffect runs (after paint)

<!-- ANSWER: B,A,C,D -->
<!-- EXPLANATION: React first runs the component function; hooks like useState return values (B). The component returns JSX (A). React commits to the DOM, browser paints (C). Then useEffect runs as a post-commit effect (D). -->

## Question 8

<!-- VISUAL: fill-blank -->

Complete the controlled input pattern:

```jsx
const [value, setValue] = useState('');
return (
  <input
    value={___0___}
    onChange={(e) => setValue(e.target.value)}
  />
);
```

<!-- ANSWER: value -->
<!-- EXPLANATION: A controlled input's value prop is driven by React state. The value variable holds the current state, so value={value} makes React the single source of truth. -->