Quiz for useEffect with API Calls

Q1: What is the primary purpose of useEffect in API calls?

A. To perform side effects like data fetching B. To define component state C. To render JSX D. To handle events

Q2: When does the useEffect hook run by default?

A. After every render B. Only on initial render C. Before render D. Never

Q3: How to run useEffect only once on component mount?

A. Pass an empty dependency array [] B. Pass [true] as dependency C. Do not pass any dependency D. Pass null as dependency

Q4: What can cause an infinite loop in useEffect?

A. Updating state inside useEffect without proper dependencies B. Passing empty array C. Not updating state D. Using console.log

Q5: Which hook is used to fetch data in functional components?

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

Q6: Where should the fetch or Axios call be placed?

A. Inside useEffect callback B. Outside the component C. Inside the return statement D. In event handlers only

Q7: What does the cleanup function in useEffect do?

A. Cleans up before the effect runs again or on unmount B. Fetches new data C. Resets state D. Renders component

Q8: How do you handle async fetch inside useEffect?

A. Define and call an async function inside useEffect B. Make useEffect async directly C. Use promises outside useEffect D. Call async function in render

Q9: Why can’t useEffect callback be async?

A. Because it must return void or cleanup function B. Because async is deprecated C. Because React disallows async D. Because async breaks rendering

Q10: How to update component state after fetching data?

A. Call setState inside useEffect after data fetch B. Update state outside useEffect C. UseRef for state update D. Directly assign state variable

Q11: What is a common mistake when using useEffect with API calls?

A. Not handling component unmount during fetch B. Not calling fetch C. Calling fetch twice D. Using wrong URL

Q12: How to cancel API requests on component unmount?

A. Using AbortController B. Using setTimeout C. Using console.log D. No need to cancel

Q13: Which hook dependency causes useEffect to re-run?

A. Any variable in dependency array B. State only C. Props only D. Nothing

Q14: What happens if you omit the dependency array?

A. useEffect runs after every render B. Runs only once C. Does not run D. Runs before render

Q15: How to prevent multiple API calls in useEffect?

A. Use empty dependency array or proper dependencies B. Call fetch multiple times C. Use useState instead D. Use useRef instead

Q16: Which lifecycle phase does useEffect mimic?

A. componentDidMount and componentDidUpdate B. componentWillUnmount only C. render phase D. constructor

Q17: How do you show loading state with API calls?

A. Use useState for loading and update during fetch B. Do nothing C. Use console.log D. Show alert

Q18: How to handle errors during fetch in useEffect?

A. Try-catch inside async function or catch on promise B. Ignore errors C. Use alerts D. Use console.log only

Q19: What is the best place to trigger an API call?

A. Inside useEffect on component mount B. Inside render C. Inside JSX D. Inside event handlers only