Care este diferența dintre props și stare în React?

Props (proprietăți) și stare (state) sunt două mecanisme cheie pentru gestionarea datelor în componentele React.

Props:

• Sunt transmise de la componenta părinte către componenta copil.
• Sunt imuabile (immutable) în interiorul componentei copil.
• Permită interacțiunea între componente.
• Determină aspectul sau comportamentul componentei pe baza datelor de intrare.

Stare:

• Aparține unei componente specifice și este gestionată de aceasta.
• Este modificabilă (mutable) în interiorul componentei.
• Reprezintă date care se pot schimba în timp și pot influența randarea componentei.
• Modificarea stării determină re-randarea componentei și a descendenților săi.

Diferențele principale pot fi prezentate sub formă de tabel:

Caracteristică	Props	Stare
Sursa	Componente părinte	Aceeași componentă
Modificabilitate	Imuabile	Modificabilă
Gestionare	Transmise din exterior	Gestionată în interiorul componentei
Scop	Afișarea datelor externe, configurare	Gestionarea stării interne
Modificarea provoacă	Re-randare la schimbarea în părinte	Re-randare la schimbarea în componenta curentă

Exemplu de utilizare a props:

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

function ParentComponent() {
  const message = "Salut din părinte!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Transmiterea prop "text" */}
    </div>
  );
}

export default ParentComponent;

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

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

export default ChildComponent;

Exemplu de utilizare a stării:

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

function Counter() {
  const [count, setCount] = useState(0); // Inițializarea stării "count"

  const increment = () => {
    setCount(count + 1); // Modificarea stării
  };

  return (
    <div>
      <p>Contor: {count}</p>
      <button onClick={increment}>Crește</button>
    </div>
  );
}

export default Counter;