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.
updated: Feb 18, 2021 at 10:23AM | published: Dec 4, 2020

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. We eindigen dan met iets dat eruitziet als hieronder.

JS

import React from ‘react’;

class ClassComponent extends React.Component{

  //contsructor met intitial state
  constructor(props){
     super(props)
     this.state = {
       count: 0
     }
   }

   //increase counter
  setCounter = (reset) => {
     reset === ‘reset’ ? this.setState({count: 0}) : this.setState({count: this.state.count + 1})
  };

   //voer elke seconde de vorige functie uit
  componentDidMount(){
    this.ticker = setInterval(() => {
       this.setCounter();
    },1000)
   }

   //verwijder interval wanneer je het van de dom afhaalt
  componentWillUnmount(){
     clearInterval(this.ticker)
   }

   //render method die de JSX terugggeeft
  render(){
   return(
     <div>
       <h4>Dit is een Class Based component</h4>
       <p>The counter is: {this.state.count}</p>
      <button onClick={() => this.setCounter()}>Klik mij</button>
      <button onClick={() => this.setCounter(‘reset’)}>Reset</button>
    </div>
   )
   }
}

export default ClassComponent

 

Zoals je ziet, gebruiken we een aantal methods van react om ons Class based Component werkend te krijgen.

– we maken de class met contructor(props) en render() methodes. Alleen de render() method is echt nodig.
– zet de initiële state met this.state in de constructor. Dit mogen we ook neerzetten zonder de contructor methode.
– this.setState om state te updaten. Dit is de enige methode om state te updaten in class based componenten.
– gebruik lifecycle methods zoals componentDidMount() en componentDidUpdate() om states te veranderen.

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:

JS

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:

JS

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.

JS

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.

Het complete component komt er dan zo uit te zien:

JS

import React, { useState, useEffect } from ‘react’;

const FunctionComponent = () => {

    //initial state en functie om state te veranderen staat gelijk aan contructor en setState function
    const [counter, setCounter] = useState(0);

    //useEffect hook staat gelijk aan de componentDitMount() en componentWillUnmount()
    useEffect(() => {
        const ticker = setInterval(() => {
            setCounter(counter + 1)
        }, 1000);

        return () => clearInterval(ticker)
    });

    //return functie met de JSX bijna gelijk aan het class based component
    return(
        <div>
            <h4>Dit is een Function Based component </h4>
            <p>De counter is: {counter} </p>

            <button onClick=”{() => setCounter(counter + 1)}>Klik mij </button>
            <button onClick=”{() => setCounter(0)}>Reset </button>

      </div>
    )
};

export default FunctionComponent

Zoals we zien kunnen we beide manieren gebruiken om hetzelfde probleem op te lossen. 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


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!