React – Konzepte im Überblick

import { useState, useEffect, useLayoutEffect, useRef } from "react";

function Timing() {
  const [count, setCount] = useState(0);
  const renderCountRef = useRef(0);

  renderCountRef.current++;
  console.log("1) Render-Phase – Funktionskörper läuft, count =", count);

  useLayoutEffect(() => {
    console.log("2) useLayoutEffect – läuft synchron VOR dem Paint");
    return () => console.log("   Cleanup von useLayoutEffect (vor nächstem Layout-Effect / beim Unmount)");
  }, [count]);

  useEffect(() => {
    console.log("3) useEffect – läuft NACH dem Paint (asynchron)");
    return () => console.log("   Cleanup von useEffect (vor nächstem Effect / beim Unmount)");
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Klicks: {count}
    </button>
  );
}
export default Timing;

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

function DocumentTitle({ unreadCount }) {
  useEffect(() => {
    document.title = unreadCount > 0 ? `(${unreadCount}) Postfach` : "Postfach";
  }, [unreadCount]);

  return <p>Ungelesen: {unreadCount}</p>;
}

function Tooltip({ text }) {
  const ref = useRef(null);
  const [offsetTop, setOffsetTop] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setOffsetTop(-(height + 8)); // Position VOR dem Paint korrigieren
  }, [text]);

  return (
    <div ref={ref} style={{ position: "absolute", top: offsetTop }}>
      {text}
    </div>
  );
}

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={`btn btn-${theme}`}>Klick mich</button>;
}

function ProductList({ products, query }) {
  const filtered = useMemo(
    () => products.filter((p) => p.name.toLowerCase().includes(query.toLowerCase())),
    [products, query]
  );

  return (
    <ul>
      {filtered.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

const SubmitButton = React.memo(function SubmitButton({ onClick }) {
  console.log("SubmitButton rendert");
  return <button onClick={onClick}>Absenden</button>;
});

function Form() {
  const [text, setText] = useState("");

  // Ohne useCallback würde bei jedem Tastendruck eine neue Funktion
  // entstehen und SubmitButton dadurch trotz React.memo neu rendern.
  const handleSubmit = useCallback(() => {
    console.log("gesendet");
  }, []);

  return (
    <>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <SubmitButton onClick={handleSubmit} />
    </>
  );
}

function AutoFocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // direkter DOM-Zugriff, kein Re-Render nötig
  }, []);

  return <input ref={inputRef} placeholder="Fokus liegt automatisch hier" />;
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </>
  );
}

function SearchableList({ items }) {
  const [query, setQuery] = useState("");
  const [filtered, setFiltered] = useState(items);
  const [isPending, startTransition] = useTransition();

  function handleChange(event) {
    const value = event.target.value;
    setQuery(value); // dringend: sofort im Input anzeigen

    startTransition(() => {
      // niedrige Priorität: darf verzögert/unterbrochen werden
      setFiltered(items.filter((i) => i.includes(value)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Aktualisiere Liste…</span>}
      <ul>
        {filtered.map((i) => (
          <li key={i}>{i}</li>
        ))}
      </ul>
    </>
  );
}

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue((v) => !v), []);
  return [value, toggle];
}

// Verwendung:
function Accordion() {
  const [isOpen, toggleOpen] = useToggle(false);
  return (
    <>
      <button onClick={toggleOpen}>{isOpen ? "Schließen" : "Öffnen"}</button>
      {isOpen && <p>Inhalt…</p>}
    </>
  );
}

import { createContext, useContext, useState } from "react";

const TabsContext = createContext(null);

function Tabs({ defaultValue, children }) {
  const [active, setActive] = useState(defaultValue);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  return <div className="tab-list" role="tablist">{children}</div>;
}

function Tab({ value, children }) {
  const { active, setActive } = useContext(TabsContext);
  return (
    <button
      role="tab"
      aria-selected={active === value}
      onClick={() => setActive(value)}
    >
      {children}
    </button>
  );
}

function TabPanel({ value, children }) {
  const { active } = useContext(TabsContext);
  if (active !== value) return null;
  return <div role="tabpanel">{children}</div>;
}

// "Zusammengesetzte" API: Tabs.List, Tabs.Tab, Tabs.Panel
Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;

export default Tabs;

// Verwendung:
// <Tabs defaultValue="general">
//   <Tabs.List>
//     <Tabs.Tab value="general">Allgemein</Tabs.Tab>
//     <Tabs.Tab value="security">Sicherheit</Tabs.Tab>
//   </Tabs.List>
//   <Tabs.Panel value="general">Inhalt Allgemein</Tabs.Panel>
//   <Tabs.Panel value="security">Inhalt Sicherheit</Tabs.Panel>
// </Tabs>

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount((c) => c + 1)}>
      Wert: {count}
    </button>
  );
}
export default Counter;

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext("light");

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// Verwendung in einer beliebigen Nachfahren-Komponente:
function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Aktuelles Theme: {theme}
    </button>
  );
}

