React Beginner Quiz
30 questions on React Introduction.
Question 1: What is JSX in React?
- A. Java Syntax Extension
- B. JavaScript XML β (correct answer)
- C. Java Source XML
- D. JSON XML
Explanation: JSX is a syntax extension for JavaScript used in React to describe UI elements. It looks like HTML but executes inside JavaScript files, compiling to React.createElement() calls.
Question 2: Which tool is used to compile JSX into regular JavaScript?
- A. Webpack
- B. Babel β (correct answer)
- C. Node.js
- D. Gulp
Explanation: Babel is a popular JavaScript transpiler that compiles modern JavaScript and JSX syntax into standard ECMAScript 5 code that all browsers can execute.
Question 3: Which of the following is correct when rendering a React component?
- A.
<MyComponent>
- B.
<MyComponent />
- C. Both A and B are correct β (correct answer)
- D. None of the above
Explanation: React components can be written as self-closing elements (<MyComponent />) or with separate opening and closing tags (<MyComponent></MyComponent>).
Question 4: What will be the output of this component rendering?
``jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
``
- A. A string containing "Hello, {props.name}"
- B. A heading element with dynamic name interpolated from props β (correct answer)
- C. Compiler Error
- D. A blank page
Explanation: Curly braces {} are used in JSX to embed JavaScript expressions, allowing dynamic props like props.name to be evaluated and rendered.
Question 5: Are props immutable or mutable in React?
- A. Mutable
- B. Immutable β (correct answer)
- C. Depends on the component type
- D. Props do not exist in React
Explanation: Props (properties) passed down from a parent component are read-only (immutable) inside the child component. A component must never modify its own props.
Question 6: Which hook is used to declare a reactive state variable in a functional React component?
- A. useEffect
- B. useState β (correct answer)
- C. useContext
- D. useReducer
Explanation: The useState hook returns a pair containing the current state value and a function to update it, adding reactive state capability to functional components.
Question 7: What is the purpose of the "key" prop when rendering lists of elements?
- A. To add dynamic CSS styles
- B. To uniquely identify elements, helping React track changes, additions, and removals efficiently β (correct answer)
- C. To bind database primary keys
- D. To decrypt DOM nodes
Explanation: Keys help React identify which items have changed, been added, or been removed. They should be stable, predictable, and unique strings or numbers.
Question 8: How do you attach a click event handler to a button in React?
- A.
onclick={handler}
- B.
onClick={handler} β (correct answer)
- C.
onClick="handler()"
- D.
click={handler}
Explanation: React events are named using camelCase (onClick) rather than lowercase (onclick). Event handlers are passed as functions within curly braces, not string expressions.
Question 9: Which virtual structure does React use to optimize browser rendering updates?
- A. Shadow DOM
- B. Virtual DOM β (correct answer)
- C. Document Fragment
- D. Core DOM
Explanation: React maintains a lightweight in-memory representation of the real DOM called the Virtual DOM. It calculates diffs and updates only changed elements in the real DOM (reconciliation).
Question 10: What will be the output of this code snippet?
``jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
``
- A. A button displaying 0, which increments by 1 on every click β (correct answer)
- B. A button showing 1 that never changes
- C. Compiler Error
- D. Returns a white screen
Explanation: useState(0) initializes state at 0. Clicking triggers setCount(count + 1) which updates state and triggers a re-render of the component with the new count value.
Question 11: Which hook is used to handle side effects like data fetching, subscriptions, or manual DOM updates?
- A. useState
- B. useMemo
- C. useEffect β (correct answer)
- D. useRef
Explanation: The useEffect hook runs after render cycles. It lets you synchronize a component with external systems (handling APIs, timers, or event listeners).
Question 12: How do you trigger a side effect inside useEffect ONLY once when the component mounts?
- A. Omit the dependency array entirely
- B. Pass an empty array
[] as the second argument β (correct answer)
- C. Pass all state variables to the dependency array
- D. Call
useEffect inside a conditional statement
Explanation: An empty dependency array [] tells React that the effect doesn't depend on any values from props or state, running it exactly once on mount and cleanup on unmount.
Question 13: What is the correct way to conditionally render a component in React using inline logical AND?
- A.
{condition && <MyComponent />} β (correct answer)
- B.
{condition ? <MyComponent />}
- C.
{if (condition) { <MyComponent /> }}
- D.
{condition ?? <MyComponent />}
Explanation: In JavaScript, if the left side of && evaluates to true, the expression returns the right-hand element (<MyComponent />). If it is false, it returns false, skipping rendering.
Question 14: What is a controlled component in React forms?
- A. A component managed by a third-party library
- B. A component where form inputs are bound to React state, making state the single source of truth β (correct answer)
- C. A component that cannot be edited
- D. A component with native browser controls only
Explanation: In a controlled component, the input value is bound to a state variable, and updating the input calls a state change handler, controlling the element via React.
Question 15: What is the name of the main React library package used to mount React components onto the web browser DOM?
- A. react
- B. react-dom β (correct answer)
- C. react-web
- D. react-router
Explanation: While react contains the core component logic and hooks, react-dom handles rendering and mounting components onto the actual browser DOM using ReactDOM.createRoot().
Question 16: What is the difference between state and props in React?
- A. State is private and managed within the component; props are public and passed from parent to child β (correct answer)
- B. State is immutable; props are mutable
- C. State can only be declared in class components; props in functional components
- D. They are identical
Explanation: State represents local data belonging to a component that can change over time, whereas props are parameters received from outside which are read-only.
Question 17: What is the correct way to perform a state update based on the previous state?
- A.
setCount(count + 1)
- B.
setCount(prevCount => prevCount + 1) β (correct answer)
- C.
count = count + 1
- D.
setCount(count++)
Explanation: Because state updates can be batched or asynchronous, passing an updater function prevCount => prevCount + 1 guarantees you are reading the absolute latest state values.
Question 18: What is a clean-up function in useEffect used for?
- A. To clear browser history
- B. To cancel timers, unsubscribe from services, and clean up subscriptions to avoid memory leaks β (correct answer)
- C. To reset state variables to zero
- D. To force the component to re-render
Explanation: If your effect returns a function, React runs this function when the component unmounts or before re-running the effect, allowing resources to be cleanly freed.
Question 19: What will happen if you directly mutate state like state.value = 10 in React?
- A. The component will automatically update and re-render
- B. React will not detect the change, and the component will not re-render β (correct answer)
- C. The app will throw a fatal compiler crash
- D. The state will lock itself
Explanation: React relies on changes to the state reference to trigger re-renders. Directly mutating state bypasses setState/setX functions, so React remains unaware of updates.
Question 20: Which React feature allows you to pass data deep down the component tree without manually passing props at every level?
- A. React Router
- B. React Context API β (correct answer)
- C. Higher-Order Components
- D. Redux Middleware
Explanation: React Context provides a way to share values (like global themes or user sessions) down the component tree without explicitly passing props through middle elements (prop drilling).
Question 21: What does the useRef hook return?
- A. A mutable ref object with a
.current property initialized to the passed argument β (correct answer)
- B. A reactive state variable pair
- C. A boolean indicating if the component is mounted
- D. A cache-optimized function callback
Explanation: useRef creates a persistent reference object whose .current property can store any value (like a DOM node reference) without triggering a re-render when it changes.
Question 22: What will be printed to the console?
``jsx
import React, { useEffect, useState } from 'react';
function Test() {
const [val, setVal] = useState(0);
useEffect(() => {
console.log("Effect Run");
}, [val]);
return <div onClick={() => setVal(0)}>Test</div>;
}
``
- A. "Effect Run" is logged on mount, and then on every click
- B. "Effect Run" is logged on mount, but NOT on clicks since the value does not change β (correct answer)
- C. "Effect Run" is logged repeatedly forever
- D. Nothing is logged
Explanation: The dependency array contains val. On click, setVal(0) updates state to 0. Since val was already 0, React's comparison sees no change and skips executing the effect.
Question 23: In React, what are "fragments" (<React.Fragment> or <>...</>) used for?
- A. To cache component nodes
- B. To group a list of children without adding extra wrapper nodes (like
<div>) to the DOM β (correct answer)
- C. To handle routing boundaries
- D. To compile JSX faster
Explanation: Fragments let you return multiple adjacent elements in JSX without introducing useless structural DOM wrapper elements that might mess up flex/grid styling.
Question 24: Which package is widely used in React applications for routing and page navigation?
- A. react-link
- B. react-router-dom β (correct answer)
- C. react-navigation
- D. react-pages
Explanation: react-router-dom is the standard library for client-side routing in React web applications, providing components like <BrowserRouter>, <Route>, and <Link>.
Question 25: What is the correct syntax for a lazy-loaded component in React?
- A.
const Comp = lazy(() => import('./Comp')); β (correct answer)
- B.
const Comp = require_lazy('./Comp');
- C.
const Comp = <Lazy Component="./Comp" />;
- D.
const Comp = import.lazy('./Comp');
Explanation: The React.lazy() function lets you define a component that is loaded dynamically, significantly reducing initial bundle sizes.
Question 26: What is the difference between useMemo and useCallback?
- A.
useMemo caches a function reference; useCallback caches a computed value
- B.
useMemo caches a computed value; useCallback caches a function reference β (correct answer)
- C. They are completely identical
- D.
useMemo is deprecated
Explanation: Both are optimization hooks. useMemo memoizes the returned **value** of a function calculation. useCallback memoizes the **function definition** itself.
Question 27: What will be the output of the console logs?
``jsx
import React, { useState } from 'react';
function App() {
const [val, setVal] = useState(0);
const click = () => {
setVal(val + 1);
console.log(val);
};
return <button onClick={click}>Click</button>;
}
``
- A. Logs 1 on first click
- B. Logs 0 on first click β (correct answer)
- C. Logs 0 and then crashes
- D. Logs undefined
Explanation: State updates in React are **asynchronous** and batched. Calling setVal(val + 1) schedules an update. When console.log(val) runs immediately after, val still holds the old state value of 0.
Question 28: What is a custom hook in React?
- A. A hook imported from npm libraries only
- B. A JavaScript function starting with "use" that can call other React hooks β (correct answer)
- C. A system lifecycle method
- D. A configuration setting inside react-scripts
Explanation: Custom hooks let you extract and reuse stateful logic across multiple components. They must start with the prefix "use" (e.g. useFetch).
Question 29: What are "error boundaries" in React?
- A. Try-catch blocks inside JSX
- B. React components that catch JavaScript errors anywhere in their child component tree, logging them and displaying fallback UI β (correct answer)
- C. Redux middleware packages
- D. ESLint rules
Explanation: Error boundaries are special class components that implement static getDerivedStateFromError() or componentDidCatch(), capturing crashes without crashing the entire app.
Question 30: What does the StrictMode wrapper component do in React?
- A. Compiles code to machine code
- B. Activates additional deprecation checks and warnings for developer mode, rendering components twice to expose side-effects β (correct answer)
- C. Protects pages with login walls
- D. Encrypts reactive states
Explanation: React.StrictMode checks for unsafe lifecycles, legacy API usages, and intentionally double-mounts components in development to identify unexpected side effects.