Question 1

Wat is het belangrijkste verschil tussen let en var?

Accepted Answer

let declareert een variabele met block scope, wat betekent dat deze alleen bestaat binnen het blok waar deze is gedefinieerd (tussen accolades). var heeft function scope, wat onverwachte bugs kan veroorzaken doordat de variabele in de hele functie toegankelijk is. Standaard let gebruiken voorkomt hoisting-problemen en variabelenlekken in lussen of condities.

Question 2

Wat is JSX in React?

Accepted Answer

JSX is een JavaScript-syntaxextensie waarmee je markup kunt schrijven die lijkt op HTML, direct in JavaScript-code. Het wordt tijdens de compilatie door Babel omgezet in React.createElement-functieaanroepen. Het gebruik van JSX maakt code leesbaarder en maakt foutdetectie mogelijk tijdens het compileren door middel van typing, terwijl het de kracht van JavaScript combineert met een vertrouwde syntaxis.

Question 3

Wat is de useState hook in React?

Accepted Answer

useState is een React hook die lokale state beheert in een functioneel component. In tegenstelling tot gewone JavaScript-variabelen die bij elke render worden gereset, bewaart useState de state-waarde tussen opeenvolgende renders. Deze hook retourneert een array met de huidige state-waarde en een functie om deze te updaten, waardoor automatisch een nieuwe render van het component wordt getriggerd wanneer de state verandert.

Question 4

Wat is mounting in een React-component?

Accepted Answer

Mounting is de fase waarin een component wordt aangemaakt en voor het eerst in de DOM wordt ingevoegd. Tijdens deze fase initialiseert React de state, voert de constructiecode uit en doet de eerste render. Dit is het ideale moment voor het starten van API-aanroepen of het initialiseren van subscriptions via useEffect.

Question 5

Wat is een CSS Module in React?

Accepted Answer

CSS Modules genereren automatisch unieke klassenamen door een hash aan de klassenaam toe te voegen, wat stijlconflicten tussen componenten voorkomt. Elk CSS Module-bestand heeft zijn eigen lokale scope, in tegenstelling tot traditionele globale stylesheets. Deze aanpak maakt het mogelijk modulaire stijlen te schrijven zonder het risico van onbedoelde overschrijvingen in andere componenten.

Question 6

Wat is de App Router in Next.js?

Accepted Answer

De App Router is het nieuwe routingsysteem in Next.js 13+ gebaseerd op de app/-directory. Het vervangt de Pages Router en introduceert standaard Server Components, gedeelde layouts en een flexibeler routingmodel met bestandsconventies zoals page.tsx, layout.tsx en loading.tsx.

Question 7

Wat is de juiste syntaxis voor het typen van React-component props?

Accepted Answer

De Props-interface gevolgd door het typen van de functie met Props als parameter is de aanbevolen standaardsyntaxis. Deze aanpak biedt uitstekende type-inferentie en maakt hergebruik van het Props-type elders in de code eenvoudig. Het is explicieter dan React.FC en biedt betere controle over het typen van children.

Question 8

Wat is de primaire rol van React.memo?

Accepted Answer

React.memo is een Higher-Order Component dat de render-output van een component memoiseerd. Het voert een oppervlakkige vergelijking van props uit en slaat re-rendering over als de props niet zijn gewijzigd. Bijzonder nuttig voor het optimaliseren van dure child components die vaak dezelfde props ontvangen.

Question 9

Wat is een Error Boundary in React?

Accepted Answer

Een Error Boundary is een React class component die JavaScript-fouten opvangt in de child component tree, een fallback-UI toont en voorkomt dat de hele applicatie crasht. Het gebruikt de methoden componentDidCatch() en getDerivedStateFromError() om renderfouten op te vangen en af te handelen.

Question 10

Wat is het Compound Components-patroon?

Accepted Answer

Het Compound Components-patroon maakt het mogelijk om componenten te maken die impliciete status delen via React Context, zonder props expliciet door te geven. Dit patroon wordt gebruikt in bibliotheken zoals Radix UI en Headless UI om een flexibele en combineerbare API te bieden. Kindcomponenten kunnen automatisch toegang krijgen tot de gedeelde status, waardoor aanpassing van de structuur mogelijk is zonder de gemeenschappelijke logica te verliezen.

React / Next.js gespreksvragen

Klaar voor je React / Next.js gesprek?

Ontdek alle React / Next.js-onderwerpen

JavaScript-basisbegrippen

React-basisbegrippen

React Hooks

Componentlevenscyclus

React Router

Statusbeheer met Context

Formulieren & Controlled Components

Gegevens ophalen & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Fundamentals

TypeScript met React

Next.js Data Fetching

Next.js Server Actions

Routing & Navigatie in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testen

Zustand State Management

React Performance-optimalisatie

Error Boundaries & Error Handling

Advanced React Patterns

Geavanceerde Next.js-functies

Next.js Deployment & Productie

Architecture & Design Patterns

React Server Components

Next.js Internationalisering

React Beveiliging & Best Practices

Beheers React / Next.js voor je volgende gesprek