Qual è la differenza tra props e stato in React?

Props (proprietà) e stato (state) sono due meccanismi chiave per gestire i dati nei componenti React.

Props:

• Vengono trasmessi dal componente genitore al componente figlio.
• Sono immutabili all'interno del componente figlio.
• Permettono l'interazione tra componenti.
• Determinano l'aspetto o il comportamento del componente in base ai dati di input.

Stato:

• Appartiene a un componente specifico ed è gestito da esso.
• È mutabile all'interno del componente.
• Rappresenta dati che possono cambiare nel tempo e influenzare il rendering del componente.
• La modifica dello stato provoca il re-render del componente e dei suoi figli.

Le principali differenze possono essere presentate sotto forma di tabella:

Caratteristica	Props	Stato
Fonte	Componente genitore	Lo stesso componente
Mutabilità	Immutabili	Mutabile
Gestione	Vengono trasmessi dall'esterno	Gestiti all'interno del componente
Scopo	Visualizzare dati esterni, configurazione	Gestire lo stato interno del componente
La modifica provoca	Re-rendering al cambiare nel genitore	Re-rendering al cambiare nel componente attuale

Esempio di utilizzo delle props:

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

function ParentComponent() {
  const message = "Ciao dal genitore!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Passaggio della prop "text" */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Uso della prop "text" */}
  );
}

export default ChildComponent;

Esempio di utilizzo dello stato:

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

function Counter() {
  const [count, setCount] = useState(0); // Inizializzazione dello stato "count"

  const increment = () => {
    setCount(count + 1); // Modifica dello stato
  };

  return (
    <div>
      <p>Contatore: {count}</p>
      <button onClick={increment}>Aumenta</button>
    </div>
  );
}

export default Counter;