JSON in React & Next.js — Data Fetching, State & Server Components

1'use client';
2import { useEffect, useState } from 'react';
3
4interface Post {
5  id: number;
6  title: string;
7  body: string;
8}
9
10export function PostList() {
11  const [posts, setPosts] = useState<Post[]>([]);
12  const [loading, setLoading] = useState(true);
13  const [error, setError] = useState<string | null>(null);
14
15  useEffect(() => {
16    const controller = new AbortController();
17
18    fetch('/api/posts', { signal: controller.signal })
19      .then(res => {
20        if (!res.ok) throw new Error(`HTTP ${res.status}`);
21        return res.json();
22      })
23      .then((data: Post[]) => setPosts(data))
24      .catch(err => {
25        if (err.name !== 'AbortError') setError(err.message);
26      })
27      .finally(() => setLoading(false));
28
29    return () => controller.abort();
30  }, []);
31
32  if (loading) return <div>Loading...</div>;
33  if (error) return <div>Error: {error}</div>;
34  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
35}

1'use client';
2import useSWR from 'swr';
3
4const fetcher = (url: string) => fetch(url).then(res => res.json());
5
6interface User { id: number; name: string; email: string }
7
8export function UserProfile({ userId }: { userId: string }) {
9  const { data, error, isLoading, mutate } = useSWR<User>(
10    `/api/users/${userId}`,
11    fetcher,
12    {
13      revalidateOnFocus: true,
14      dedupingInterval: 5000,
15    }
16  );
17
18  if (isLoading) return <div>Loading...</div>;
19  if (error) return <div>Failed to load</div>;
20  if (!data) return null;
21
22  return (
23    <div>
24      <h2>{data.name}</h2>
25      <p>{data.email}</p>
26      <button onClick={() => mutate()}>Refresh</button>
27    </div>
28  );
29}

1'use client';
2import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
3
4interface Todo { id: number; title: string; completed: boolean }
5
6export function TodoApp() {
7  const queryClient = useQueryClient();
8
9  const { data: todos = [], isLoading } = useQuery<Todo[]>({
10    queryKey: ['todos'],
11    queryFn: () => fetch('/api/todos').then(res => res.json()),
12  });
13
14  const addTodo = useMutation({
15    mutationFn: (title: string) =>
16      fetch('/api/todos', {
17        method: 'POST',
18        headers: { 'Content-Type': 'application/json' },
19        body: JSON.stringify({ title, completed: false }),
20      }).then(res => res.json()),
21    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
22  });
23
24  return (
25    <div>
26      <button onClick={() => addTodo.mutate('New task')}>Add Todo</button>
27      {isLoading ? <p>Loading...</p> : (
28        <ul>{todos.map(t => <li key={t.id}>{t.title}</li>)}</ul>
29      )}
30    </div>
31  );
32}

1const [user, setUser] = useState({ name: 'Alice', settings: { theme: 'dark' } });
2
3// WRONG — mutates state directly
4user.settings.theme = 'light';
5setUser(user);
6
7// CORRECT — immutable spread
8setUser(prev => ({
9  ...prev,
10  settings: { ...prev.settings, theme: 'light' },
11}));

1import { create } from 'zustand';
2
3interface AppState {
4  config: Record<string, unknown>;
5  updateConfig: (path: string, value: unknown) => void;
6}
7
8const useStore = create<AppState>((set) => ({
9  config: { theme: 'dark', language: 'en', notifications: true },
10  updateConfig: (path, value) =>
11    set(state => ({
12      config: { ...state.config, [path]: value },
13    })),
14}));