reactbeginner
React Basics Quiz
Components, props, state, JSX, and the React rendering model.
7 questions
By EZ4Code Team
1. What is JSX?
const el = <h1>Hello, {name}!</h1>;A syntax extension that lets you write HTML-like code in JavaScript
A new programming language
A replacement for HTML
A CSS preprocessor
Explanation: JSX is a syntax extension for JavaScript that looks like HTML but compiles to `React.createElement()` calls. It lets you write UI declaratively. JSX is not a separate language — it's syntactic sugar over JavaScript function calls.
2. How do you pass data from a parent to a child component?
Via props
Via state
Via global variables
Via the DOM
Explanation: Props (properties) are the way to pass data from parent to child. They're read-only inside the child. State is internal to a component. For child-to-parent communication, pass a callback function as a prop.
3. What does `useState` return?
const [count, setCount] = useState(0);An array with the current value and a setter function
A single value
An object
A Promise
Explanation: `useState` returns an array with exactly two elements: the current state value and a function to update it. We use array destructuring to name them. The argument to `useState` is the initial value.
4. When does a React component re-render?
When its state changes (via setState)
Never — React components don't re-render
Only when the page reloads
When the DOM is manually updated
Explanation: A component re-renders when its state changes (via the setter from `useState`), when its parent re-renders (and props may have changed), or when a context it consumes changes. State changes are asynchronous and batched.
5. What is the virtual DOM?
A lightweight in-memory representation of the real DOM
A backup of the real DOM
A browser feature
A type of CSS layout
Explanation: The virtual DOM is a lightweight JavaScript object representation of the real DOM. React compares ("diffs") the new virtual DOM with the previous one, computes the minimal set of changes, and applies them to the real DOM efficiently (reconciliation).
6. Which hook runs side effects after render?
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);useEffect
useSideEffect
useRender
useAfter
Explanation: `useEffect` runs after render and is used for side effects (data fetching, subscriptions, DOM manipulation). The second argument is the dependency array — the effect re-runs when those values change. An empty array `[]` runs once on mount.
7. What is the correct way to update state based on the previous state?
// Correct:
setCount(prev => prev + 1);
// Risky:
setCount(count + 1);Use the functional updater form: setState(prev => ...)
Mutate the state directly
Use a global variable
State cannot be updated
Explanation: When the new state depends on the previous state, use the functional updater form `setCount(prev => prev + 1)`. This guarantees you're working with the latest state, even if multiple updates are batched. Directly using `count + 1` may use a stale value.