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

Question

Accepted Answer

Και τα δύο κρατούν δεδομένα που επηρεάζουν αυτό που render ένα component, αλλά διαφέρουν στο **ποιος κατέχει τα δεδομένα** και **αν μπορούν να αλλάξουν**. - **props** περνώνται *σε* ένα component από το parent component του. Είναι **read-only** — το component δεν πρέπει ποτέ να τα τροποποιήσει. - **state** κατέχεται και διαχειρίζεται *μέσα* στο component. Μπορεί να αλλάξει με την πάροδο του χρόνου, και η αλλαγή του ενεργοποιεί ένα **re-render**. ## Παράδειγμα ```jsx // `step` is a PROP — given by the parent, the child only reads it. // `count` is STATE — owned here, changes on click, causes a re-render. function Counter({ step }) { const [count, setCount] = useState(0); return ( ); } // Parent decides the step and passes it down: ``` Τα δεδομένα ρέουν **προς τα κάτω** (parent → child μέσω props) και οι αλλαγές ρέουν **προς τα πάνω** (το child ζητά από το parent να αλλάξει κάτι μέσω ενός callback prop όπως `onChange`). Αυτή η ροή ενός κατεύθυνσης είναι αυτή που κάνει τις εφαρμογές React προβλέψιμες. ## Πώς να αποφασίσεις ποιο να χρησιμοποιήσεις - Προέρχεται από πάνω και το component δεν θα πρέπει να το αλλάξει → **prop**. - Το component πρέπει να το αλλάξει με την πάροδο του χρόνου → **state**. - Η μετατροπή props (`props.x = 1`) είναι ένα σφάλμα — το React δεν θα κάνει re-render και έχεις σπάσει την κυριότητα του parent. Για να "αλλάξεις" ένα prop, καλέστε ένα callback που σας έδωσε το parent ώστε το parent να ενημερώσει το δικό του state και να περάσει μια νέα τιμή προς τα κάτω.