Functional Components vs. Class Based Components

Functional VS Class Based Components, deze week ga ik laten zien hoe je met deze twee verschillende manieren een component kan maken in React en wat de grote verschillen er tussen zijn. En waarom functional components in populariteit aan het stijgen zijn.

Deze week duiken we weer in de wondere wereld van React. In eerdere artikelen hebben we het gehad over verschillende aspecten van React en toen zijn kort Functional en Class based Components naar voren gekomen. Deze week wil ik wat dieper in gaan op de verschillen en overeenkomsten tussen deze 2 componenten aangezien de Functional Components populariteit aan het winnen zijn.

Aan de hand van een paar voorbeelden ga ik de verschillen tussen de twee laten zien, zodat je misschien zelf kan zien waarom functional components zo populair aan het worden zijn.

Class-based Components

Een van de redenen waarom Functional Components terrein winnen is de komst van hooks. Voor de komst van hooks moesten we, als we een dynamisch element wilde maken, gebruik maken van Class based Components. Dit kwam omdat functional components geen state of lifecycle methods hadden.

Als we een class based component maken dan maken we een ES6 class waarbij we React.Component moeten extenden. Deze class moet dan een render method erin hebben waarin we de JSX markup teruggeven.

Als voorbeeld maken we een klein, simpel component waarbij de counter automatisch verhoogd wordt. Ook kunnen we hem verhogen door op een knop te klikken. Wanneer we wat toevoegen aan het DOM noemen we dit Mounting in React. Het tegenovergestelde, ‘iets verwijderen uit het DOM’, noemen we unmounting.

Het mounten van een component roept de volgende methodes aan in React.

– constructor() – render() – componentDidMount()

De enige method die verplicht is in een class component is de render() method. Wil je meer weten kijk dan hieronder.

Om dit werkend te krijgen hebben we een beginwaarde nodig die veranderd. Dus moeten we onze waarde toekennen aan het state object. Verder hebben we een componentDidMount() method nodig om onze interval op te zetten en een functie om de state van onze counter te verhogen.

Functional Components

Zoals ik in de intro al had verteld, zijn sinds de komst van Hooks in React 16.8, functionele componenten flink in populariteit aan het winnen. Dit komt omdat je met hooks, state kan gebruiken in functionele componenten (de useState hook). Ook is er een hook die bijna hetzelfde doet als de lifecycle methods (de useEffect hook). We kunnen hooks heel makkelijk gebruiken door bij het import statement naast React de naam van de hook te importeren.

useState hook

Zoals we hierboven aangeven kunnen we heel makkelijk de useState hook importeren. Dat ziet er dan zo uit:

import react, { useState } from ‘react’;

Als we met hooks de state zetten dan maken we ook gelijk een functie aan om hem te updaten. Ook zetten we gelijk de default value van die state. Dit ziet er dan zo uit:

const [ counter, setCounter ] = useState(0)

counter is onze state, setCounter is onze functie om hem te updaten en de 0 in useState is de initiële waarde van de state counter.

useEffect hook

De useEffect hook wordt aangeroepen als je component voor het eerst gerendered wordt en bij elke rerender. Dit kan je nog verder aanpassen door bepaalde parameters mee te geven in een array als 2e argument. Ook kan je hierin een cleanup functie meegeven voor als je component unmount.

useEffect(() => { const ticker = setInterval(() => { setCounter(counter + 1) }, 1000); return () => clearInterval(ticker) });

We gebruiken de setCounter van de useState hook om de state te updaten. En we returnen de cleanup functie om de interval functie weg te halen als we het component unmounten. Dit staat gelijk aan de componentWillUnmount() lifecycle method.

Een van de belangrijkste verschillen is dat functionele componenten beduidend minder code nodig hebben. Zelf blijf ik ook fan van de class based components waar alles duidelijk gestructureerd staat. Maar de compacte manier van programmeren in functionele componenten spreekt me ook heel erg aan en na wat wennen leest dat ook prima weg. Het idee van minder code spreekt zeker de luiaard in mij aan. Na wat experimenteren ben ik er ook nog steeds niet achter welke manier ik het fijnste vind. Misschien eindigen we wel met een combinatie van de 2 functionele componenten waar het kan, en class based componenten voor wat meer overzichtelijkheid.

We hebben kort uitgelegd aan de hand van een voorbeeld de verschillen tussen een class based component en een function based component. Maar het grootste verschil, waar, vaak overheen gekeken wordt, is dat function componenten de gerenderde waardes vastleggen. Hier ben ik niet op in gegaan omdat dit fantastisch wordt uitgelegd in een artikel geschreven door Dan Abramov. Hieronder staat de link naar dat artikel