Wat is het verschil tussen props en state in React?

Props (eigenschappen) en staat (state) zijn twee belangrijke mechanismen voor het beheren van gegevens in React-componenten.

Props:

• Worden doorgegeven van de oudercomponent aan de kindcomponent.
• Zijn onveranderlijk (immutable) binnen de kindcomponent.
• Stellen interactie tussen componenten mogelijk.
• Bepalen de uitstraling of het gedrag van de component op basis van invoergegevens.

Staat:

• Behoort tot een specifieke component en wordt door deze beheerd.
• Is wijzigbaar (mutable) binnen de component.
• Vertegenwoordigt gegevens die in de loop van de tijd kunnen veranderen en de rendering van de component beïnvloeden.
• Het wijzigen van de staat zorgt voor een her-rendering van de component en zijn kinderen.

De belangrijkste verschillen kunnen worden gepresenteerd in tabelvorm:

Kenmerk	Props	Staat
Bron	Oudere component	De eigen component
Wijzigbaarheid	Onveranderlijk (immutable)	Wijzigbaar (mutable)
Beheer	Wordt van buitenaf doorgegeven	Wordt binnen de component beheerd
Doel	Externe gegevens tonen, configuratie	Beheer van de interne staat
Verandert leidt tot	Her-rendering bij wijziging in ouder	Her-rendering bij wijziging in huidige component

Voorbeeld van gebruik van props:

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

function ParentComponent() {
  const message = "Hallo van de ouder!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Overdracht van prop "text" */}
    </div>
  );
}

export default ParentComponent;

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

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

export default ChildComponent;

Voorbeeld van gebruik van staat:

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

function Counter() {
  const [count, setCount] = useState(0); // Initialisatie van de staat "count"

  const increment = () => {
    setCount(count + 1); // Verandering van de staat
  };

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

export default Counter;