WorksheetsReact Quiz
Total questions: 50
Worksheet time: 50mins
True or False: React is a full framework (includes routing, data layer, etc.).
True
False
True or False: React was originally built by Facebook.
True
False
True or False: React encourages manipulating the real DOM directly for performance.
True
False
True or False: React uses a Virtual DOM to optimize updates.
True
False
True or False: In React, data flows from parent to child (one-way).
True
False
True or False: Components in React are always class-based; functional components are not allowed.
True
False
True or False: JSX is required to write React — you cannot use React without it.
True
False
True or False: React can be used to build mobile apps (via React Native).
True
False
True or False: When state changes in a component, React re-renders the entire application.
True
False
True or False: Props in React are immutable (cannot be changed by the component receiving them).
True
False
What is the main job of React as per the video?
A. Manipulate server data
B. Generate CSS styles
C. Build UIs (user interfaces)
D. Serve as a database
Which of the following best describes “component” in React?
A. A module that handles HTTP requests
B. A reusable UI piece
C. A database model
D. A CSS theme
What does React compare during updates to decide which parts to update?
A. Old and new state objects
B. Old and new Virtual DOM
C. Old and new CSS files
D. Old and new server responses
Which syntax allows mixing HTML-like tags in JavaScript in React?
A. HTMLX
B. JSS
C. JSX
D. TS
How does React treat props passed into components?
A. Mutable (modifiable inside component)
B. Immutable (read-only inside component)
C. Deprecated
D. Only used for styling
What happens when you call setState or update state in a functional component (via hooks)?
A. Nothing happens
B. The entire page reloads
C. The component re-renders (and reconciles DOM)
D. Only CSS changes
Which of these is not part of React’s core idea?
A. Componentization
B. Virtual DOM
C. One-way data flow
D. Implicit two-way data binding
Which of these would you use to pass data from a parent to child?
A. useState
B. props
C. context
D. setState
React’s Virtual DOM diff algorithm helps in:
A. Rendering all components always
B. Minimizing updates to real DOM
C. Avoiding state completely
D. Generating CSS
Which of the following is a valid component declaration (functional) in React?
A. function MyComp() {
return <div>Hello</div>; }
B. function MyComp() {
return Hello }
C. component MyComp {"Hello"}
D. UI MyComp() => "Hello"
In React, keys in lists are used to:
A. Style each element
B. Identify elements for efficient re-rendering
C. Generate unique IDs in database
D. Encrypt data
Which hook is used to manage local state in functional components?
A. useEffect
B. useReducer
C. useState
D. useContext
React’s reconciliation process refers to:
A. Combining CSS files
B. Fetching data from server
C. Comparing Virtual DOM trees
D. Merging databases
Which of these is a disadvantage or challenge of React (commonly discussed)?
A. Small community
B. No flexibility
C. Frequent changes / evolving API
D. It cannot be used for SPAs
Which of these is React not concerned with?
A. UI rendering
B. DOM updates
C. Application routing
D. Component abstraction
Suppose you have:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;}
Which is correct to use this in JSX?
<Welcome name="Alice" />
<Welcome name={Alice} />
<Welcome Alice="name" />
<Welcome name: "Alice" />
Given:
const [count, setCount] = useState(0);
setCount(count + 1);
What happens when this executes in a click handler?
A. count remains same
B. count increments by 1, component re-renders
C. Full page reload
D. CSS resets
In a list rendering:
<ul>
{items.map((item, i) => {item})} Why might using i (index)
</ul>
Why might using i (index) as key be problematic?
A. It causes errors always
B. It can lead to incorrect DOM updates if list changes order
C. It is forbidden by React
D. It improves performance
Suppose a parent component passes a function prop:
<Child onClick={() => doSomething()} />
In Child, you call props.onClick() on a button click. That is an example of:
A. Parent modifying child state
B. Child sending message/event to parent
C. Child controlling parent props
D. Direct DOM mutation
Which lifecycle does not exist in functional components?
A. componentDidMount
B. useEffect with empty deps
C. effect cleanup
D. render
If a component returns null in its render, what is displayed?
A. Error
B. Nothing (no UI)
C. Original UI
D. Blank string
Which of these is equivalent to a class-based
this.setState({ count: 2 })
in functional?
A. count = 2
B. setCount(2)
C. useState(2)
D. this.count = 2
Consider: <MyComp {...props} />
This is called:
A. Props spread
B. Props shrink
C. State expansion
D. Context usage
If props.user is an object, you do:
<MyComp {...props.user} />
This passes:
A. user: object
B. each property of user as separate prop
C. user: string
D. nothing
Suppose you have two sibling components that share state. Best approach is:
A. Keep state in one and pass via props
B. Duplicate state in both
C. Use global variable
D. Manipulate DOM directly
What is the default return type of a functional component?
A. string
B. JSX / React element
C. number
D. boolean
In React, event handlers are named using:
A. lowercase (e.g. onclick)
B. uppercase (e.g. OnClick)
C. camelCase (e.g. onClick)
D. snake_case
Which attribute corresponds to HTML’s class in JSX?
A. class
B. className
C. cssClass
D. class-html
In JSX, to embed a JavaScript expression inside markup, you use:
A. { }
B. ( )
C. [ ]
D. < >
Which hook lets you run side effects in functional components?
A. useState
B. useSideEffect
C. useEffect
D. useHook
Suppose you want to ensure a component uses props only once and never changes them. You would:
A. Modify them directly
B. Use them read-only (they are immutable)
C. Reassign props
D. Use state
In a class component, state is usually declared as:
A. let state = {}
B. this.state = {} inside constructor
C. state() method
D. var state
What happens if keys are not provided for list elements in React?
A. React automatically errors-out
B. React uses indexes by default and may mis-update
C. Performance is perfect
D. CSS breaks
If a parent component re-renders, child components will:
A. Always re-render
B. Never re-render
C. Re-render only if props or state changed
D. Re-render only CSS
Scenario: You want to pass a callback into child that gives the child ability to update parent’s state. Which pattern is correct?
A. Child modifies parent’s state directly
B. Parent passes a setter function as prop to child
C. Child reads parent’s state variable
D. Child cannot communicate with parent
Suppose you have:
const element = <h1>Hello, world!</h1>;
What type is element?
A. string
B. React element
C. number
D. boolean
React renders UI in response to:
A. Changes in HTML file
B. Changes in props or state
C. User editing CSS
D. Manual DOM calls only
If you call setState (or setter) many times in one event, React may batch updates. True or False?
A. True
B. False
You can conditionally render components in React by using:
A. if outside JSX
B. Ternary / logical operator inside JSX
C. Both A & B
D. None
Suppose you need global state across many components, you should use:
A. Props only
B. Lifting state only
C. Context / state management library
D. Hard-coding