import { create } from "zustand";

export const useCartStore = create((set) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({ items: [...state.items, item] })),
  clear: () => set({ items: [] }),
}));

// Verwendung in JEDER Komponente, ganz ohne Provider-Wrapper:
function CartBadge() {
  const itemCount = useCartStore((state) => state.items.length);
  return <span className="badge">{itemCount}</span>;
}

import { BrowserRouter, Routes, Route, Link, Outlet, useNavigate } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="users" element={<Users />}>
            <Route path=":userId" element={<UserDetail />} />
          </Route>
          <Route path="contact" element={<ContactForm />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Layout() {
  return (
    <div>
      <nav>
        <Link to="/">Start</Link>
        <Link to="/users">Benutzer</Link>
        <Link to="/contact">Kontakt</Link>
      </nav>
      {/* Outlet rendert die jeweils passende Kind-Route (verschachtelte Routen) */}
      <Outlet />
    </div>
  );
}

function ContactForm() {
  const navigate = useNavigate();

  function handleSubmit(event) {
    event.preventDefault();
    // ... Formular absenden ...
    navigate("/"); // Redirect nach erfolgreichem Submit
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Absenden</button>
    </form>
  );
}

export default App;

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Unerwarteter Fehler:", error, info);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? <p>Etwas ist schiefgelaufen.</p>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

// Verwendung:
// <ErrorBoundary fallback={<p>Diese Ansicht ist leider abgestürzt.</p>}>
//   <Dashboard />
// </ErrorBoundary>

function SaveButton({ data }) {
  async function handleClick() {
    try {
      const response = await fetch("/api/save", {
        method: "POST",
        body: JSON.stringify(data),
        headers: { "Content-Type": "application/json" },
      });
      if (!response.ok) throw new Error("Speichern fehlgeschlagen: " + response.status);
      alert("Gespeichert!");
    } catch (error) {
      console.error(error);
      alert("Fehler beim Speichern: " + error.message);
    }
  }

  return <button onClick={handleClick}>Speichern</button>;
}

import { useQuery } from "@tanstack/react-query";

function UserProfile({ userId }) {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["user", userId],
    queryFn: () =>
      fetch(`/api/users/${userId}`).then((res) => {
        if (!res.ok) throw new Error("Nutzer nicht gefunden");
        return res.json();
      }),
  });

  if (isLoading) return <p>Lädt…</p>;
  if (isError) return <p>Fehler: {error.message}</p>;
  return <p>{data.name}</p>;
}

function UserCard({ user, isAdmin, permissions }) {
  return (
    <>
      <h3>{user.name}</h3>

      {isAdmin && <span className="badge">Admin</span>}

      {user.active ? (
        <span className="status ok">Aktiv</span>
      ) : (
        <span className="status inactive">Inaktiv</span>
      )}

      <ul>
        {permissions.map((p) => (
          <li key={p.id}>{p.label}</li>
        ))}
      </ul>
    </>
  );
}

import { useEffect, useState } from "react";

