17:T4fe,import React, { useState, useEffect } from 'react'; function UserList() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // 1. Define async function inside effect const fetchUsers = async () => { try { setLoading(true); const response = await fetch('https://jsonplaceholder.typicode.com/users'); if (!response.ok) { throw new Error('Failed to fetch users'); } const data = await response.json(); setUsers(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchUsers(); }, []); // Empty deps = fetch on mount // 2. Conditional rendering based on state if (loading) return

Loading users...

; if (error) return

Error: {error}

; return (

{user.name}

{user.email}

); }18:T4e4,// 1. The Class-based Error Boundary import React from 'react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } // Update state so the next render will show the fallback UI static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { // You can log the error to a service like Sentry or LogRocket console.error("Caught by boundary:", error, errorInfo); } render() { if (this.state.hasError) { return (

Something went wrong.

); } return this.props.children; } } // 2. Usage: Wrap risky components function App() { return (

); }

Phase 7: Data Fetching & Async

0 of 3 topics completed

Fetching Data with Effects

Race Conditions & Cleanup

Error Boundaries

🎤 Mock Interview