Observaties in Reactjs worden vaak gebruikt door state management libraries als Redux, MobX, etc. State management libraries worden gebruikt om observaties en reactie op state veranderingen makkelijker te beheren.
Reactjs zelf heeft het context API en hooks zoals useState en useEffect die gebruikt kunnen worden voor observaties.
Hier is een basis voorbeeld hoe je observaties kan gebruiken met de useState en useEffect hooks in een component:
```
import React, {useState, useEffect} from ‘react’;
function Example() { const [count, setCount] = useState(0);
// Gelijkaardig aan componentDidMount en componentDidUpdate: useEffect(() => { // Update de document titel met behulp van de browser API document.title = `Je hebt ${count} keer geklikt`; }); return (Je hebt {count} keer geklikt
In dit voorbeeld, wordt useEffect gebruikt om wat code uit te voeren na elke render wanneer de component gemount wordt en telkens de component geupdate wordt.
useState wordt gebruikt om een local state te creëren in de `Example` function component en `setCount` wordt gebruikt om de state te updaten. Wanneer `setCount` wordt uitgevoerd re-rendert React automatisch het component.
Ook kan je een observatie library zoals MobX gebruiken die werkt met observables. Dit zijn objecten welke je kan volgen, wanneer deze veranderen, zal MobX automatisch de componenten die gebruik maken van deze data updaten.
Let op: Observaties zijn een krachtige tool, maar kunnen ook complexiteit toevoegen aan je app. Ze zijn niet altijd nodig, afhankelijk van de grootte en complexiteit van je app. Soms kan je gewoonweg lokale state gebruiken.
