Quiz for Handling Loading and Errors

Q1: What is a common way to indicate loading state in React?

A. Using a state variable like isLoading B. Using console.log C. Using alert messages D. Using inline CSS

Q2: How do you initialize loading state in a React component?

A. Set isLoading to true before API call B. Set isLoading to false always C. Do not use loading state D. Set isLoading to null

Q3: Where do you update loading state after API call?

A. Set isLoading to false after response received B. Set isLoading to true after response C. Do not update loading D. Set isLoading to null

Q4: How do you show error messages in React?

A. Use a state variable for error and conditionally render message B. Use console.log only C. Ignore errors D. Use alert only

Q5: Which React hook is useful to manage loading and error states?

A. useState B. useEffect C. useContext D. useRef

Q6: What is the typical initial value of an error state?

A. null B. true C. false D. empty string

Q7: How do you reset error state before a new API call?

A. Set error state to null B. Set error to true C. Leave as is D. Set error to empty string

Q8: What pattern helps prevent UI from flickering during API calls?

A. Show loading spinner when isLoading is true B. Show error always C. Hide component D. Disable all buttons

Q9: How do you conditionally render loading message?

A. Using {isLoading && <LoadingComponent />} B. Always render loading C. Render loading in useEffect D. Use CSS only

Q10: What should you do when an API call fails?

A. Set error state with error message and stop loading B. Ignore error C. Retry immediately without informing user D. Log and continue loading

Q11: What is a good user feedback for errors?

A. Display clear and helpful error messages B. Display error codes only C. Show nothing D. Show raw stack trace

Q12: How can you avoid repetitive loading and error handling code?

A. Create custom hooks to abstract logic B. Repeat code everywhere C. Ignore handling D. Use global variables

Q13: Which of these states are important when fetching API data?

A. Loading, Success, and Error B. Only loading C. Only error D. Only success

Q14: What is a bad practice when handling errors?

A. Ignoring errors and not informing users B. Showing friendly messages C. Logging errors D. Retrying requests

Q15: How to show retry option on API failure?

A. Render a retry button on error state B. Retry automatically without user input C. Ignore retry D. Reload page

Q16: What role does useEffect play in loading and error handling?

A. Triggers API calls and updates loading/error states B. Handles UI animations C. Manages styles D. Handles routing

Q17: How to prevent setting state on unmounted components?

A. Cleanup function in useEffect cancels updates B. Ignore warnings C. Always set state D. Use synchronous code

Q18: What is a loading skeleton?

A. A placeholder UI shown while data loads B. An error message C. A spinner D. Static content

Q19: How to differentiate between network error and API error?

A. Check error type or status code B. Assume all errors are same C. Ignore error types D. Show generic message

Q20: Why is user feedback during loading important?

A. It improves user experience and trust B. It wastes time C. It is unnecessary D. It blocks UI