{"id":59808,"date":"2024-07-05T09:32:30","date_gmt":"2024-07-05T07:32:30","guid":{"rendered":"https:\/\/kinqsta.com\/nl\/?p=59808&#038;preview=true&#038;preview_id=59808"},"modified":"2024-07-12T12:08:19","modified_gmt":"2024-07-12T10:08:19","slug":"react-19-wordpress","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/","title":{"rendered":"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers"},"content":{"rendered":"<p>Als <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-ontwikkelaar-huren\/\">WordPress ontwikkelaars<\/a> integreren we vaak custom <a href=\"https:\/\/kinqsta.com\/blog\/what-is-react-js\/\">React<\/a> componenten in onze <a href=\"https:\/\/kinqsta.com\/nl\/blog\/snelste-wordpress-thema\/\">thema&#8217;s<\/a> en <a href=\"https:\/\/kinqsta.com\/nl\/onderwerpen\/wordpress-plugins\/\">plugins<\/a> om dynamische en responsieve gebruikersinterfaces te maken.<\/p>\n<p>Met de <a href=\"https:\/\/react.dev\/blog\/2024\/04\/25\/react-19\" target=\"_blank\" rel=\"noopener noreferrer\">komende release van React 19<\/a> is het cruciaal om je voor te bereiden op veranderingen en afschrijvingen (deprecations) die van invloed kunnen zijn op onze bestaande codebases. <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>, die op 16 juli wordt uitgebracht, bevat React 18.3. Deze versie is bijna identiek aan 18.2, maar voegt waarschuwingen toe voor afgeschreven functies om je voor te bereiden op React 19.<\/p>\n<p>Het aanpakken van deze afschrijvingen is essentieel om compatibiliteit met React 19 te garanderen, en ze negeren kan leiden tot bugs of problemen in je <a href=\"https:\/\/kinqsta.com\/nl\/blog\/gutenberg-blokken\/\">custom blokken<\/a>, plugins of <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wordpress-react-thema\/\">thema&#8217;s<\/a> wanneer React 19 wordt uitgebracht en opgenomen in WordPress.<\/p>\n<p>Dit artikel beschrijft elke deprecatie, geeft codevoorbeelden en begeleidt je bij het vervangen van afgeschreven functies om de functionaliteit soepel te houden.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om te helpen met de upgrade heeft het React team samengewerkt met het team van <a href=\"http:\/\/codemod.com\" target=\"_blank\" rel=\"noopener noreferrer\">Codemod<\/a> om codemods te publiceren die je code automatisch bijwerken naar veel van de nieuwe API&#8217;s en patronen in React 19.<\/p>\n<p>Alle codemods zijn beschikbaar in de <a href=\"https:\/\/github.com\/reactjs\/react-codemod\" target=\"_blank\" rel=\"noopener noreferrer\">react-codemod repo<\/a> op GitHub. We zullen ook het codemod-commando van elke afschrijving bijvoegen (indien beschikbaar) om je te helpen je code automatisch bij te werken.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Verwijderde afschrijvingen in React<\/h2>\n<p>Verschillende afgeschreven API&#8217;s en functies zijn verwijderd om de React bibliotheek te stroomlijnen en best practices aan te moedigen. Deze sectie behandelt de belangrijkste wijzigingen en hoe je je code dienovereenkomstig kunt bijwerken.<\/p>\n<h3>1. Verwijdering van defaultProps voor functiecomponenten<\/h3>\n<p>React 19 verwijdert <code>defaultProps<\/code> voor functiecomponenten ten gunste van <a href=\"https:\/\/kinqsta.com\/nl\/blog\/javascript-react\/\">ES6<\/a> standaardparameters. Volgens het <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/07\/preparation-for-react-19-upgrade\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress team<\/a> wordt deze afschrijving het meest gebruikt in plugins en thema&#8217;s.<\/p>\n<p>Als WordPress ontwikkelaar zou je <code>defaultProps<\/code> kunnen gebruiken om standaardwaarden te bieden voor props in je functiecomponenten, om ervoor te zorgen dat componenten zich correct gedragen, zelfs als bepaalde props niet worden doorgegeven.<\/p>\n<p>Hier zie je hoe je huidige code eruit zou kunnen zien met <code>defaultProps<\/code>:<\/p>\n<pre><code class=\"language-jsx\">function CustomButton({ label, color }) {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n}\n\nCustomButton.defaultProps = {\n    label: 'Click me',\n    color: 'blue',\n};<\/code><\/pre>\n<p>In dit voorbeeld heeft een <code>CustomButton<\/code> component standaardwaarden voor <code>label<\/code> en <code>color<\/code> die worden verstrekt door <code>defaultProps<\/code>. In React 19 zal dit een waarschuwingsfout opleveren en je aansporen om in plaats daarvan ES6 standaardparameters te gebruiken.<\/p>\n<p>Hier is de bijgewerkte code met ES6 standaardparameters:<\/p>\n<pre><code class=\"language-jsx\">function CustomButton({ label = 'Click me', color = 'blue' }) {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n}<\/code><\/pre>\n<p>Door ES6-standaardparameters te gebruiken, staan de standaardwaarden nu direct in de functiehandtekening, waardoor de code gemakkelijker te lezen en te onderhouden is.<\/p>\n<h3>2. Verwijdering van propTypes voor functiecomponenten<\/h3>\n<p><code>propTypes<\/code> was <a href=\"https:\/\/legacy.reactjs.org\/blog\/2017\/04\/07\/react-v15.5.0.html#new-deprecation-warnings\" target=\"_blank\" rel=\"noopener noreferrer\">afgeschreven in React 15.5.0<\/a> en zal volledig worden verwijderd in het React pakket van v19. Als je <code>propTypes<\/code> gebruikt, is het aan te raden om te migreren naar <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wat-is-typescript\/\">TypeScript<\/a> of een andere oplossing voor typecontrol.<\/p>\n<p>Je hebt misschien <code>propTypes<\/code> gebruikt om de props te valideren die zijn doorgegeven aan je functiecomponenten om ervoor te zorgen dat ze de juiste types en waarden ontvangen. Bijvoorbeeld:<\/p>\n<pre><code class=\"language-jsx\">import PropTypes from 'prop-types';\n\nfunction CustomButton({ label, color }) {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n}\n\nCustomButton.defaultProps = {\n    label: 'Click me',\n    color: 'blue',\n};\n\nCustomButton.propTypes = {\n    label: PropTypes.string,\n    color: PropTypes.string,\n};<\/code><\/pre>\n<p>Vandaag kun je TypeScript gaan gebruiken voor deze typecontrols:<\/p>\n<pre><code class=\"language-jsx\">type CustomButtonProps = {\n    label?: string;\n    color?: string;\n};\n\nconst CustomButton = ({ label = 'Click me', color = 'blue' }: CustomButtonProps) =&gt; {\n    return &lt;button style={{ backgroundColor: color }}&gt;{ label }&lt;\/button&gt;;\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om je te helpen over te stappen van het gebruik van <code>propTypes<\/code> naar TypeScript, kun je het volgende codemod commando gebruiken:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/prop-types-typescript<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>3. Verwijdering van verouderde context (contextTypes en getChildContext)<\/h3>\n<p>Gezien de langdurige aard van veel plugins en codebases in WordPress, gebruik je misschien nog steeds de oude <code>contextTypes<\/code> en <code>getChildContext<\/code> API&#8217;s in je klasse componenten. Deze API&#8217;s werden gebruikt om gegevens van een ouder component door te geven aan zijn descendants zonder expliciet props door te geven op elk niveau.<\/p>\n<p>Het is echter belangrijk om op te merken dat Legacy Context <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html\" target=\"_blank\" rel=\"noopener noreferrer\">in React 16.6.0 is afgeschreven<\/a> en in React v19 zal worden verwijderd. Deze verandering is bedoeld om React iets kleiner en sneller te maken, omdat de Legacy Context API subtiele bugs had die vaak gemakkelijk over het hoofd te zien waren.<\/p>\n<p>De legacy methode is vervangen door de nieuwe <code>contextType<\/code> API.<\/p>\n<p>Hier is een voorbeeld van hoe je de verouderde Context API kunt gebruiken in een WordPress plugin om globale instellingen, zoals de sitetitel, door te geven van een ouder component naar een child component zonder prop drilling:<\/p>\n<pre><code class=\"language-jsx\">import PropTypes from 'prop-types';\n\nclass SettingsProvider extends React.Component {\n  static childContextTypes = {\n    siteTitle: PropTypes.string.isRequired,\n  };\n\n  getChildContext() {\n    return { siteTitle: 'My WordPress Site' };\n  }\n\n  render() {\n    return &lt;SettingsConsumer \/&gt;;\n  }\n}\n\nclass SettingsConsumer extends React.Component {\n  static contextTypes = {\n    siteTitle: PropTypes.string.isRequired,\n  };\n\n  render() {\n    return &lt;div&gt;Site Title: {this.context.siteTitle}&lt;\/div&gt;;\n  }\n}<\/code><\/pre>\n<p>De moderne benadering gebruikt daarentegen de methode <code>createContext<\/code>. Dit is de methode die je moet gebruiken als je je voorbereidt op React 19:<\/p>\n<pre><code class=\"language-jsx\">import React from 'react';\n\nconst SettingsContext = React.createContext();\n\nclass SettingsProvider extends React.Component {\n  render() {\n    return (\n      &lt;SettingsContext value={{ siteTitle: 'My WordPress Site' }}&gt;\n        &lt;SettingsConsumer \/&gt;\n      &lt;\/SettingsContext&gt;\n    );\n  }\n}\n\nclass SettingsConsumer extends React.Component {\n  static contextType = SettingsContext;\n\n  render() {\n    const { siteTitle } = this.context;\n    return &lt;div&gt;Site Title: { siteTitle }&lt;\/div&gt;;\n  }\n}<\/code><\/pre>\n<h3>4. Verwijdering van string refs<\/h3>\n<p>Het gebruik van string refs was ooit een veelgebruikte manier om toegang te krijgen tot een DOM element in React componenten. Ze worden echter als <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/03\/27\/update-on-async-rendering.html\" target=\"_blank\" rel=\"noopener noreferrer\">legacy beschouwd sinds React 16.3.0<\/a> en zullen worden verwijderd in v19.<\/p>\n<p>Hoewel string refs eenvoudig waren, hadden ze <a href=\"https:\/\/github.com\/facebook\/react\/issues\/1373\" target=\"_blank\" rel=\"noopener noreferrer\">verschillende problemen<\/a>, zoals potenti\u00eble naamgevingsconflicten en een gebrek aan flexibiliteit.<\/p>\n<p>Neem een voorbeeld van het gebruik van string refs in een WordPress custom blok. Stel je voor dat je een aangepast Gutenberg blok hebt dat een invoerveld bevat, en je wilt dat het invoerveld automatisch wordt gefocust wanneer het blok wordt toegevoegd aan de editor. Dit is hoe je dit gedaan zou kunnen hebben met behulp van string refs:<\/p>\n<pre><code class=\"language-jsx\">class CustomBlock extends React.Component {\n  componentDidMount() {\n    this.refs.input.focus();\n  }\n\n  render() {\n    return &lt;input ref=\"input\" placeholder=\"Enter text...\" \/&gt;;\n  }\n}<\/code><\/pre>\n<p>Om je voor te bereiden op React 19 moet je string refs vervangen door callback <code>refs<\/code> of de <code>React.createRef<\/code> API. Hier is hetzelfde voorbeeld met een callback <code>ref<\/code>:<\/p>\n<pre><code class=\"language-jsx\">class CustomBlock extends React.Component {\n  componentDidMount() {\n    this.input.focus();\n  }\n\n  render() {\n    return &lt;input ref={(input) =&gt; (this.input = input)} placeholder=\"Enter text...\" \/&gt;;\n  }\n}<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om je te helpen over te schakelen van het gebruik van string refs naar callback <code>ref<\/code>, kun je het volgende codemod commando gebruiken:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-string-ref<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>5. Verwijdering van module pattern factories<\/h3>\n<p>Een andere <a href=\"https:\/\/legacy.reactjs.org\/blog\/2019\/08\/08\/react-v16.9.0.html#deprecating-module-pattern-factories\" target=\"_blank\" rel=\"noopener noreferrer\">afgeschreven functie<\/a> die zal worden verwijderd in React 19 zijn module pattern factories. Deze pattern werd zelden gebruikt en zorgde ervoor dat React iets groter en langzamer werd dan nodig.<\/p>\n<p>Module pattern factories stelden ontwikkelaars in staat om componenten minder conventioneel te maken. Hier is een voorbeeld van hoe je het misschien gebruikt:<\/p>\n<pre><code class=\"language-jsx\">function SettingsPanelFactory() {\n  return {\n    render() {\n      return (\n        &lt;div className=\"settings-panel\"&gt;\n          &lt;h2&gt;Settings&lt;\/h2&gt;\n          {\/* other settings UI components *\/}\n        &lt;\/div&gt;\n      );\n    }\n  };\n}<\/code><\/pre>\n<p>In deze pattern retourneert <code>SettingsPanelFactory<\/code> een object met behulp van een <code>render<\/code> methode in plaats van direct JSX terug te geven.<\/p>\n<p>Om te voldoen aan React 19 moet je module pattern factories migreren naar reguliere functies die JSX direct retourneren. Hier is het bijgewerkte voorbeeld:<\/p>\n<pre><code class=\"language-jsx\">function SettingsPanel() {\n  return (\n    &lt;div className=\"settings-panel\"&gt;\n      &lt;h2&gt;Settings&lt;\/h2&gt;\n      {\/* other settings UI components *\/}\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<h3>6. Verwijdering van createFactory API<\/h3>\n<p>In React 19 wordt <code>React.createFactory<\/code> verwijderd. Deze methode werd vaker gebruikt voordat <a href=\"https:\/\/kinqsta.com\/nl\/blog\/wat-is-jsx\/\">JSX<\/a> breed werd ondersteund. Het stelde ontwikkelaars in staat om React elementen te maken zonder JSX syntax te gebruiken.<\/p>\n<p>Nu JSX steeds meer wordt gebruikt, is <code>createFactory<\/code> echter verouderd en kan het worden vervangen door eenvoudigere, beter leesbare JSX code.<\/p>\n<p>Hier is een voorbeeld van het gebruik van <code>createFactory<\/code> om een <code>button<\/code> element te maken. Dit zou onderdeel kunnen zijn van een aangepaste WordPress plugin die dynamisch <code>button<\/code> elementen genereert op basis van gebruikersinvoer:<\/p>\n<pre><code class=\"language-jsx\">import { createFactory } from 'react';\n\nconst button = createFactory('button');\n\nfunction CustomButton() {\n  return button({ className: 'custom-button', type: 'button' }, 'Click Me');\n}<\/code><\/pre>\n<p>Om deze code bij te werken voor React 19, vervang je <code>createFactory<\/code> door JSX. Deze wijziging maakt de code moderner, leesbaarder en beter onderhoudbaar:<\/p>\n<pre><code class=\"language-jsx\">function CustomButton() {\n  return &lt;button className=\"custom-button\" type=\"button\"&gt;Click Me&lt;\/button&gt;;\n}<\/code><\/pre>\n<h3>7. Verwijdering van react-test-renderer\/shallow<\/h3>\n<p>React 19 verwijdert <code>react-test-renderer\/shallow<\/code> om de testutility te stroomlijnen en best practices aan te moedigen. In React 18 werd <code>react-test-renderer\/shallow<\/code> bijgewerkt om opnieuw te exporteren <code><a href=\"https:\/\/github.com\/enzymejs\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>.<\/p>\n<p>Voorheen gebruikte je <code>react-test-renderer\/shallow<\/code> om ondiepe rendertests te maken voor je React-componenten:<\/p>\n<pre><code class=\"language-js\">import ShallowRenderer from 'react-test-renderer\/shallow';\n\ntest('MyComponent shallow render', () =&gt; {\n  const renderer = new ShallowRenderer();\n  renderer.render(&lt;MyComponent \/&gt;);\n  const result = renderer.getRenderOutput();\n  expect(result.type).toBe('div');\n});<\/code><\/pre>\n<p>Om aan React 19 te voldoen, moet je het volgende installeren <code><a href=\"https:\/\/www.npmjs.com\/package\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>:<\/p>\n<pre><code class=\"language-bash\">npm install react-shallow-renderer --save-dev<\/code><\/pre>\n<p>En je import bijwerken:<\/p>\n<pre><code class=\"language-js\">import ShallowRenderer from 'react-shallow-renderer';\n\ntest('MyComponent shallow render', () =&gt; {\n  const renderer = new ShallowRenderer();\n  renderer.render(&lt;MyComponent \/&gt;);\n  const result = renderer.getRenderOutput();\n  expect(result.type).toBe('div');\n});<\/code><\/pre>\n<p>Het React team raadt aan om te migreren naar de <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a>, die robuustere testpraktijken biedt door zich te richten op de interactie tussen gebruikers en je componenten.<\/p>\n<p>Om dit te doen installeer je de <code><a href=\"https:\/\/www.npmjs.com\/package\/@testing-library\/react\" target=\"_blank\" rel=\"noopener noreferrer\">@testing-library\/react<\/a><\/code> bibliotheek als een dev-afhankelijkheid:<\/p>\n<pre><code class=\"language-bash\">npm install @testing-library\/react --save-dev<\/code><\/pre>\n<p>Vervolgens kun je dezelfde component testen met deze moderne aanpak:<\/p>\n<pre><code class=\"language-js\">import { render, screen } from '@testing-library\/react';\nimport MyBlock from '.\/MyBlock';\n\ntest('MyBlock renders correctly', () =&gt; {\n  render(&lt;MyBlock \/&gt;);\n  const element = screen.getByText('MyBlock content');\n  expect(element).toBeInTheDocument();\n});<\/code><\/pre>\n<h2>Verwijderde afschrijvingen in React DOM<\/h2>\n<p>React DOM is ook veranderd in React 19, waarbij bepaalde afgeschreven methoden zijn verwijderd. Deze sectie beschrijft deze wijzigingen en begeleidt je bij het bijwerken van je DOM gerelateerde code.<\/p>\n<h3>1. Verwijdering van react-dom\/test-utils API<\/h3>\n<p>De <code><a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">react-dom\/test-utils<\/a><\/code> API wordt verwijderd in React 19. Dit heeft gevolgen voor de manier waarop we tests schrijven voor onze React componenten. Specifiek is de utility<code>act<\/code> verplaatst van <code>react-dom\/test-utils<\/code> naar het pakket <code>react<\/code>.<\/p>\n<p>Daarnaast zijn de meeste andere utility van <code>react-dom\/test-utils<\/code> <a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">verwijderd<\/a>. Hier lees je hoe je je tests kunt aanpassen aan deze veranderingen.<\/p>\n<p>De utility\u00a0<code> act<\/code> is essentieel om ervoor te zorgen dat alle updates met betrekking tot je tests zijn verwerkt en toegepast op de DOM. In React 19 moet je <code>act<\/code> rechtstreeks importeren vanuit <code>react<\/code> in plaats van <code>react-dom\/test-utils<\/code>.<\/p>\n<pre><code class=\"language-jsx\">\/\/ Before\nimport { act } from 'react-dom\/test-utils';\n\n\/\/ Now\nimport { act } from 'react';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om je te helpen over te schakelen van het gebruik van <code>react-dom\/test-utils<\/code> naar de nieuwe import, kun je het volgende codemod commando gebruiken:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-act-import<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<p>Het React team raadt ook aan om je tests te migreren naar de React Testing Library voor een moderne en goed ondersteunde testervaring. Hier zijn enkele veelvoorkomende use cases en hoe je ze kunt bijwerken.<\/p>\n<p>De utility <code>renderIntoDocument<\/code> wordt verwijderd. Je kunt het vervangen door <code>render<\/code> van <code>@testing-library\/react<\/code>.<\/p>\n<pre><code class=\"language-js\">\/\/ Before\nimport { renderIntoDocument } from 'react-dom\/test-utils';\n\nrenderIntoDocument(&lt;Component \/&gt;);\n\n\/\/ Now\nimport { render } from '@testing-library\/react';\n\nrender(&lt;Component \/&gt;);<\/code><\/pre>\n<p>Op dezelfde manier wordt het utility <code>Simulate<\/code> voor het simuleren van events verwijderd. In plaats daarvan moet je <code>fireEvent<\/code> van <code>@testing-library\/react<\/code> gebruiken, dat een echt event op het element afstuurt.<\/p>\n<pre><code class=\"language-js\">\/\/ Before\nimport { Simulate } from 'react-dom\/test-utils';\n\nconst element = document.querySelector('button');\nSimulate.click(element);\n\n\/\/ Now\nimport { fireEvent } from '@testing-library\/react';\n\nconst element = document.querySelector('button');\nfireEvent.click(element);<\/code><\/pre>\n<p>Houd er rekening mee dat <code>fireEvent<\/code> een echt event verzendt, wat betekent dat het een natuurlijkere interactie heeft met het element dan de synthetische gebeurtenissen die zijn gemaakt door <code>Simulate<\/code>. Lees de <a href=\"https:\/\/testing-library.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentatie<\/a> van de React testbibliotheek om deze goed te begrijpen.<\/p>\n<h3>2. Verwijdering van findDOMNode API<\/h3>\n<p>Een andere belangrijke verandering in React 19 is de verwijdering van <code>ReactDOM.findDOMNode<\/code>, die <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html#deprecations-in-strictmode\" target=\"_blank\" rel=\"noopener noreferrer\">in React 16.6.0 niet meer werd gebruikt<\/a>.<\/p>\n<p>Deze functie werd gebruikt om toegang te krijgen tot de onderliggende DOM-node van een React-component, maar had <a href=\"https:\/\/legacy.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\" target=\"_blank\" rel=\"noopener noreferrer\">verschillende nadelen<\/a>, zoals traagheid bij het uitvoeren, kwetsbaarheid voor refactoring en het doorbreken van abstractieniveaus.<\/p>\n<p>In plaats daarvan kun je beter <a href=\"https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs\" target=\"_blank\" rel=\"noopener noreferrer\">DOM refs<\/a> gebruiken, die een betrouwbaardere en effici\u00ebntere manier bieden voor interactie met DOM-elementen in je React-componenten.<\/p>\n<p>Hier is een voorbeeld van het gebruik van <code>findDOMNode<\/code> om de tekst in een invoerveld te selecteren wanneer het component mount:<\/p>\n<pre><code class=\"language-jsx\">import { findDOMNode } from 'react-dom';\n\nfunction AutoselectingInput() {\n  useEffect(() =&gt; {\n    const input = findDOMNode(this);\n    input.select()\n  }, []);\n\n  render() {\n    return &lt;input defaultValue=\"Hello\" \/&gt;;\n  }\n}<\/code><\/pre>\n<p>Om deze code bij te werken voor React 19, vervang je <code>findDOMNode<\/code> door <code>ref<\/code>. Deze wijziging maakt de code robuuster en stemt hem af op moderne React-praktijken:<\/p>\n<pre><code class=\"language-jsx\">import React, { useEffect, useRef } from 'react';\n\nfunction AutoselectingInput() {\n  const inputRef = useRef(null);\n\n  useEffect(() =&gt; {\n    inputRef.current.select();\n  }, []);\n\n  return &lt;input ref={inputRef} defaultValue=\"Hello\" \/&gt;;\n}<\/code><\/pre>\n<h3>3. Verwijdering van render API<\/h3>\n<p>Met React 19 wordt <code>ReactDOM.render<\/code> verwijderd. Deze methode werd <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">afgeschreven in React 18.0.0<\/a> ten gunste van <code>createRoot<\/code> API van <code>react-dom\/client<\/code>, die een effici\u00ebntere en modernere manier biedt om React applicaties te initialiseren en renderen. Deze verandering maakt deel uit van de voortdurende inspanningen van React om de bibliotheek te stroomlijnen en te optimaliseren.<\/p>\n<p>In een typische WordPress opstelling heb je misschien een custom blok of een plugin die een React app initialiseert als de DOM klaar is. Voorheen gebruikte je <code>ReactDOM.render<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import { render } from 'react-dom';\nrender(&lt;App \/&gt;, document.getElementById('root'));<\/code><\/pre>\n<p>Met React 19 moet je <code>createRoot<\/code> gebruiken om je React applicatie te initialiseren en renderen:<\/p>\n<pre><code class=\"language-jsx\">import { createRoot } from 'react-dom\/client';\nconst root = createRoot(document.getElementById('root'));\nroot.render(&lt;App \/&gt;);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om je te helpen over te schakelen van het gebruik van <code>ReactDOM.render<\/code> naar de <code>createRoot<\/code> API van <code>react-dom\/client<\/code>, kun je het volgende codemod commando gebruiken:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-reactdom-render<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>4. Verwijdering van unmountComponentAtNode API<\/h3>\n<p>React 19 verwijdert ook de methode <code>ReactDOM.unmountComponentAtNode<\/code>, die <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">afgeschreven werd in React 18.0.0<\/a>. Deze methode werd gebruikt om een React component te unmounten van het DOM.<\/p>\n<p>In React 19 moet je overstappen op de methode <code>root.unmount()<\/code>, die beter aansluit bij de bijgewerkte API voor het maken en hydraten van roots.<\/p>\n<pre><code class=\"language-js\">\/\/ Before\nunmountComponentAtNode(document.getElementById('root'));\n\n\/\/ Now\nroot.unmount();<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om je te helpen over te stappen van <code>unmountComponentAtNode<\/code> naar <code>root.unmount<\/code> kun je het volgende codemod commando gebruiken:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-reactdom-render<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h3>5. Verwijdering van hydrate API<\/h3>\n<p>ReactDOM.hydrate was <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">deprecated in React 18<\/a> en zal volledig worden verwijderd in React 19.<\/p>\n<p>De nieuwe methode van de React DOM client API, <code>hydrateRoot<\/code>, vervangt <code>ReactDOM.hydrate<\/code> en biedt een effici\u00ebntere en modernere manier om server-rendered React applicaties te hydrateren.<\/p>\n<p>In een WordPress context zou je server-side rendering (SSR) kunnen gebruiken om initi\u00eble HTML inhoud te leveren voor het sneller laden van pagina&#8217;s. Om deze inhoud te hydraten in een interactieve React applicatie, gebruikte je voorheen <code>ReactDOM.hydrate<\/code>:<\/p>\n<pre><code class=\"language-jsx\">import { hydrate } from 'react-dom';\nimport App from '.\/App.js';\n\nhydrate(\n  &lt;App \/&gt;,\n  document.getElementById('root')\n);<\/code><\/pre>\n<p>Met React 19 moet je <code>hydrateRoot<\/code> van <code>react-dom\/client<\/code> gebruiken voor hydrating:<\/p>\n<pre><code class=\"language-jsx\">import { hydrateRoot } from 'react-dom\/client';\nimport App from '.\/App.js';\n\nhydrateRoot(\n  document.getElementById('root'),\n  &lt;App \/&gt;\n);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Om je te helpen overschakelen van <code>ReactDOM.hydrate<\/code> naar <code>ReactDOMClient.hydrateRoot<\/code> kun je het volgende codemod commando gebruiken:<\/p>\n<pre><code class=\"language-bash\">npx codemod@latest react\/19\/replace-reactdom-render<\/code><\/pre>\n<p><\/p>\n<\/aside>\n\n<h2>Afgeschreven TypeScript types verwijderd<\/h2>\n<p>WordPress ontwikkelaars gebruiken vaak TypeScript om typeveiligheid toe te voegen en de kwaliteit van de code in React componenten te verbeteren. Met React 19 zijn verschillende afgeschreven TypeScript types verwijderd of verplaatst naar relevantere pakketten.<\/p>\n<p>Inzicht in deze wijzigingen is cruciaal om ervoor te zorgen dat je codebase robuust en compatibel blijft met de nieuwste React versie.<\/p>\n<p>Om te helpen bij de overgang heeft het React team een tool beschikbaar gesteld met de naam <code><a href=\"https:\/\/github.com\/eps1lon\/types-react-codemod\/\" target=\"_blank\" rel=\"noopener noreferrer\">types-react-codemod<\/a><\/code>dat je codebase automatisch kan bijwerken om deze wijzigingen te verwerken.<\/p>\n<p>Om het te gebruiken voer je het volgende codemod commando uit, dat verschillende transformaties bevat om verouderde types bij te werken.<\/p>\n<pre><code class=\"language-bash\">npx types-react-codemod@latest preset-19 .\/path-to-app<\/code><\/pre>\n<p>De utility biedt ook een interactieve modus waarin je specifieke transformaties kunt kiezen om toe te passen:<\/p>\n<pre><code class=\"language-bash\">? Pick transforms to apply (Press  to select,  to toggle all,  to invert selection, and  to proceed)\n\u276f\u25ef context-any\n\u25c9 deprecated-react-type\n\u25c9 deprecated-sfc-element\n\u25c9 deprecated-sfc\n\u25c9 deprecated-stateless-component\n\u25ef implicit-children\n\u25ef useCallback-implicit-any<\/code><\/pre>\n<p>Laten we eens kijken naar enkele belangrijke veranderingen met voorbeelden.<\/p>\n<h3>1. Ref opruiming vereist<\/h3>\n<p>In React 19 verbeteren <code>ref<\/code> opruimfuncties de typeveiligheid door expliciete retours in <code>ref<\/code> callbacks af te dwingen. Impliciet teruggeven kan TypeScript de retourwaarde verkeerd laten interpreteren.<\/p>\n<pre><code class=\"language-tsx\">\/\/ Before\n (instance = current)} \/&gt;\n\n\/\/ Now\n { instance = current }} \/&gt;<\/code><\/pre>\n<h3>2. useRef vereist een argument<\/h3>\n<p>Voorheen kon <code>useRef<\/code> zonder argumenten worden gecalld, wat tot potenti\u00eble typeproblemen leidde. In React 19 vereist <code>useRef<\/code> een argument om ervoor te zorgen dat refs altijd mutebaar zijn.<\/p>\n<pre><code class=\"language-tsx\">\/\/ Before \u2014 @ts-expect-error: Expected 1 argument but saw none\nuseRef();\n\n\/\/ Now \u2014 correct usage with an argument\nuseRef(undefined);<\/code><\/pre>\n<h3>3. Wijzigingen in het ReactElement TypeScript<\/h3>\n<p>Het standaardtype voor <code>ReactElement<\/code> props is veranderd van <code>any<\/code> in <code>unknown<\/code>, waardoor de typeveiligheid is verbeterd door expliciete afhandeling van onbekende typen te vereisen.<\/p>\n<pre><code class=\"language-tsx\">\/\/ Previously, this was 'any'\ntype Example = ReactElement[\"props\"];\n\n\/\/ Now, this is 'unknown'\ntype Example = ReactElement[\"props\"];<\/code><\/pre>\n<p>Als je code vertrouwde op <code>any<\/code>, moet je deze bijwerken om <code>unknown<\/code> expliciet te behandelen of te casten naar <code>any<\/code>.<\/p>\n<h2>Samenvatting<\/h2>\n<p>Voor WordPress ontwikkelaars is het cruciaal om op de hoogte te blijven van de laatste ontwikkelingen in React. Deze gids zorgt ervoor dat je de verschillende veranderingen in React begrijpt, zodat je ze kunt toepassen in je WordPress projecten.<\/p>\n<p>Nog een laatste stukje informatie: Met React 19 zal de nieuwe JSX transform nodig zijn. Het goede nieuws is dat deze <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/06\/jsx-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">al wordt meegeleverd met WordPress 6.6<\/a>. Als de nieuwe transform niet is ingeschakeld, zie je deze waarschuwing:<\/p>\n<pre><code class=\"language-bash\">Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https:\/\/react.dev\/link\/new-jsx-transform<\/code><\/pre>\n<p>Je hoeft alleen maar te stoppen met het gebruik van React imports voor JSX transformaties, omdat ze niet langer nodig zijn.<\/p>\n<p><em>Hebben we iets gemist? Deel het met ons in de comments!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Als WordPress ontwikkelaars integreren we vaak custom React componenten in onze thema&#8217;s en plugins om dynamische en responsieve gebruikersinterfaces te maken. Met de komende release van &#8230;<\/p>\n","protected":false},"author":287,"featured_media":59809,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[871],"class_list":["post-59808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers\" \/>\n<meta property=\"og:description\" content=\"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T07:32:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-12T10:08:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers\",\"datePublished\":\"2024-07-05T07:32:30+00:00\",\"dateModified\":\"2024-07-12T10:08:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\"},\"wordCount\":2158,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\",\"name\":\"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"datePublished\":\"2024-07-05T07:32:30+00:00\",\"dateModified\":\"2024-07-12T10:08:19+00:00\",\"description\":\"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinqsta.com\/nl\/onderwerpen\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#website\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/nl\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers - Kinsta\u00ae","description":"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/","og_locale":"nl_NL","og_type":"article","og_title":"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers","og_description":"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.","og_url":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2024-07-05T07:32:30+00:00","article_modified_time":"2024-07-12T10:08:19+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.","twitter_image":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Joel Olawanle","Geschatte leestijd":"15 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers","datePublished":"2024-07-05T07:32:30+00:00","dateModified":"2024-07-12T10:08:19+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/"},"wordCount":2158,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/","url":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/","name":"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","datePublished":"2024-07-05T07:32:30+00:00","dateModified":"2024-07-12T10:08:19+00:00","description":"Leer de belangrijkste updates, compatibiliteitstips en best practices voor een soepele overgang en betere websiteprestaties.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#primaryimage","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/nl\/blog\/react-19-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinqsta.com\/nl\/onderwerpen\/react\/"},{"@type":"ListItem","position":3,"name":"Voorbereiden op React 19: een handleiding voor WordPress 6.6 gebruikers"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/nl\/#website","url":"https:\/\/kinqsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinqsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinqsta.com\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/nl\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/59808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/comments?post=59808"}],"version-history":[{"count":4,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/59808\/revisions"}],"predecessor-version":[{"id":59881,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/posts\/59808\/revisions\/59881"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/translations\/es"},{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/59808\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media\/59809"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/media?parent=59808"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/tags?post=59808"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/nl\/wp-json\/wp\/v2\/topic?post=59808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}