{"id":78206,"date":"2024-07-05T08:32:02","date_gmt":"2024-07-05T07:32:02","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=78206&#038;preview=true&#038;preview_id=78206"},"modified":"2024-07-05T12:11:10","modified_gmt":"2024-07-05T11:11:10","slug":"react-19-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/","title":{"rendered":"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6"},"content":{"rendered":"<p>Come <a href=\"https:\/\/kinsta.com\/it\/blog\/assumere-uno-sviluppatore-wordpress\/\">sviluppatori WordPress<\/a>, spesso integriamo componenti <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a> personalizzati nei nostri <a href=\"https:\/\/kinsta.com\/it\/blog\/temi-wordpress-veloci\/\">temi<\/a> e <a href=\"https:\/\/kinsta.com\/it\/argomenti\/plugin-wordpress\/\">plugin<\/a> per creare interfacce utente dinamiche e reattive.<\/p>\n<p>Con l&#8217;<a href=\"https:\/\/react.dev\/blog\/2024\/04\/25\/react-19\" target=\"_blank\" rel=\"noopener noreferrer\">imminente rilascio di React 19<\/a>, \u00e8 fondamentale prepararsi alle modifiche e alle deprecazioni che potrebbero avere un impatto sulle nostre basi di codice esistenti. <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>, che verr\u00e0 rilasciato il 16 luglio, include React 18.3. Questa versione \u00e8 quasi identica alla 18.2 ma aggiunge avvisi per le funzionalit\u00e0 deprecate per aiutare gli utenti a prepararsi a React 19.<\/p>\n<p>Affrontare queste deprecazioni \u00e8 essenziale per garantire la compatibilit\u00e0 con React 19; ignorarle pu\u00f2 portare a bug o problemi nei <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">blocchi personalizzati<\/a>, plugin o <a href=\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\">temi<\/a> quando React 19 verr\u00e0 rilasciato e incluso in WordPress.<\/p>\n<p>Questo articolo illustra ogni deprecazione, fornisce esempi di codice e guida nella sostituzione delle funzioni deprecate per mantenere la funzionalit\u00e0 senza problemi.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Per aiutare gli utenti con l&#8217;aggiornamento, il team di React ha collaborato con il team di <a href=\"http:\/\/codemod.com\" target=\"_blank\" rel=\"noopener noreferrer\">Codemod<\/a> per pubblicare dei codemod che aggiorneranno automaticamente il codice a molte delle nuove API e modelli di React 19.<\/p>\n<p>Tutti i codemod sono disponibili nella <a href=\"https:\/\/github.com\/reactjs\/react-codemod\" target=\"_blank\" rel=\"noopener noreferrer\">repo react-codemod<\/a> su GitHub. Inoltre, allegheremo il comando codemod di ogni deprecazione (se disponibile) per aiutarvi ad aggiornare automaticamente il vostro codice.<\/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>Deprecazioni rimosse in React<\/h2>\n<p>Diverse API e funzionalit\u00e0 deprecate sono state rimosse per snellire la libreria React e incoraggiare le best practice. Questa sezione illustra i principali cambiamenti e come aggiornare il vostro codice di conseguenza.<\/p>\n<h3>1. Rimozione di defaultProps per i componenti funzionali<\/h3>\n<p>React 19 rimuover\u00e0 <code>defaultProps<\/code> per i componenti delle funzioni a favore dei parametri predefiniti <a href=\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\">ES6<\/a>. Secondo il <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/07\/preparation-for-react-19-upgrade\/\" target=\"_blank\" rel=\"noopener noreferrer\">team di WordPress<\/a>, questa deprecazione \u00e8 pi\u00f9 comunemente utilizzata nei plugin e nei temi.<\/p>\n<p>Come sviluppatori di WordPress, potreste utilizzare <code>defaultProps<\/code> per fornire valori predefiniti per i prop nei vostri componenti funzionali, assicurandovi che i componenti si comportino correttamente anche se alcuni prop non vengono passati.<\/p>\n<p>Ecco come potrebbe apparire il vostro codice attuale con <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 questo esempio, un componente <code>CustomButton<\/code> ha i valori predefiniti di <code>label<\/code> e <code>color<\/code> forniti da <code>defaultProps<\/code>. Con React 19, questo errore verr\u00e0 segnalato, invitandovi a utilizzare invece i parametri predefiniti di ES6.<\/p>\n<p>Ecco il codice aggiornato con i parametri predefiniti ES6:<\/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>Utilizzando i parametri predefiniti ES6, i valori predefiniti sono ora direttamente nella firma della funzione, rendendo il codice pi\u00f9 facile da leggere e da mantenere.<\/p>\n<h3>2. Rimozione di propTypes per i componenti delle funzioni<\/h3>\n<p><code>propTypes<\/code> \u00e8 stato <a href=\"https:\/\/legacy.reactjs.org\/blog\/2017\/04\/07\/react-v15.5.0.html#new-deprecation-warnings\" target=\"_blank\" rel=\"noopener noreferrer\">deprecato in React 15.5.0<\/a> e sar\u00e0 completamente rimosso anche nel pacchetto React nella versione 19. Se utilizzate <code>propTypes<\/code>, vi consigliamo di migrare a <a href=\"https:\/\/kinsta.com\/it\/blog\/typescript\/\">TypeScript<\/a> o a un&#8217;altra soluzione di controllo dei tipi.<\/p>\n<p>Potreste aver utilizzato <code>propTypes<\/code> per convalidare i prop passati ai vostri componenti funzionali per assicurarvi che ricevano i tipi e i valori corretti. Ad esempio:<\/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>Oggi potete iniziare a usare TypeScript per questi controlli di tipo:<\/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>Per aiutarvi a passare dall&#8217;utilizzo di <code>propTypes<\/code> a TypeScript, potete utilizzare il seguente comando codemod:<\/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. Rimozione dei contesti legacy (contextTypes e getChildContext)<\/h3>\n<p>Data la natura di lunga data di molti plugin e codebase di WordPress, potreste ancora utilizzare le API legacy <code>contextTypes<\/code> e <code>getChildContext<\/code> nei vostri componenti di classe. Queste API venivano utilizzate per passare i dati da un componente genitore ai suoi discendenti senza passare esplicitamente i prop a ogni livello.<\/p>\n<p>Tuttavia, \u00e8 importante notare che il Legacy Context \u00e8 stato <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html\" target=\"_blank\" rel=\"noopener noreferrer\">deprecato in React 16.6.0<\/a> e sar\u00e0 rimosso in React v19. Questo cambiamento ha lo scopo di rendere React leggermente pi\u00f9 piccolo e pi\u00f9 veloce, in quanto l&#8217;API Legacy Context presentava dei piccoli bug che spesso erano facili da ignorare.<\/p>\n<p>Il metodo legacy \u00e8 stato sostituito dalla nuova API <code>contextType<\/code>.<\/p>\n<p>Ecco un esempio di come potreste utilizzare l&#8217;API Context deprecata in un plugin di WordPress per passare le impostazioni globali, come il titolo del sito, da un componente parent a un componente child senza 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>Al contrario, l&#8217;approccio moderno utilizza il metodo <code>createContext<\/code>. Questo \u00e8 il metodo da adottare per prepararsi a 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. Rimozione delle stringhe di riferimento<\/h3>\n<p>L&#8217;uso delle stringhe di riferimento (<em>string refs<\/em>) era un tempo un modo comune per accedere a un elemento DOM nei componenti React. Tuttavia, sono considerati una <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/03\/27\/update-on-async-rendering.html\" target=\"_blank\" rel=\"noopener noreferrer\">legacy gi\u00e0 da React 16.3.0<\/a> e saranno rimossi nella versione 19.<\/p>\n<p>Sebbene gli string refs fossero semplici, presentavano <a href=\"https:\/\/github.com\/facebook\/react\/issues\/1373\" target=\"_blank\" rel=\"noopener noreferrer\">diversi problemi<\/a>, come i potenziali conflitti di denominazione e la mancanza di flessibilit\u00e0.<\/p>\n<p>Consideriamo un esempio di utilizzo delle stringhe di riferimento in un blocco personalizzato di WordPress. Immaginiamo di avere un blocco personalizzato di Gutenberg che include un campo di input, e di volere che il campo di input venga focalizzato automaticamente quando il blocco viene aggiunto all&#8217;editor. Ecco come avremmo potuto farlo utilizzando le stringhe di riferimento:<\/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>Per prepararci a React 19, dovremo sostituire i riferimenti a stringhe con callback <code>refs<\/code> o con l&#8217;API <code>React.createRef<\/code>. Ecco lo stesso esempio utilizzando una 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>Per passare pi\u00f9 facilmente dall&#8217;uso di string refs a quello di callback <code>ref<\/code>, potete usare il seguente comando codemod:<\/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. Rimozione delle module pattern factories<\/h3>\n<p>Un&#8217;altra <a href=\"https:\/\/legacy.reactjs.org\/blog\/2019\/08\/08\/react-v16.9.0.html#deprecating-module-pattern-factories\" target=\"_blank\" rel=\"noopener noreferrer\">funzione deprecata<\/a> che verr\u00e0 rimossa in React 19 \u00e8 quella delle module pattern factories. Questo pattern veniva utilizzato raramente e rendeva React leggermente pi\u00f9 grande e pi\u00f9 lento del necessario.<\/p>\n<p>Le module pattern factories permettevano agli sviluppatori di creare componenti in modo meno convenzionale. Ecco un esempio di come potreste usarlo:<\/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 questo pattern, <code>SettingsPanelFactory<\/code> restituisce un oggetto utilizzando un metodo <code>render<\/code> piuttosto che restituire direttamente JSX.<\/p>\n<p>Per essere conforme a React 19, dovrete migrare le fabbriche di moduli a funzioni regolari che restituiscano direttamente JSX. Ecco l&#8217;esempio aggiornato:<\/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. Rimozione dell&#8217;API createFactory<\/h3>\n<p>In React 19, <code>React.createFactory<\/code> \u00e8 stato rimosso. Questo metodo era molto utilizzato prima che <a href=\"https:\/\/kinsta.com\/it\/blog\/guida-su-jsx\/\">JSX<\/a> diventasse ampiamente supportato. Consentiva agli sviluppatori di creare elementi React senza utilizzare la sintassi JSX.<\/p>\n<p>Tuttavia, con la diffusione di JSX, <code>createFactory<\/code> \u00e8 diventato obsoleto e pu\u00f2 essere sostituito con un codice JSX pi\u00f9 semplice e leggibile.<\/p>\n<p>Ecco un esempio di utilizzo di <code>createFactory<\/code> per creare un elemento <code>button<\/code>. Questo potrebbe far parte di un plugin WordPress personalizzato che genera dinamicamente elementi <code>button<\/code> in base agli input dell&#8217;utente:<\/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>Per aggiornare questo codice a React 19, sostituite <code>createFactory<\/code> con JSX. Questa modifica rende il codice pi\u00f9 moderno, leggibile e manutenibile:<\/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. Rimozione di react-test-renderer\/shallow<\/h3>\n<p>React 19 rimuove <code>react-test-renderer\/shallow<\/code> per semplificare le utility di test e incoraggiare le best practice. In React 18, <code>react-test-renderer\/shallow<\/code> \u00e8 stato aggiornato per esportare nuovamente <code><a href=\"https:\/\/github.com\/enzymejs\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>.<\/p>\n<p>In precedenza, era possibile utilizzare <code>react-test-renderer\/shallow<\/code> per creare test di rendering superficiale per i componenti React:<\/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>Per conformarsi a React 19, \u00e8 necessario installare <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>E aggiornare l&#8217;importazione:<\/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>Il team di React consiglia di migrare alla <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a>, che offre pratiche di test pi\u00f9 robuste concentrandosi sul modo in cui gli utenti interagiscono con i vostri componenti.<\/p>\n<p>Per farlo, installate la libreria <code><a href=\"https:\/\/www.npmjs.com\/package\/@testing-library\/react\" target=\"_blank\" rel=\"noopener noreferrer\">@testing-library\/react<\/a><\/code> come dipendenza dev:<\/p>\n<pre><code class=\"language-bash\">npm install @testing-library\/react --save-dev<\/code><\/pre>\n<p>Successivamente, potete testare lo stesso componente utilizzando questo approccio moderno:<\/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>Eliminazione delle deprecazioni in React DOM<\/h2>\n<p>Anche React DOM \u00e8 cambiato in React 19, con la rimozione di alcuni metodi deprecati. Questa sezione illustra questi cambiamenti e guida nell&#8217;aggiornamento del codice relativo al DOM.<\/p>\n<h3>1. Rimozione dell&#8217;API react-dom\/test-utils<\/h3>\n<p>L&#8217;API <code><a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">react-dom\/test-utils<\/a><\/code> sar\u00e0 anch&#8217;essa rimossa in React 19. Questo ha un impatto sul modo in cui scriviamo i test per i nostri componenti React. In particolare, l&#8217;utility <code>act<\/code> \u00e8 stata spostata da <code>react-dom\/test-utils<\/code> al pacchetto <code>react<\/code>.<\/p>\n<p>Inoltre, la maggior parte delle utility di <code>react-dom\/test-utils<\/code> <a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">sono state rimosse<\/a>. Ecco come adattare i vostri test per conformarsi a questi cambiamenti.<\/p>\n<p>L&#8217;utility <code>act<\/code> \u00e8 essenziale per garantire che tutti gli aggiornamenti relativi ai vostri test siano stati elaborati e applicati al DOM. In React 19, dovreste importare <code>act<\/code> direttamente da <code>react<\/code> invece di <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>Per passare dall&#8217;utilizzo di <code>react-dom\/test-utils<\/code> alle nuove importazioni, potete utilizzare il seguente comando codemod:<\/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>Il team di React raccomanda anche di migrare i vostri test alla React Testing Library per un&#8217;esperienza di test moderna e ben supportata. Ecco alcuni casi d&#8217;uso comuni e come aggiornarli.<\/p>\n<p>L&#8217;utility <code>renderIntoDocument<\/code> verr\u00e0 rimossa. Potrete sostituirla con <code>render<\/code> da <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>Allo stesso modo, l&#8217;utility <code>Simulate<\/code> per la simulazione degli eventi sar\u00e0 rimossa. Dovrete invece utilizzare <code>fireEvent<\/code> da <code>@testing-library\/react<\/code>, che invia un evento reale sull&#8217;elemento.<\/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>Tenete presente che <code>fireEvent<\/code> invia un evento reale, il che significa che interagisce con l&#8217;elemento in modo pi\u00f9 naturale rispetto agli eventi sintetici creati da <code>Simulate<\/code>. Per capire bene la libreria di testing di React, leggete la sua <a href=\"https:\/\/testing-library.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione<\/a>.<\/p>\n<h3>2. Rimozione dell&#8217;API findDOMNode<\/h3>\n<p>Un altro cambiamento significativo in arrivo in React 19 \u00e8 la rimozione di <code>ReactDOM.findDOMNode<\/code>, che \u00e8 stata <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html#deprecations-in-strictmode\" target=\"_blank\" rel=\"noopener noreferrer\">deprecata in React 16.6.0<\/a>.<\/p>\n<p>Questa funzione veniva utilizzata per accedere al nodo DOM sottostante di un componente React, ma presentava <a href=\"https:\/\/legacy.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\" target=\"_blank\" rel=\"noopener noreferrer\">diversi inconvenienti<\/a>, come la lentezza di esecuzione, la fragilit\u00e0 nel refactoring e la rottura dei livelli di astrazione.<\/p>\n<p>Dovreste invece utilizzare le <a href=\"https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs\" target=\"_blank\" rel=\"noopener noreferrer\">DOM refs<\/a>, che offrono un modo pi\u00f9 affidabile ed efficiente per interagire con gli elementi DOM nei vostri componenti React.<\/p>\n<p>Ecco un esempio di utilizzo di <code>findDOMNode<\/code> per selezionare il testo in un campo di input quando il componente viene montato:<\/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>Per aggiornare questo codice per React 19, sostituite <code>findDOMNode<\/code> con <code>ref<\/code>. Questa modifica rende il codice pi\u00f9 robusto e lo allinea alle moderne pratiche di React:<\/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. Rimozione dell&#8217;API di rendering<\/h3>\n<p>Con React 19, <code>ReactDOM.render<\/code> sar\u00e0 rimosso. Questo metodo \u00e8 stato <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">deprecato in React 18.0.0<\/a> in favore dell&#8217;API <code>createRoot<\/code> di <code>react-dom\/client<\/code>, che fornisce un modo pi\u00f9 efficiente e moderno per inizializzare e renderizzare le applicazioni React. Questo cambiamento fa parte del continuo sforzo di React per semplificare e ottimizzare la libreria.<\/p>\n<p>In una tipica configurazione di WordPress, potreste avere un blocco personalizzato o un plugin che inizializza un&#8217;applicazione React quando il DOM \u00e8 pronto. In precedenza, si utilizzava <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>Con React 19, dovrete utilizzare <code>createRoot<\/code> per inizializzare e renderizzare la vostra applicazione React:<\/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>Per facilitare il passaggio dall&#8217;utilizzo di <code>ReactDOM.render<\/code> all&#8217;API <code>createRoot<\/code> da <code>react-dom\/client<\/code>, potete utilizzare il seguente comando codemod:<\/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. Rimozione dell&#8217;API unmountComponentAtNode<\/h3>\n<p>React 19 rimuove anche il metodo <code>ReactDOM.unmountComponentAtNode<\/code>, <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">deprecato in React 18.0.0<\/a>. Questo metodo veniva utilizzato per smontare un componente React dal DOM.<\/p>\n<p>In React 19, dovreste migrare all&#8217;uso del metodo <code>root.unmount()<\/code>, che \u00e8 pi\u00f9 in linea con l&#8217;API aggiornata per la creazione e l&#8217;hydrating delle root.<\/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>Per passare pi\u00f9 semplicemente dall&#8217;uso di <code>unmountComponentAtNode<\/code> a quello di <code>root.unmount<\/code>, potete utilizzare il seguente comando codemod:<\/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. Rimozione dell&#8217;API hydrate<\/h3>\n<p>ReactDOM.hydrate \u00e8 stato <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">deprecato in React 18<\/a> e sar\u00e0 completamente rimosso in React 19.<\/p>\n<p>Il nuovo metodo dell&#8217;API client di React DOM, <code>hydrateRoot<\/code>, sostituisce <code>ReactDOM.hydrate<\/code>, offrendo un modo pi\u00f9 efficiente e moderno per eseguire l&#8217;hydrate le applicazioni React renderizzate dal server.<\/p>\n<p>In un contesto WordPress, potreste utilizzare il rendering lato server (SSR) per fornire il contenuto HTML iniziale e velocizzare il caricamento della pagina. Per eseguire l&#8217;hydrate di questo contenuto in un&#8217;applicazione React interattiva, in precedenza si utilizzava <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>Con React 19, dovrete utilizzare <code>hydrateRoot<\/code> da <code>react-dom\/client<\/code> per l&#8217;hydrate:<\/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>Per passare pi\u00f9 semplicemente da <code>ReactDOM.hydrate<\/code> a <code>ReactDOMClient.hydrateRoot<\/code>, potete utilizzare il seguente comando codemod:<\/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>Tipi TypeScript deprecati rimossi<\/h2>\n<p>Gli sviluppatori di WordPress utilizzano spesso TypeScript per aggiungere sicurezza ai tipi e migliorare la qualit\u00e0 del codice nei componenti React. Con React 19, diversi tipi di TypeScript deprecati sono stati rimossi o riposizionati in pacchetti pi\u00f9 pertinenti.<\/p>\n<p>Comprendere questi cambiamenti \u00e8 fondamentale per garantire che la propria base di codice rimanga robusta e compatibile con l&#8217;ultima versione di React.<\/p>\n<p>Per facilitare la transizione, il team di React ha messo a disposizione uno strumento chiamato <code><a href=\"https:\/\/github.com\/eps1lon\/types-react-codemod\/\" target=\"_blank\" rel=\"noopener noreferrer\">types-react-codemod<\/a><\/code>che pu\u00f2 aggiornare automaticamente la base di codice per gestire questi cambiamenti.<\/p>\n<p>Per utilizzarlo, eseguite il comando codemod qui sotto, che include diverse trasformazioni per aggiornare i tipi deprecati.<\/p>\n<pre><code class=\"language-bash\">npx types-react-codemod@latest preset-19 .\/path-to-app<\/code><\/pre>\n<p>Lo strumento offre anche una modalit\u00e0 interattiva in cui scegliere le trasformazioni specifiche da applicare:<\/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>Diamo un&#8217;occhiata ad alcuni cambiamenti chiave con degli esempi.<\/p>\n<h3>1. Ref cleanup obbligatoria<\/h3>\n<p>Con React 19, le funzioni di cleanup di <code>ref<\/code> migliorano la sicurezza dei tipi imponendo il ritorno esplicito nelle callback di <code>ref<\/code>. I ritorni impliciti possono indurre TypeScript a interpretare erroneamente il valore di ritorno.<\/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 richiede un argomento<\/h3>\n<p>In precedenza, <code>useRef<\/code> poteva essere richiamato senza argomenti, causando potenziali problemi di tipo. In React 19, <code>useRef<\/code> richiede un argomento per garantire che i ref siano sempre mutabili.<\/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. Modifiche al tipo di ReactElement TypeScript<\/h3>\n<p>Il tipo predefinito per i prop di <code>ReactElement<\/code> \u00e8 cambiato da <code>any<\/code> a <code>unknown<\/code>, migliorando la sicurezza dei tipi grazie alla necessit\u00e0 di gestire esplicitamente i tipi sconosciuti.<\/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>Se il vostro codice si basava su <code>any<\/code>, dovrete aggiornarlo per gestire <code>unknown<\/code> in modo esplicito o per eseguire il cast di <code>any<\/code>.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Per gli sviluppatori di WordPress \u00e8 fondamentale rimanere aggiornati sulle ultime novit\u00e0 di React. Questa guida permette di comprendere i vari cambiamenti in arrivo per React in modo da poterli applicare ai vostri progetti WordPress.<\/p>\n<p>Un&#8217;ultima informazione: Con React 19 sar\u00e0 necessaria la nuova trasformazione JSX. La buona notizia \u00e8 che \u00e8 <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/06\/jsx-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">gi\u00e0 disponibile con WordPress 6.6<\/a>. Se il nuovo trasformatore non \u00e8 abilitato, vedrete questo avviso:<\/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><em>(L&#8217;applicazione (o una delle sue dipendenze) utilizza una trasformazione JSX obsoleta. Aggiorna alla trasformazione JSX moderna per ottenere prestazioni pi\u00f9 veloci: https:\/\/react.dev\/link\/new-jsx-transform)<\/em><\/p>\n<p>Tutto quello che dovrete fare \u00e8 smettere di usare le importazioni di React per le trasformazioni JSX, perch\u00e9 non sono pi\u00f9 necessarie.<\/p>\n<p><em>Ci siamo persi qualcosa? Condividetelo con noi nella sezione commenti!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come sviluppatori WordPress, spesso integriamo componenti React personalizzati nei nostri temi e plugin per creare interfacce utente dinamiche e reattive. Con l&#8217;imminente rilascio di React 19, &#8230;<\/p>\n","protected":false},"author":287,"featured_media":78207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26212],"class_list":["post-78206","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>Prepararsi a React 19: una guida per gli utenti di WordPress 6.6 - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6\" \/>\n<meta property=\"og:description\" content=\"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T07:32:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-05T11:11:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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=\"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6\",\"datePublished\":\"2024-07-05T07:32:02+00:00\",\"dateModified\":\"2024-07-05T11:11:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\"},\"wordCount\":2098,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\",\"name\":\"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6 - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"datePublished\":\"2024-07-05T07:32:02+00:00\",\"dateModified\":\"2024-07-05T11:11:10+00:00\",\"description\":\"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6 - Kinsta\u00ae","description":"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.","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:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6","og_description":"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.","og_url":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-07-05T07:32:02+00:00","article_modified_time":"2024-07-05T11:11:10+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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":"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Joel Olawanle","Tempo di lettura stimato":"16 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6","datePublished":"2024-07-05T07:32:02+00:00","dateModified":"2024-07-05T11:11:10+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/"},"wordCount":2098,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/","name":"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6 - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","datePublished":"2024-07-05T07:32:02+00:00","dateModified":"2024-07-05T11:11:10+00:00","description":"Gli aggiornamenti, i suggerimenti per la compatibilit\u00e0 e le best practice per garantire una transizione senza intoppi e migliori prestazioni del sito con React 19.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/react-19-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/it\/argomenti\/react\/"},{"@type":"ListItem","position":3,"name":"Prepararsi a React 19: una guida per gli utenti di WordPress 6.6"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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:\/\/kinsta.com\/it\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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:\/\/kinsta.com\/it\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/78206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=78206"}],"version-history":[{"count":4,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/78206\/revisions"}],"predecessor-version":[{"id":78213,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/78206\/revisions\/78213"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/78206\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/78207"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=78206"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=78206"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=78206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}