Wat zijn state en props in de context van React-ontwikkeling?

State — is de interne toestand van de component, een verzameling gegevens die tijdens de werking van de component kan veranderen. Het wijzigen van de state leidt tot het opnieuw renderen van de component.

Props — zijn externe parameters die van buitenaf aan de component worden doorgegeven, van de oudercomponent. Props zijn onveranderlijk binnen de component die ze ontvangt. Ze worden gebruikt voor configuratie en gegevensoverdracht van ouder naar kind.

Belangrijkste verschillen:

Kenmerk	State	Props
Bron	Intern aan de component	Van buitenaf doorgegeven
Veranderlijkheid	Kan veranderen	Kan niet binnen worden gewijzigd
Doel	Beheer van de interne weergave	Gegevens en configuratie doorgeven

Voorbeeld van het gebruik van state:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Teller: {count}</p>
      <button onClick={() => setCount(count + 1)}>Verhogen</button>
    </div>
  );
}

Voorbeeld van het gebruik van props:

import React from 'react';

function Greeting(props) {
  return <h1>Hallo, {props.name}!</h1>; // Gebruik van props
}

function App() {
  return <Greeting name="Wereld" />; // Props doorgeven
}