⚛️ React Interview Question Why can’t we use async/await directly inside useEffect? At first, it feels natural to write this: useEffect(async () => { const data = await fetchData(); setData(data); }, []); But React will complain. Because useEffect expects either: • nothing • or a cleanup function Example of cleanup: - useEffect(() => { const id = setInterval(() => { console.log("running..."); }, 1000); return () => clearInterval(id); }, []); When you make the effect function async, it returns a Promise, not a cleanup function. And React doesn’t know how to handle that. The Correct Pattern Define an async function inside the effect: useEffect(() => { const fetchData = async () => { const data = await getUsers(); setUsers(data); }; fetchData(); }, []); Small detail. Understanding why it happens is more important than memorizing the fix. #ReactJS #FrontendInterview #JavaScript #WebDevelopment #TechCareers
Spot on, Sadhana! 👏 useEffect expects undefined or a cleanup function — async returns a Promise, so it breaks. My preferred (IIFE style): useEffect(() => { (async () => { try { const data = await fetchYourData(); setData(data); } catch (err) { console.error(err); } })(); }, [deps]);
⚛️ Great question! This is one of those React concepts many developers memorize but don’t always fully understand. 🧠 The key point is that useEffect expects a cleanup function, not a Promise, which is why making the effect function async causes issues. 💡 Wrapping the async logic inside the effect keeps React’s lifecycle predictable while still allowing async data fetching. 🚀 Small concept, but understanding it shows strong React fundamentals. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactTips
Great explanation. The key point is that React expects useEffect to return either nothing or a cleanup function. Since async functions return a Promise, React can’t treat it as cleanup logic.
UseEffect either returns nothing or a clean-up function is the core point here 🌳
Hi, I saw your posts about React and frontend development. I'm currently learning JavaScript and React deeply and sharing what I learn. Your content is really helpful, so I would love to connect and learn more from you. Looking forward to staying connected. Another clean way to handle async inside useEffect is using Promise directly instead of async/await. useEffect(() => { getUsers().then(data => { setUsers(data); }); }, []); This works because the effect itself is not async. Only the function inside runs async. We can also use IIFE (Immediately Invoked Function Expression): useEffect(() => { (async () => { const data = await getUsers(); setUsers(data); })(); }, []); Both ways follow the rule: useEffect must not return a Promise, it should return nothing or a cleanup function. Understanding this rule makes React hooks much easier to use.