🔹MCQs Of Class 20
Revision and Viva / Final Demo
1.
What
is a “prop” in React?
A) A special function
B) A way to pass data to components
C) A method to change state
D) A hook for side effects
Answer: B
2.
Which
hook is used to add state in a functional component?
A) useEffect
B) useState
C) useRef
D) useContext
Answer: B
3.
What
does useEffect hook primarily do?
A) Manage component state
B) Handle side effects like data fetching or DOM updates
C) Pass props to child components
D) Render JSX
Answer: B
4.
In
React Router, what component is used to wrap your entire app for routing?
A) Routes
B) Route
C) BrowserRouter
D) Link
Answer: C
5.
How
do you navigate to a new route programmatically inside a component?
A) Using window.location
B) Using useNavigate hook
C) Using useState
D) Using useEffect
Answer: B
6.
What
does a controlled form input mean?
A) Input value is controlled by React state
B) Input value is uncontrolled
C) Input uses HTML validation only
D) Input cannot be edited
Answer: A
7.
Which
method prevents the default form submission behavior?
A) e.stopPropagation()
B) e.preventDefault()
C) e.default()
D) e.submit()
Answer: B
8.
What
will this code output?
jsx
CopyEdit
function Hello(props) {
return <h1>Hello {props.name}</h1>;
}
If
called as <Hello name="John" />, what is rendered?
A) Hello props.name
B) Hello John
C) Hello name
D) Hello undefined
Answer: B
9.
How
can you update state in React?
A) this.state = newValue
B) Directly modifying state variable
C) Using the setter function returned by useState
D) Using updateState() function
Answer: C
10.
What
argument does useEffect hook accept?
A) A callback function and dependency array
B) A string and number
C) JSX and props
D) A component and state
Answer: A
11.
Which
is the correct syntax for a route in React Router v6?
A) <Route path="/home" component={Home} />
B) <Route path="/home" element={<Home />} />
C) <Route to="/home" />
D) <Route link="/home" />
Answer: B
12.
How
do you access URL parameters in React Router?
A) useParams() hook
B) props.match.params
C) window.location
D) useNavigate()
Answer: A
13.
What
is the default behavior of a form submission in HTML?
A) Calls JavaScript function
B) Refreshes the page
C) Does nothing
D) Displays alert
Answer: B
14.
How
do you make a React input field read-only?
A) <input readOnly />
B) <input disabled />
C) <input locked />
D) <input readonly="true" />
Answer: A
15.
Which
hook would you use to run code only once after the first render?
A) useEffect(() => {}, [])
B) useState()
C) useRef()
D) useCallback()
Answer: A
16.
How
do you pass data from parent to child?
A) Using state
B) Using props
C) Using context
D) Using hooks
Answer: B
17.
Which
of these is NOT a valid way to update state?
A) setCount(count + 1)
B) setCount(prev => prev + 1)
C) count = count + 1
D) setCount(5)
Answer: C
18.
Which
component is used to create navigation links in React Router?
A) <Route>
B) <BrowserRouter>
C) <Link>
D) <Nav>
Answer: C
19.
What
does this form do when submitted?
jsx
CopyEdit
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
A)
Calls handleSubmit function
B) Refreshes the page without calling anything
C) Logs data automatically
D) Throws error
Answer: A
20.
What
hook allows you to “remember” a value between renders without causing
re-renders?
A) useEffect
B) useRef
C) useState
D) useMemo
Answer: B
21.
What
is the purpose of the dependency array in useEffect?
A) To specify when the effect should rerun
B) To pass data between components
C) To declare props
D) To store state
Answer: A
22.
In
React, which tag is used to return multiple elements from a component without
adding extra nodes to the DOM?
A) <div>
B) <React.Fragment> or <>
C) <span>
D) <section>
Answer: B
23.
What
will happen if you forget to add the dependency array in useEffect?
A) It runs only once
B) It never runs
C) It runs after every render
D) It throws error
Answer: C
24.
How
to create a link that navigates without refreshing the page?
A) <a href="/home">
B) <Link to="/home">
C) window.location = '/home'
D) <button onClick={() => navigate('/home')}>
Answer: B
25.
What
is the default value of a controlled input's value in React?
A) null
B) undefined
C) "" (empty string)
D) 0
Answer: C
26.
What
is the primary difference between props and state?
A) Props are mutable; state is immutable
B) Props are passed from parent; state is local to the component
C) Both are the same
D) State cannot be changed
Answer: B
27.
Which
hook would you use to fetch data when a component mounts?
A) useState
B) useEffect
C) useContext
D) useReducer
Answer: B
28.
Which
of the following is a valid way to define state with initial value 0?
A) const [count, setCount] = useState(0)
B) const count = 0
C) let [count, setCount] = useState()
D) useState = 0
Answer: A
29.
What
happens if you update state without using the setter function?
A) React updates the UI
B) State changes but UI does not update
C) Error occurs
D) Nothing happens
Answer: B
30.
How
to define a route with a dynamic parameter for blog id?
A) <Route path="/blog/:id" element={<Blog />} />
B) <Route path="/blog/*" element={<Blog />} />
C) <Route path="/blog/id" element={<Blog />} />
D) <Route path="/blog?id" element={<Blog />} />
Answer: A
31.
Which
method allows you to programmatically navigate in React Router v6?
A) useHistory()
B) useNavigate()
C) history.push()
D) navigate.push()
Answer: B
32.
What
type of component is recommended to manage state and logic?
A) Functional components with hooks
B) Class components only
C) Stateless components
D) Only JSX files
Answer: A
33.
Which
attribute specifies the current value of a controlled input?
A) defaultValue
B) value
C) inputValue
D) currentValue
Answer: B
34.
What
will happen when you call setState in a React component?
A) Immediate update to state and UI
B) Asynchronous update causing re-render
C) Synchronous update only
D) No update at all
Answer: B
35.
What
is a common use case for useEffect cleanup function?
A) Fetching data
B) Clearing timers or unsubscribing listeners
C) Updating state
D) Passing props
Answer: B
36.
What
is the purpose of <Routes> in React Router?
A) Group multiple routes
B) Render a single route at a time
C) Replace <Switch> from earlier versions
D) All of the above
Answer: D
37.
Which
is the correct way to handle multiple inputs in a form using React?
A) Separate state for each input
B) Single state object for all inputs
C) Either A or B
D) None of the above
Answer: C
38.
What
happens if you return nothing or null from a React component?
A) Error thrown
B) Nothing is rendered
C) Renders empty div
D) React crashes
Answer: B
39.
When
should you add keys to list elements?
A) Always
B) Only when mapping arrays
C) Never
D) Only for tables
Answer: B
40.
Which
hook is used to optimize expensive calculations?
A) useEffect
B) useMemo
C) useState
D) useRef
Answer: B
41.
How
to update multiple states in React?
A) Call multiple setter functions separately
B) Merge states in one object
C) Both A and B depending on use case
D) None of the above
Answer: C
42.
What
is JSX?
A) JavaScript XML syntax used to write UI components
B) A separate language
C) A library
D) A CSS syntax
Answer: A
43.
Which
of the following is NOT a React lifecycle method?
A) componentDidMount
B) useEffect
C) componentWillUpdate
D) renderJSX
Answer: D
44.
What
is the main advantage of React Router?
A) Server-side routing
B) Single-page application routing without full page reload
C) Database management
D) CSS styling
Answer: B
45.
How
do you pass functions as props?
A) <Child onClick={handleClick} />
B) <Child function="handleClick" />
C) <Child function={handleClick()} />
D) <Child function="handleClick()" />
Answer: A
46.
How
to prevent unnecessary re-renders in React?
A) Use React.memo
B) Avoid changing state unnecessarily
C) Use proper dependency arrays in hooks
D) All of the above
Answer: D
47.
Which
is the default HTTP method of an HTML form?
A) POST
B) GET
C) PUT
D) DELETE
Answer: B
48.
What
happens if you pass an empty dependency array to useEffect?
A) Runs after every render
B) Runs only once after the initial render
C) Never runs
D) Runs twice
Answer: B
49.
How
do you apply CSS classes in React JSX?
A) class="myClass"
B) className="myClass"
C) css="myClass"
D) style="myClass"
Answer: B
50.
Which
hook is used to share global state across components?
A) useContext
B) useState
C) useEffect
D) useRef
Answer: A
