# Componentlevenscyclus (React / Next.js)

> Mounting, updating, unmounting, useEffect cleanup, dependencies array, lifecycle patterns

- 18 gespreksvragen
- Junior
- [Gespreksvragen: React / Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen.md)

## 1. Wat is mounting in een React-component?

**Antwoord**

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.

## 2. Wat is unmounting in een React-component?

**Antwoord**

Unmounting is de fase waarin een component uit de DOM wordt verwijderd en vernietigd. Deze fase treedt op wanneer de component niet langer nodig is, bijvoorbeeld bij een routewijziging of renderingsconditie. Dit is het kritieke moment om resources op te schonen: timers annuleren, WebSocket-verbindingen sluiten en event listeners verwijderen om memory leaks te voorkomen.

## 3. Wanneer wordt de functie die aan useEffect is doorgegeven standaard uitgevoerd?

**Antwoord**

Standaard wordt useEffect uitgevoerd na elke render van de component, inclusief de eerste render en alle volgende re-renders. Deze asynchrone uitvoering zorgt ervoor dat de gebruikersinterface niet wordt geblokkeerd. Om dit gedrag te beheersen, kan de dependencies array als tweede argument worden gebruikt om uitvoeringen te beperken tot wanneer bepaalde waarden veranderen.

## Nog 15 vragen beschikbaar

- Waarvoor dient de dependency array in useEffect?
- Wat betekent het doorgeven van een lege array [] als dependencies aan useEffect?

Meld je gratis aan: https://sharpskill.dev/nl/login

## Andere React / Next.js-sollicitatieonderwerpen

- [JavaScript-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/javascript-essentials.md): 25 vragen, Junior
- [React-basisbegrippen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-fundamentals.md): 20 vragen, Junior
- [React Hooks](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-hooks.md): 22 vragen, Junior
- [React Router](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-router.md): 20 vragen, Junior
- [Statusbeheer met Context](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/state-management-context.md): 18 vragen, Junior
- [Formulieren & Controlled Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/forms-controlled-components.md): 20 vragen, Mid-Level
- [Gegevens ophalen & API](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/fetching-data-api.md): 20 vragen, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-query-tanstack.md): 20 vragen, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/styling-css-in-js.md): 18 vragen, Mid-Level
- [Next.js Fundamentals](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-fundamentals.md): 25 vragen, Mid-Level
- [TypeScript met React](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/typescript-react.md): 20 vragen, Mid-Level
- [Next.js Data Fetching](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-data-fetching.md): 24 vragen, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-server-actions.md): 20 vragen, Mid-Level
- [Routing & Navigatie in Next.js](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-routing-navigation.md): 22 vragen, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-api-routes.md): 20 vragen, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-metadata-seo.md): 18 vragen, Mid-Level
- [Next.js Middleware & Auth](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-middleware-auth.md): 22 vragen, Mid-Level
- [React Testen](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-testing.md): 20 vragen, Mid-Level
- [Zustand State Management](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/zustand-state-management.md): 18 vragen, Mid-Level
- [React Performance-optimalisatie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-performance-optimization.md): 22 vragen, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-error-boundaries.md): 18 vragen, Senior
- [Advanced React Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/advanced-react-patterns.md): 20 vragen, Senior
- [Geavanceerde Next.js-functies](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-advanced-features.md): 24 vragen, Senior
- [Next.js Deployment & Productie](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-deployment-production.md): 20 vragen, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-architecture-patterns.md): 22 vragen, Senior
- [React Server Components](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-server-components.md): 26 vragen, Senior
- [Next.js Internationalisering](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/nextjs-internationalization.md): 20 vragen, Senior
- [React Beveiliging & Best Practices](https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/react-security-best-practices.md): 22 vragen, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/nl/technologies/react-next/sollicitatievragen/component-lifecycle