function UserList({ searchTerm }) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

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

    async function loadUsers() {
      setLoading(true);
      setError(null);
      try {
        const res = await fetch(`/api/users?q=${searchTerm}`, {
          signal: controller.signal,
        });
        if (!res.ok) throw new Error("Serverfehler: " + res.status);
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        if (err.name !== "AbortError") setError(err);
      } finally {
        setLoading(false);
      }
    }

    loadUsers();

    // Cleanup: laufenden Request abbrechen, wenn sich searchTerm ändert
    // oder die Komponente unmountet
    return () => controller.abort();
  }, [searchTerm]);

  if (loading) return <p>Lädt…</p>;
  if (error) return <p>Fehler: {error.message}</p>;
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

import { useState } from "react";
import { Outlet, Link } from "react-router-dom";

// --- Layout ---
function AppLayout() {
  return (
    <div className="app">
      <header>
        <Link to="/feedback">Feedback</Link>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

// --- Route mit Formular ---
function FeedbackPage() {
  const [message, setMessage] = useState("");
  const [submittedList, setSubmittedList] = useState([]);
  const [status, setStatus] = useState("idle"); // idle | sending | done | error

  async function handleSubmit(event) {
    event.preventDefault();
    if (!message.trim()) return;

    setStatus("sending");
    try {
      const res = await fetch("/api/feedback", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message }),
      });
      if (!res.ok) throw new Error("Senden fehlgeschlagen");

      // State aktualisieren: neue Nachricht in die Liste aufnehmen
      setSubmittedList((prev) => [...prev, message]);
      setMessage("");
      setStatus("done");
    } catch {
      setStatus("error");
    }
  }

  return (
    <section>
      <h1>Feedback</h1>

      <form onSubmit={handleSubmit}>
        <label htmlFor="message">Ihre Nachricht</label>
        <textarea
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        />
        <button type="submit" disabled={status === "sending"}>
          {status === "sending" ? "Wird gesendet…" : "Absenden"}
        </button>
      </form>

      {status === "done" && <p>Danke für Ihr Feedback!</p>}
      {status === "error" && <p>Es ist ein Fehler aufgetreten.</p>}

      <h2>Bisherige Nachrichten in dieser Sitzung</h2>
      <ul>
        {submittedList.map((msg, i) => (
          <li key={i}>{msg}</li>
        ))}
      </ul>
    </section>
  );
}

export { AppLayout, FeedbackPage };

// Einbindung in die Routen (siehe Abschnitt 6):
// <Route path="/" element={<AppLayout />}>
//   <Route path="feedback" element={<FeedbackPage />} />
// </Route>

import { useRef } from "react";

function CollapsibleNoState({ children }) {
  const panelRef = useRef(null);

  function toggle() {
    // Direkte DOM-Manipulation – React weiß davon nichts, es gibt keinen Re-Render
    panelRef.current.classList.toggle("hidden");
  }

  return (
    <div>
      <button onClick={toggle}>Ein-/Ausblenden</button>
      <div ref={panelRef} className="panel">
        {children}
      </div>
    </div>
  );
}

import { useState } from "react";

function CollapsibleWithState({ children }) {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <button onClick={() => setOpen((o) => !o)}>Ein-/Ausblenden</button>
      {open && <div className="panel">{children}</div>}
    </div>
  );
}

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

// Validierungsregeln, analog zu Bean-Validation-Annotationen (@NotNull, @Email, @Size ...)
const schema = z.object({
  username: z.string().min(3, "Mindestens 3 Zeichen").max(20, "Maximal 20 Zeichen"),
  email: z.string().email("Ungültige E-Mail-Adresse"),
  age: z
    .number({ invalid_type_error: "Bitte eine Zahl eingeben" })
    .int()
    .min(18, "Mindestalter ist 18"),
});

function RegisterForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: { username: "", email: "", age: 18 },
  });

  async function onValid(data) {
    await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
  }

  return (
    <form onSubmit={handleSubmit(onValid)}>
      <label>
        Benutzername
        <input {...register("username")} />
      </label>
      {errors.username && <p className="error">{errors.username.message}</p>}

      <label>
        E-Mail
        <input type="email" {...register("email")} />
      </label>
      {errors.email && <p className="error">{errors.email.message}</p>}

      <label>
        Alter
        <input type="number" {...register("age", { valueAsNumber: true })} />
      </label>
      {errors.age && <p className="error">{errors.age.message}</p>}

      <button type="submit" disabled={isSubmitting}>Registrieren</button>
    </form>
  );
}

