🔹MCQs Of Class 17
Fetching Data from API in React
1. What does the fetch() function do
in JavaScript?
A)
Creates a new HTML element
B) Sends a network request to get data
C) Changes the state of a React component
D) Updates the DOM directly
2. Which hook is used to perform
side effects like fetching data in React?
A)
useState
B) useEffect
C) useContext
D) useReducer
3. What does useState hook provide?
A)
A way to perform side effects
B) A state variable and a function to update it
C) A method to fetch data
D) A way to manipulate the DOM
4. What argument does useEffect hook
accept?
A)
A function to execute
B) A string value
C) An object
D) A number
5. How do you prevent useEffect from
running on every render?
A)
By passing an empty dependency array []
B) By using useState
C) By not using useEffect at all
D) By passing a string argument
6. What is the default HTTP method
used by fetch()?
A)
POST
B) GET
C) PUT
D) DELETE
7. How do you convert the response
from fetch() to JSON?
A)
response.text()
B) response.json()
C) response.data()
D) response.convert()
8. Which React hook is typically
used to store the data fetched from an API?
A)
useState
B) useEffect
C) useMemo
D) useCallback
9. What is the purpose of the
dependency array in useEffect?
A)
To specify when the effect should re-run
B) To store fetched data
C) To update state
D) To define a new component
10. What happens if you omit the
dependency array in useEffect?
A)
Effect runs only once
B) Effect never runs
C) Effect runs after every render
D) Component throws an error
11. Which hook is used to track
whether data is loading?
A)
useState
B) useEffect
C) useReducer
D) useRef
12. How do you handle errors during
fetching data?
A)
Using try-catch inside useEffect
B) Using .catch() on the fetch promise
C) Using useState
D) You cannot handle errors in fetch
13. In which lifecycle phase does useEffect
with empty dependencies run?
A)
On component mount
B) On every render
C) On component unmount
D) Only when state changes
14. How do you cancel a fetch
request in React?
A)
Using AbortController
B) Using useState
C) Using setTimeout
D) You cannot cancel fetch requests
15. What should you pass as the
second argument to useEffect if you want it to run every time a specific
variable changes?
A)
[variable]
B) []
C) null
D) undefined
16. What does setUsers(data) do in
the context of useState?
A)
Fetches users
B) Updates the state variable users
C) Resets the users state to empty
D) Logs data to the console
17. When fetching data in React, why
is it important to handle loading state?
A)
To inform users that data is being fetched
B) To update the DOM
C) To stop fetching data
D) To prevent errors
18. What is the purpose of key prop
in React lists?
A)
To uniquely identify elements for efficient rendering
B) To style elements
C) To add event listeners
D) To fetch data
19. What will happen if you do not
add a key prop when rendering lists in React?
A)
The list won’t render
B) React will throw an error
C) React will log a warning and may have rendering issues
D) Nothing happens
20. What is the JSONPlaceholder API?
A)
A real database service
B) A free fake API for testing and prototyping
C) A React library
D) A CSS framework
21. How do you display a loading
message conditionally in React?
A)
Using an if-else block in JSX
B) Using conditional rendering with ternary or && operator
C) Using CSS
D) Using fetch method
22. How to fetch data only once in
React functional components?
A)
Use useState only
B) Use useEffect with empty dependencies array
C) Use componentDidMount
D) Use a loop inside render
23. What happens if fetch fails due
to network error?
A)
It returns an empty array
B) It throws an error that can be caught by .catch()
C) It retries automatically
D) It returns a success status
24. Which method is used to trigger
state update in React?
A)
setState
B) updateState
C) setVariable (like setUsers)
D) updateVariable
25. What will useEffect(() => {},
[]) do?
A)
Run once after first render
B) Run every time component re-renders
C) Run on every state change
D) Never run
26. How do you convert a promise
returned by fetch into usable data?
A)
Use .then() and convert with .json()
B) Use .catch()
C) Use async/await only
D) Use JSON.stringify
27. Which hook would you use to keep
track of form input values?
A)
useState
B) useEffect
C) useRef
D) useMemo
28. What is the main advantage of
hooks like useState and useEffect?
A)
They allow functional components to have state and lifecycle features
B) They make class components unnecessary
C) They improve CSS styling
D) They optimize database queries
29. Which React hook cannot be used
inside loops, conditions, or nested functions?
A)
useState
B) useEffect
C) All hooks must be called at the top level
D) useRef
30. How can you add error handling
to a fetch call?
A)
Adding .catch() after fetch promise chain
B) Adding .then() after fetch promise chain
C) Using try-catch outside fetch
D) Using a timeout function
31. What React hook would you use to
track if data is still loading?
A)
useState
B) useEffect
C) useMemo
D) useCallback
32. Which of the following is a
valid way to update a state array?
A)
setUsers(newArray)
B) users.push(newUser)
C) users = newArray
D) setUsers.push(newUser)
33. What is the initial state of loading
to show a loading spinner before fetch?
A)
true
B) false
C) null
D) undefined
34. Which hook would you use to
memoize a function?
A)
useState
B) useEffect
C) useCallback
D) useReducer
35. Why is it important to clean up
effects in useEffect?
A)
To prevent memory leaks and unwanted subscriptions
B) To restart the effect
C) To refresh the UI
D) To fetch data again
36. What does setLoading(false) signify
in fetch calls?
A)
Data is still loading
B) Data fetch is complete
C) There is an error
D) Fetch is cancelled
37. Which JavaScript feature does
fetch use to handle asynchronous operations?
A)
Callbacks
B) Promises
C) Loops
D) Recursion
38. How would you write a fetch call
using async/await inside useEffect?
A)
Define an async function inside useEffect and call it
B) Make useEffect async
C) Use setTimeout
D) Use promises only
39. What React component part is
used to render HTML?
A)
JSX
B) JSON
C) CSS
D) State
40. How to pass data from parent to
child component in React?
A)
Using props
B) Using state
C) Using useEffect
D) Using fetch
41. What is the main purpose of the useState
hook?
A)
To store and update data within components
B) To fetch data from API
C) To create new components
D) To style components
42. What does the then() method do
in fetch?
A)
Handles successful fetch response
B) Handles errors
C) Stops the fetch
D) Converts data to JSON
43. What type of data format is
usually returned from REST APIs?
A)
XML
B) JSON
C) HTML
D) CSV
44. How can you display fetched data
inside JSX?
A)
By mapping over the data array
B) Using alert()
C) Using console.log
D) Using fetch
45. Which hook would you use to
perform cleanup on component unmount?
A)
useEffect with return cleanup function
B) useState
C) useMemo
D) useRef
46. What is the effect of calling setState
or setUsers in React?
A)
Updates the state and triggers re-render
B) Stops rendering
C) Deletes the state
D) Does nothing
47. What is a typical use case for
the empty dependency array in useEffect?
A)
To fetch data only once on component mount
B) To fetch data continuously
C) To avoid fetching data
D) To run effect on every render
48. What does the .catch() method
do?
A)
Handles rejected promises or errors
B) Handles successful promises
C) Converts data to string
D) Stops fetching
49. What does the following line do?
const
[data, setData] = useState([]);
A) Declares a state variable data with initial empty array
B) Calls fetch API
C) Updates the DOM
D) Declares a function
50. What React concept is
demonstrated by passing [variable] as the dependency array?
A)
Conditional re-execution of useEffect when variable changes
B) Running useEffect only once
C) Preventing state update
D) Declaring a variable
