Lernzettel

import React, { useState } from 'react';

function Counter() {
  // useState-Hook initialisiert den State 'count' mit dem Wert 0
  // setCount ist die Funktion, um den State zu aktualisieren
  const [count, setCount] = useState(0);

  return (
    <div>
      {/* Anzeige des aktuellen Zählerwerts */}
      <p>Aktueller Zähler: {count}</p>
      {/* Button, der den Zählerwert bei jedem Klick um 1 erhöht */}
      <button onClick={() => setCount(count + 1)}>Zähler erhöhen</button>
    </div>
  );
}

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // Erster setCount-Aufruf mit dem aktuellen Wert von count (0)
    // React plant dieses Update, führt es aber nicht sofort aus
    setCount(count + 1);
    
    // Zweiter setCount-Aufruf verwendet immer noch den gleichen aktuellen Wert (0)
    // Dieser zweite Aufruf überschreibt den ersten in der Warteschlange
    setCount(count + 2);
    
    // Zu diesem Zeitpunkt ist count immer noch 0, da die Updates noch nicht angewendet wurden
    // React batcht (gruppiert) diese Updates und führt sie nach dem Event-Handler aus
    
    // Das Endergebnis wird 2 sein (0+2), nicht 3, da beide Updates den gleichen Ausgangswert verwenden
    
    // Um Updates sequentiell zu verarbeiten, würde man eine funktionale Form verwenden:
    // setCount(prevCount => prevCount + 1);
    // setCount(prevCount => prevCount + 2);
    // Das Ergebnis wäre dann 3
  };

  return (
    <div>
      <p>Aktueller Zähler: {count}</p>
      <button onClick={handleClick}>Zähler erhöhen</button>
    </div>
  );
}

import React, { useState } from 'react';
function UserProfile() {
  // Initialisiere einen komplexen State mit einem Objekt
  // Das Objekt enthält zwei Eigenschaften: name und age
  const [user, setUser] = useState({ name: 'Max', age: 25 });

  const updateName = (newName) => {
    // Verwende die funktionale Form von setState für Zugriff auf vorherigen State
    setUser((prevUser) => {
      // Wichtig: Erstelle ein neues Objekt mit dem Spread-Operator (...)
      // Dies sorgt für Immutability - der vorherige State wird nicht mutiert
      // ...prevUser kopiert alle bestehenden Eigenschaften
      // name: newName überschreibt nur die name-Eigenschaft
      return { ...prevUser, name: newName };
    });
    
    // FALSCH wäre: user.name = newName; setUser(user);
    // Das würde den originalen State direkt mutieren
  };

  return (
    <div>
      {/* Zugriff auf Eigenschaften des State-Objekts mit der Punktnotation */}
      <p>Name: {user.name}</p>
      <p>Alter: {user.age}</p>
      {/* Bei Klick wird updateName aufgerufen und der Name auf 'Anna' gesetzt */}
      <button onClick={() => updateName('Anna')}>Namen ändern</button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';
function Timer() {
  const [seconds, setSeconds] = useState(0);

  // useEffect wird nach dem ersten Rendern und bei jeder Aktualisierung ausgeführt
  useEffect(() => {
    // setInterval startet einen Timer, der alle 1000ms (1 Sekunde) setSeconds aufruft
    const interval = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // Cleanup-Funktion: stoppt den Timer, wenn die Komponente unmontiert wird
    return () => clearInterval(interval);
  }, []); // Leeres Array bedeutet, dass der Effekt nur einmal beim Mounten ausgeführt wird

  return <p>Timer: {seconds} Sekunden</p>;
}

import React, { useState, useLayoutEffect, useCallback, useMemo, useRef } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);
  const inputRef = useRef(null);

  // useLayoutEffect wird synchron nach dem Rendern ausgeführt
  useLayoutEffect(() => {
    // Fokus auf das Eingabefeld setzen
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  // useCallback memoisiert die Funktion, um unnötige Neudefinitionen zu vermeiden
  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  // useMemo memoisiert den Wert, um unnötige Berechnungen zu vermeiden
  const squaredCount = useMemo(() => count * count, [count]);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <p>Aktueller Zähler: {count}</p>
      <p>Quadrat des Zählers: {squaredCount}</p>
      <button onClick={increment}>Zähler erhöhen</button>
    </div>
  );
}