Ποια είναι η διαφορά μεταξύ props και κατάστασης στο React;

Τα props (ιδιότητες) και η κατάσταση (state) είναι δύο βασικοί μηχανισμοί διαχείρισης δεδομένων στα components του React.

Props:

• Μεταβιβάζονται από τον γονικό component στον παιδικό.
• Είναι αμετάβλητα (immutable) μέσα στον παιδικό component.
• Επιτρέπουν την αλληλεπίδραση μεταξύ components.
• Ορίζουν την εμφάνιση ή τη συμπεριφορά του component βάσει των εισερχόμενων δεδομένων.

Κατάσταση:

• Ανήκει σε ένα συγκεκριμένο component και διαχειρίζεται από αυτό.
• Είναι μεταβλητή (mutable) μέσα στο component.
• Αντιπροσωπεύει δεδομένα που μπορούν να αλλάξουν με το χρόνο και επηρεάζουν το rendering του component.
• Η αλλαγή της κατάστασης προκαλεί την επανα-απεικόνιση (re-render) του component και των παιδιών του.

Οι βασικές διαφορές μπορούν να παρουσιαστούν σε μορφή πίνακα:

Χαρακτηριστικό	Props	Κατάσταση
Πηγή	Γονικός component	Ο ίδιος ο component
Μεταβλητότητα	Αμετάβλητα (immutable)	Μεταβλητά (mutable)
Διαχείριση	Μεταβιβάζονται από έξω	Διαχειρίζεται μέσα στο component
Σκοπός	Εμφάνιση εξωτερικών δεδομένων, ρύθμιση	Διαχείριση εσωτερικής κατάστασης
Αλλαγή προκαλεί	Επανα-απεικόνιση κατά την αλλαγή στον γονέα	Επανα-απεικόνιση κατά την αλλαγή στο τρέχον component

Παραδείγματα χρήσης props:

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

function ParentComponent() {
  const message = "Γειά από τον γονέα!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Μεταβίβαση prop "text" */}
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Χρήση του prop "text" */}
  );
}

export default ChildComponent;

Παραδείγματα χρήσης κατάστασης:

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

function Counter() {
  const [count, setCount] = useState(0); // Αρχικοποίηση της κατάστασης "count"

  const increment = () => {
    setCount(count + 1); // Αλλαγή της κατάστασης
  };

  return (
    <div>
      <p>Μετρητής: {count}</p>
      <button onClick={increment}>Αύξηση</button>
    </div>
  );
}

export default Counter;