export default RegisterForm;

import { useEffect, useState } from "react";

/**
 * Verzögert die Übernahme eines Werts um `delay` Millisekunden.
 * Nützlich z. B. für Live-Suchfelder, um nicht bei jedem Tastendruck
 * einen Request abzusetzen.
 */
function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cleanup: alten Timer verwerfen, wenn sich value/delay
    // erneut ändern, bevor die Zeit abgelaufen ist
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

import { useState, useEffect } from "react";
import useDebounce from "./useDebounce";

function SearchBox() {
  const [input, setInput] = useState("");
  const debouncedInput = useDebounce(input, 400);

  useEffect(() => {
    if (!debouncedInput) return;
    fetch(`/api/search?q=${debouncedInput}`);
    // ... Ergebnis verarbeiten ...
  }, [debouncedInput]);

  return (
    <input
      value={input}
      onChange={(e) => setInput(e.target.value)}
      placeholder="Suchen…"
    />
  );
}

import { useState } from "react";

function FileUpload() {
  const [file, setFile] = useState(null);
  const [status, setStatus] = useState("idle");

  function handleFileChange(event) {
    const selected = event.target.files?.[0] ?? null;
    setFile(selected);
  }

  async function handleUpload() {
    if (!file) return;

    const formData = new FormData();
    formData.append("file", file);

    setStatus("uploading");
    try {
      const res = await fetch("/api/upload", {
        method: "POST",
        body: formData, // Content-Type NICHT manuell setzen – der Browser
                         // ergänzt automatisch den korrekten multipart-Boundary-Header
      });
      if (!res.ok) throw new Error("Upload fehlgeschlagen");
      setStatus("done");
    } catch (err) {
      console.error(err);
      setStatus("error");
    }
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {file && <p>Ausgewählt: {file.name} ({Math.round(file.size / 1024)} KB)</p>}
      <button onClick={handleUpload} disabled={!file || status === "uploading"}>
        Hochladen
      </button>
      {status === "done" && <p>Upload erfolgreich!</p>}
      {status === "error" && <p>Fehler beim Upload.</p>}
    </div>
  );
}

export default FileUpload;

import { useParams, useSearchParams, Link } from "react-router-dom";

// Route: <Route path="/products/:productId" element={<ProductDetail />} />
// Aufgerufene URL z. B.: /products/42?tab=reviews

function ProductDetail() {
  const { productId } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab = searchParams.get("tab") ?? "info";

  function selectTab(tab) {
    setSearchParams({ tab }); // aktualisiert die URL, ohne Seite neu zu laden
  }

  return (
    <div>
      <h1>Produkt #{productId}</h1>

      <nav>
        <button onClick={() => selectTab("info")}>Info</button>
        <button onClick={() => selectTab("reviews")}>Bewertungen</button>
      </nav>

      {activeTab === "info" && <p>Produktinformationen zu {productId}…</p>}
      {activeTab === "reviews" && <p>Bewertungen zu {productId}…</p>}

      <Link to={`/products/${productId}?tab=reviews`}>
        Direktlink zu den Bewertungen
      </Link>
    </div>
  );
}

export default ProductDetail;

// Button.module.css
// .primary { background: royalblue; color: white; }

import styles from "./Button.module.css";

function Button({ children }) {
  return <button className={styles.primary}>{children}</button>;
}

import styled from "styled-components";

const PrimaryButton = styled.button`
  background: ${(props) => (props.$danger ? "crimson" : "royalblue")};
  color: white;
  padding: 8px 16px;
`;

function Button({ children, danger }) {
  return <PrimaryButton $danger={danger}>{children}</PrimaryButton>;
}

import logoUrl from "./assets/logo.png"; // Build-Tool liefert eine (ggf. gehashte) URL

