CSRClient ComponentuseStateuseEffect

Client-Side Rendering

This page's data is fetched entirely in the browser after JS loads. Watch the loading state — that's CSR in action. No server-side data fetching.

⚡ CSR Data Fetch (watch on first load!)
⏳ Fetching from client... (server sent empty shell)

↑ Server sent <div>Loading...</div>. JS ran, fetched data, then React hydrated the UI.

useState — Simple Counter

State that lives in the component, triggers re-render on change.

Count: 0
const [count, setCount] = useState(0);

// useState returns [currentValue, setter]
// Calling setter → triggers re-render
// Functional update (safe for async): setCount(c => c + 1)
🎤 Interview Answer"CSR fetches data client-side, after the JS bundle loads and runs. The server sends a minimal HTML shell. I use it for user-specific, real-time, or highly-interactive features — dashboards, live feeds, chat. The trade-off is no SEO for that data and a brief loading flash."

useEffect — The Full Story

// 1. No dependency array → runs after EVERY render
useEffect(() => { console.log('every render') });

// 2. Empty array → runs ONCE on mount (CSR fetch pattern)
useEffect(() => { fetchData() }, []);

// 3. With deps → runs when deps change (componentDidUpdate)
useEffect(() => { fetchUser(id) }, [id]);

// 4. Cleanup → returned fn runs before next effect / unmount
useEffect(() => {
  const sub = subscribe(userId);
  return () => sub.unsubscribe();  // cleanup!
}, [userId]);
✅ Pros: Highly interactive, real-time, user-specific, no page reload · ❌ Cons: Poor SEO for fetched data, JS required, initial loading state