State Management & Data Fetching

Real-world analogy

What is it?

State management is how you store and update data in your React app. Local state (useState) is for single components. Context (useContext) shares state across components. React Query manages server state — data that comes from your API. Data fetching is how your frontend communicates with your backend API using HTTP requests.

Real-world relevance

Every app you use daily does this: Instagram loads your feed (data fetching), updates the like count instantly when you tap (optimistic update), and caches your feed so it loads fast when you come back (React Query caching).

Key points

• useState — Local State — const [count, setCount] = useState(0). Each component manages its own data. When you call setCount, React re-renders that component with the new value. Simple and direct.
• useEffect — Side Effects — Run code when something changes: useEffect(() => { fetchData() }, [userId]). The array at the end says 'run this when userId changes'. Empty array [] means 'run once on mount'.
• useContext — Shared State — Pass data through the component tree without prop drilling. Create a context, wrap your app in a Provider, and any child can access the value. Great for themes, auth, and language.
• fetch & axios — HTTP Requests — fetch('http://localhost:3000/api/users') calls your NestJS backend. axios is a popular library that's easier to use: axios.get('/users'). Both return promises.
• React Query (TanStack Query) — The game-changer for data fetching. useQuery(['users'], fetchUsers) handles loading, errors, caching, and refetching automatically. No more manually managing loading states!
• CORS Explained — Cross-Origin Resource Sharing. Your React app (localhost:3000) calls NestJS (localhost:4000) — browser blocks it for security! Fix: enable CORS on the backend with app.enableCors().
• Loading & Error States — Every data fetch has 3 states: loading (spinner), success (show data), error (show message). React Query gives you { isLoading, isError, data } — no manual state juggling.
• Optimistic Updates — Update the UI immediately BEFORE the server responds, then roll back if it fails. Makes the app feel instant. React Query makes this easy with onMutate/onError callbacks.

Code example

// useState — local state
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

// useEffect — fetch data on mount
import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://localhost:3000/api/users')
      .then(res => res.json())
      .then(data => { setUsers(data); setLoading(false); })
      .catch(err => console.error(err));
  }, []); // empty array = run once

  if (loading) return <p>Loading...</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// React Query — the better way
import { useQuery, useMutation } from '@tanstack/react-query';

function UserList() {
  const { data: users, isLoading, isError } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Something went wrong!</p>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// NestJS — Enable CORS (main.ts)
const app = await NestFactory.create(AppModule);
app.enableCors({
  origin: 'http://localhost:3000', // React app URL
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  credentials: true,
});
await app.listen(4000);

Line-by-line walkthrough

1. 1. useState — local state
2. 2. Importing required dependencies
3. 3.
4. 4. Declaring a function
5. 5. Declaring a variable
6. 6. Returning a value
7. 7.
8. 8.
9. 9.
10. 10. Closing expression
11. 11. Closing block
12. 12.
13. 13. useEffect — fetch data on mount
14. 14. Importing required dependencies
15. 15.
16. 16. Declaring a function
17. 17. Declaring a variable
18. 18. Declaring a variable
19. 19.
20. 20.
21. 21.
22. 22. Method chaining on the previous expression
23. 23. Method chaining on the previous expression
24. 24. Method chaining on the previous expression
25. 25.
26. 26.
27. 27. Conditional check
28. 28. Returning a value
29. 29. Closing block
30. 30.
31. 31. React Query — the better way
32. 32. Importing required dependencies
33. 33.
34. 34. Declaring a function
35. 35. Declaring a variable
36. 36.
37. 37.
38. 38.
39. 39.
40. 40. Conditional check
41. 41. Conditional check
42. 42. Returning a value
43. 43. Closing block
44. 44.
45. 45. NestJS — Enable CORS (main.ts)
46. 46. Declaring a variable
47. 47.
48. 48.
49. 49.
50. 50.
51. 51.
52. 52. Waiting for an async operation to complete

Spot the bug

function UserList() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  });
  return <ul>{users.map(u => <li>{u.name}</li>)}</ul>;
}

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• React - Managing State (React Official)
• TanStack Query Documentation (TanStack)
• React State Management Tutorial (Fireship)