Eenvoudig statebeheer met UseImmer in React

Het werken met State in React kan soms een uitdaging zijn, vooral als het gaat om het begrijpen van mutaties en het correct hanteren van referenties. Wanneer je de setter van useState gebruikt, moet je vaak nieuwe arrays of objecten maken om ervoor te zorgen dat React jouw wijzigingen herkent. Dit kan al snel onoverzichtelijk worden en veel code vereisen. Een alternatief is useImmer, dat je toestaat om de State op een veel intuïtievere manier te wijzigen. In deze handleiding zullen we stap voor stap door het proces gaan van hoe je useImmer in plaats van useState kunt gebruiken.

Belangrijkste inzichten

• useImmer is een vervanging voor useState, die het werken met muteerbare State in React vergemakkelijkt.
• Met useImmer kun je rechtstreeks wijzigingen aanbrengen in arrays en objecten, zonder nieuwe referenties handmatig te hoeven maken.
• Mutaties worden automatisch omgezet in nieuwe, onveranderlijke States, wat de behandeling aanzienlijk vereenvoudigt.

Stap-voor-stap handleiding

Installatie van useImmer

Allereerst moet je ervoor zorgen dat useImmer is geïnstalleerd. Dit kan via de Terminal opdracht:

npm install immer

Nadat de installatie is voltooid, moet je controleren of het pakket correct wordt weergegeven in je package.json-bestand. Je zou altijd useImmer moeten zien in de lijst met afhankelijkheden.

Gebruik van useImmer

Nu useImmer is geïnstalleerd, kun je het in je project gebruiken. Importeer het eenvoudigweg in het bestand waar je de State wilt beheren:

import { useImmer } from 'use-immer';

Aan de slag met gebruik van useImmer

In vergelijking met useState blijft de structuur van je code bijna hetzelfde. In plaats van useState gebruik je useImmer om je huidige State en een functie om de State te wijzigen te krijgen.

const [videos, setVideos] = useImmer(initialVideos);

In dit voorbeeld is initialVideos de startwaarde voor je State. Nu kun je setVideos gebruiken om wijzigingen aan je State aan te brengen.

Mutaties met useImmer

Met useImmer heb je de flexibiliteit om de State direct te muteren. Dat betekent dat je methoden zoals push of splice kunt gebruiken zonder dat je handmatig een nieuw array of object hoeft te maken. Hier is een voorbeeld van hoe je een nieuw video kunt toevoegen:

setVideos(draft => { draft.push(newVideo); // newVideo is het toe te voegen object
});

In dit geval zal draft een muteerbaar beeld van je State zijn. Alle wijzigingen die je hieraan aanbrengt, resulteren automatisch in een nieuwe, onveranderlijke State.

Wijzigingen aan bestaande items

Als je een bestaand item wilt wijzigen, is dat ook makkelijker met behulp van useImmer. Je hoeft alleen het item in de array te vinden en de gewenste wijzigingen aan te brengen:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Wijzig de titel videoToEdit.source = newSource; // Wijzig de bron }
});

Hier kun je toegang krijgen tot een specifieke video in de draft-array en de gewenste wijzigingen aanbrengen. Deze wijzingen worden automatisch behandeld als nieuwe referenties.

Verwijderen van een item

Het verwijderen van een item wordt ook gemakkelijker. Je kunt hiervoor filter of splice gebruiken om het gewenste element te verwijderen. Hier is een voorbeeld met splice:

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // Video verwijderen }
});

Dit verwijdert de video met de overeenkomstige ID uit de draft-array.

Integratie in bestaande projecten

Het vervangen van useState door useImmer kan je code aanzienlijk vereenvoudigen en leesbaarder maken. Je hoeft er alleen maar voor te zorgen dat je overal waar je useState hebt gebruikt, useImmer kunt introduceren.

Het is belangrijk op te merken dat het gebruik van useImmer de prestaties niet negatief beïnvloedt. Je moet echter altijd zorgen dat je code duidelijk en goed gestructureerd blijft.

Samenvatting

In deze handleiding heb je geleerd hoe je useImmer kunt gebruiken in je React-project om het beheer van de staat te vereenvoudigen. Je hebt nu directe toegang tot mutaties, wat de ontwikkeling efficiënter en aangenamer maakt. Door de automatische omzetting naar onveranderlijke staten behoudt React de controle en zorgt ervoor dat alle wijzigingen correct worden gedetecteerd.