function Header() {
  return <img src={logoUrl} alt="Firmenlogo" width={120} />;
}

import { lazy, Suspense } from "react";

const AdminPanel = lazy(() => import("./AdminPanel.jsx"));

function App() {
  return (
    <Suspense fallback={<p>Lädt Admin-Bereich…</p>}>
      <AdminPanel />
    </Suspense>
  );
}

{
  "greeting": "Hallo, {{name}}!",
  "nav": { "home": "Start", "contact": "Kontakt" }
}

{
  "greeting": "Hello, {{name}}!",
  "nav": { "home": "Home", "contact": "Contact" }
}

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import de from "./locales/de/translation.json";
import en from "./locales/en/translation.json";

i18n.use(initReactI18next).init({
  resources: { de: { translation: de }, en: { translation: en } },
  lng: "de",
  fallbackLng: "en",
  interpolation: { escapeValue: false },
});

export default i18n;

import { useTranslation } from "react-i18next";

function Greeting({ userName }) {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <p>{t("greeting", { name: userName })}</p>
      <nav>
        <a href="/">{t("nav.home")}</a>
        <a href="/contact">{t("nav.contact")}</a>
      </nav>

      <button onClick={() => i18n.changeLanguage("de")}>DE</button>
      <button onClick={() => i18n.changeLanguage("en")}>EN</button>
    </div>
  );
}

import { useState, useEffect } from "react";

function usePersistentState(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = window.localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Verwendung: const [draft, setDraft] = usePersistentState("feedback-draft", "");

import { create } from "zustand";
import { persist } from "zustand/middleware";

export const useSettingsStore = create(
  persist(
    (set) => ({
      theme: "light",
      setTheme: (theme) => set({ theme }),
    }),
    { name: "app-settings" } // localStorage-Key
  )
);

function getCsrfToken() {
  return document
    .querySelector('meta[name="csrf-token"]')
    ?.getAttribute("content");
}

async function apiPost(url, body) {
  return fetch(url, {
    method: "POST",
    credentials: "include", // Session-Cookie mitschicken
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": getCsrfToken(),
    },
    body: JSON.stringify(body),
  });
}

export { apiPost };

import { useReducer } from "react";

const initialState = { step: 1, data: { name: "", email: "", plan: "" } };

function reducer(state, action) {
  switch (action.type) {
    case "NEXT_STEP":
      return { ...state, step: state.step + 1 };
    case "PREV_STEP":
      return { ...state, step: state.step - 1 };
    case "UPDATE_FIELD":
      return { ...state, data: { ...state.data, [action.field]: action.value } };
    default:
      return state;
  }
}

function RegistrationWizard() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      {state.step === 1 && (
        <input
          placeholder="Name"
          value={state.data.name}
          onChange={(e) => dispatch({ type: "UPDATE_FIELD", field: "name", value: e.target.value })}
        />
      )}
      {state.step === 2 && (
        <input
          placeholder="E-Mail"
          value={state.data.email}
          onChange={(e) => dispatch({ type: "UPDATE_FIELD", field: "email", value: e.target.value })}
        />
      )}
      {state.step === 3 && <p>Zusammenfassung: {state.data.name}, {state.data.email}</p>}

      {state.step > 1 && <button onClick={() => dispatch({ type: "PREV_STEP" })}>Zurück</button>}
      {state.step < 3 && <button onClick={() => dispatch({ type: "NEXT_STEP" })}>Weiter</button>}
    </div>
  );
}

import { useEffect, useState } from "react";

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    console.log("Verbinde mit Raum", roomId);
    const connection = createConnection(roomId); // fiktive API
    connection.on("message", (msg) => setMessages((m) => [...m, msg]));
    connection.connect();

    return () => {
      console.log("Trenne Verbindung zu Raum", roomId);
      connection.disconnect();
    };
  }, [roomId]); // Bei Wechsel von roomId: erst alte Verbindung trennen, dann neue aufbauen

  return (
    <ul>
      {messages.map((m, i) => (
        <li key={i}>{m}</li>
      ))}
    </ul>
  );
}