Na czym polega różnica między propsami a stanem w React?

Props (właściwości) i stan (state) to dwa kluczowe mechanizmy zarządzania danymi w komponentach React.

Props:

• Są przekazywane z komponentu nadrzędnego do podrzędnego.
• Są niezmiennicze (immutable) wewnątrz komponentu podrzędnego.
• Umożliwiają interakcję między komponentami.
• Określają wygląd lub zachowanie komponentu na podstawie danych wejściowych.

Stan:

• Należy do konkretnego komponentu i jest nim zarządzany.
• Jest zmienny (mutable) wewnątrz komponentu.
• Reprezentuje dane, które mogą się zmieniać z czasem i wpływać na renderowanie komponentu.
• Zmiana stanu powoduje ponowne renderowanie komponentu i jego potomków.

Główne różnice można przedstawić w formie tabeli:

Cecha	Props	Stan
Źródło	Komponent nadrzędny	Sam komponent
Zmienność	Niezmiennicze (immutable)	Zmienny (mutable)
Zarządzanie	Przekazywane z zewnątrz	Zarządzany wewnątrz komponentu
Przeznaczenie	Wyświetlanie danych zewnętrznych, konfiguracja	Zarządzanie stanem wewnętrznym komponentu
Zmiana powoduje	Ponowne renderowanie przy zmianie w rodzicu	Ponowne renderowanie przy zmianie w bieżącym komponencie

Przykład użycia props:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Witaj od rodzica!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Przekazanie props "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Użycie props "text" */}
  );
}

export default ChildComponent;

Przykład użycia stanu:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Inicjalizacja stanu "count"

  const increment = () => {
    setCount(count + 1); // Zmiana stanu
  };

  return (
    <div>
      <p>Licznik: {count}</p>
      <button onClick={increment}>Zwiększ</button>
    </div>
  );
}

export default Counter;