Server State vs Client State · fullstack.org.ua

fullstack.org.ua

Server State vs Client State · fullstack.org.ua

jsx

import { useEffect, useState } from "react";

export default function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // Стан клієнта: це рішення інтерфейсу, а не дані сервера
  const [selectedTaskId, setSelectedTaskId] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function loadTasks() {
      try {
        setIsLoading(true);
        setError(null);

        const response = await fetch(
          "https://jsonplaceholder.typicode.com/todos?_limit=5",
          { signal: controller.signal }
        );

        if (!response.ok) {
          throw new Error("Не вдалося завантажити завдання");
        }

        const data = await response.json();
        setTasks(data);
      } catch (error) {
        if (error.name !== "AbortError") {
          setError(error.message);
        }
      } finally {
        setIsLoading(false);
      }
    }

    loadTasks();

    return () => {
      controller.abort();
    };
  }, []);

  if (isLoading) {
    return <p>Завантаження...</p>;
  }

  if (error) {
    return <p role="alert">Помилка: {error}</p>;
  }

  return (
    <section>
      <h2>Завдання</h2>

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <button
              type="button"
              onClick={() => setSelectedTaskId(task.id)}
              aria-pressed={selectedTaskId === task.id}
            >
              {task.title}
            </button>

            {selectedTaskId === task.id && <strong> — вибрано</strong>}
          </li>
        ))}
      </ul>
    </section>
  );
}