🔹MCQs Of Class 18: Error Handling and Loading States

 

🔹MCQs Of Class 18

Error Handling and Loading States

---

✅ MCQs on Error Handling and Loading States

🔹 Section 1: useState and useEffect Basics

1.   What hook is commonly used to store loading state in a React component?
A) useRef()
B) useMemo()
C) useCallback()
D) useState() ✅

2.   Which hook is used to fetch data when the component mounts?
A) useReducer()
**B) useEffect()** ✅ C) useContext() D)useMemo()`

3.   What is the initial value of isLoading usually set to?
A) false ✅
B) true
C) null
D) undefined

4.   Which of the following is not a valid useState setter function name?
A) setIsLoading
B) getIsLoading ✅
C) setError
D) setUsers

5.   Where should fetch() ideally be called in a React function component?
A) Inside the JSX
B) Inside useEffect ✅
C) Inside useState
D) Inside render()

---

🔹 Section 2: Loading States

6.   What does isLoading typically represent?
A) An API error
B) A boolean to show if data is being fetched ✅
C) A retry counter
D) A cached state

7.   What JSX will show only when isLoading is true?
A) {!isLoading && <p>Loading...</p>}
B) {isLoading && <p>Loading...</p>} ✅
C) {isLoading ? null : <p>Loading...</p>}
D) {<p>Loading...</p>}

8.   Which of the following can be used as a visual loading indicator?
A) input
B) spinner ✅
C) div only
D) image only

9.   Which is a good place to set isLoading to true?
A) Before calling fetch ✅
B) After fetch returns
C) Inside the return statement
D) After setting data

10.                   What happens if you don’t reset isLoading to false after fetching?
A) Nothing
B) Users see duplicate data
C) The loading message never disappears ✅
D) React throws an error

---

🔹 Section 3: Error Handling with try-catch

11.                   What does a try-catch block handle?
A) State
B) Runtime errors ✅
C) Hooks
D) JSX formatting

12.                   Where is the error caught in a try-catch block?
A) In the try section
B) In the catch block ✅
C) After finally
D) Outside the block

13.                   What does catch (error) represent?
A) The fetch function
B) The result of JSX
C) The error thrown inside try ✅
D) A component prop

14.                   What kind of errors can fetch() throw if the URL is invalid?
A) SyntaxError
B) NetworkError or HTTP error ✅
C) ValueError
D) DOMException

15.                   How can you manually throw an error in JavaScript?
A) send Error()
B) throw new Error("message") ✅
C) new.catch(error)
D) try(error)

---

🔹 Section 4: Displaying Errors in UI

16.                   How should an error be displayed to users in React?
A) Use console.log(error)
B) Show nothing
C) Use a state like setError() to display error message ✅
D) Throw it again

17.                   Which React syntax correctly shows error conditionally?
A) {error ? <p>Error!</p> : null}
B) {error && <p>Error!</p>}
C) Both A and B ✅
D) Neither

18.                   What color is usually used for error messages in UI?
A) Blue
B) Green
C) Red ✅
D) Yellow

19.                   What can be a user-friendly error message?
A) "Oops! Something went wrong. Try again." ✅
B) "Unexpected token in JSON"
C) "500 Internal Server Error"
D) "TypeError: undefined is not a function"

20.                   Which of these is NOT an ideal error message for beginners?
A) "Network error, please check your connection"
B) "Page not found"
C) "SyntaxError: Unexpected < token" ✅
D) "Try reloading the app"

---

🔹 Section 5: Retry Logic

21.                   When should you show a retry button?
A) After successful fetch
B) When there is an error ✅
C) Before fetch
D) Always

22.                   What does clicking the retry button usually trigger?
A) Re-run the API fetch function ✅
B) Reload the page
C) Set error to true
D) Toggle loading to true

23.                   What happens if you retry without resetting isLoading?
A) Multiple fetch calls may overlap ✅
B) Nothing happens
C) UI breaks
D) Data is lost

24.                   What state should be cleared before retrying?
A) users
B) id
C) error ✅
D) isVisible

25.                   A good retry implementation includes:
A) Loading reset
B) Clearing error
C) Calling fetch again
D) All of the above ✅

---

🔹 Section 6: Edge Case Handling

26.                   What should you display when fetched data is an empty array?
A) Loading
B) “No data available” message ✅
C) Error
D) Retry

27.                   What if users.length === 0 but no error?
A) Show loading
B) Show "No users found" ✅
C) Retry
D) Throw error

28.                   How can you handle HTTP status codes like 404 manually?
A) With React Router
B) By checking response.status after fetch ✅
C) Using setTimeout()
D) Using JSX only

29.                   What message should be shown on 404 error?
A) "Page not found" ✅
B) "Success!"
C) "Loading..."
D) "Retry now"

30.                   What will happen if you forget to handle .ok after fetch?
A) Everything works
B) Errors like 404 won’t be caught unless fetch fails ✅
C) React crashes
D) Nothing happens

---

🔹 Section 7: Code Understanding

31.                   What does setIsLoading(true) do?
A) Starts showing loading state ✅
B) Stops fetch
C) Logs to console
D) None

32.                   Where is setIsLoading(false) ideally placed?
A) Before fetch
B) After fetch completes ✅
C) Inside error
D) Outside component

33.                   Which is correct?
A) setError("Something went wrong") ✅
B) getError("Try again")
C) throwError(true)
D) error = "Failed"

34.                   useEffect(() => {...}, []) means:
A) Run fetch on every render
B) Run fetch when a button is clicked
C) Run fetch only once after mount ✅
D) Never run

35.                   What causes infinite re-renders in useEffect?
A) No array
B) Missing dependency array ✅
C) Empty function
D) console.log

---

🔹 Section 8: Best Practices

36.                   Why use finally in fetch logic?
A) To show data
B) To stop loading regardless of success/error ✅
C) To delete data
D) To retry

37.                   What should you not show in a public-facing error message?
A) Friendly text
B) Stack trace or raw error ✅
C) Retry options
D) Contact info

38.                   Which order is best in fetch logic?
A) fetch → setLoading(false) → setData
B) setError → fetch → setLoading
C) setLoading(true) → fetch → setData → setLoading(false) ✅
D) None

39.                   What causes "Cannot read property of null" error?
A) CSS
B) Accessing data before fetch completes ✅
C) Wrong hook
D) Wrong import

40.                   Why is conditional rendering useful in error/loading states?
A) Reduces imports
B) Improves user experience ✅
C) Makes code slower
D) Avoids components

---

🔹 Section 9: UI Handling

41.                   When should you hide the “Retry” button?
A) After an error
B) When loading starts again ✅
C) Always show
D) Never

42.                   Which is better UI for loading state?
A) Spinner or text ✅
B) Alert box
C) Popup
D) Table

43.                   What is a UX benefit of isLoading?
A) Shows user that system is working ✅
B) Shows only errors
C) Stops the code
D) Loads files

44.                   What if no loading state is used?
A) Everything is clear
B) User may think app is stuck ✅
C) Faster code
D) Better design

45.                   Should API errors be shown on production?
A) Yes
B) Only user-friendly messages ✅
C) No
D) Always hide everything

---

🔹 Section 10: Bonus Logic and Debugging

46.                   console.error(error) is useful for:
A) UI messages
B) Developer debugging ✅
C) Styling
D) JSX logic

47.                   What will setError(null) do?
A) Clear the previous error ✅
B) Show new error
C) Display "null"
D) Hide the component

48.                   What's a good practice before setting new error?
A) Log old error
B) Clear old error ✅
C) Ignore
D) Fetch again

49.                   When calling an API repeatedly, which state helps prevent UI glitches?
A) isLoading ✅
B) users
C) id
D) filter

50.                   When using async/await, which syntax is correct?
A) const data = await fetch() ✅
B) fetch() = await const
C) await fetch().then()
D) return fetch()