{"id":75648,"date":"2024-07-05T09:30:41","date_gmt":"2024-07-05T07:30:41","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=75648&#038;preview=true&#038;preview_id=75648"},"modified":"2024-07-11T15:52:22","modified_gmt":"2024-07-11T13:52:22","slug":"react-19-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/","title":{"rendered":"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6"},"content":{"rendered":"<p>Como <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">desarrolladores de WordPress<\/a>, a menudo integramos componentes <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a> personalizados en nuestros <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">temas<\/a> y <a href=\"https:\/\/kinsta.com\/es\/secciones\/plugins-wordpress\/\">plugins<\/a> para crear interfaces de usuario din\u00e1micas y con capacidad de respuesta.<\/p>\n<p>Con el <a href=\"https:\/\/react.dev\/blog\/2024\/04\/25\/react-19\" target=\"_blank\" rel=\"noopener noreferrer\">pr\u00f3ximo lanzamiento de React 19<\/a>, es crucial prepararse para los cambios y deprecaciones que podr\u00edan afectar a nuestras bases de c\u00f3digo existentes. <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>, que se lanzar\u00e1 el 16 de julio, incluye React 18.3. Esta versi\u00f3n es casi id\u00e9ntica a la 18.2, pero a\u00f1ade advertencias sobre funciones obsoletas para ayudarte a prepararte para React 19.<\/p>\n<p>Abordar estas deprecaciones es esencial para garantizar la compatibilidad con React 19, e ignorarlas puede provocar errores o problemas en tus <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">bloques personalizados<\/a>, plugins o <a href=\"https:\/\/kinsta.com\/es\/blog\/tema-wordpress-react\/\">temas<\/a> cuando React 19 se publique y se incluya en WordPress.<\/p>\n<p>Este art\u00edculo detalla cada deprecaci\u00f3n, proporciona ejemplos de c\u00f3digo y te gu\u00eda a trav\u00e9s del proceso de reemplazar las funcionalidades deprecadas para mantener un funcionamiento fluido.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Para ayudarte con la actualizaci\u00f3n, el equipo de React ha trabajado con el equipo de <a href=\"http:\/\/codemod.com\" target=\"_blank\" rel=\"noopener noreferrer\">Codemod<\/a> para publicar codemods que actualizar\u00e1n autom\u00e1ticamente tu c\u00f3digo a muchas de las nuevas APIs y patrones de React 19.<\/p>\n<p>Todos los codemods est\u00e1n disponibles en el <a href=\"https:\/\/github.com\/reactjs\/react-codemod\" target=\"_blank\" rel=\"noopener noreferrer\">repositorio react-codemod<\/a> en GitHub. Adem\u00e1s, adjuntaremos el comando codemod de cada deprecaci\u00f3n (si est\u00e1 disponible) para ayudarte a actualizar autom\u00e1ticamente tu c\u00f3digo.<\/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>Deprecaciones eliminadas en React<\/h2>\n<p>Se han eliminado varias APIs y funciones obsoletas para racionalizar la biblioteca React y fomentar las mejores pr\u00e1cticas. Esta secci\u00f3n explica los cambios m\u00e1s importantes y c\u00f3mo actualizar tu c\u00f3digo en consecuencia.<\/p>\n<h3>1. Eliminaci\u00f3n de defaultProps para componentes de funci\u00f3n<\/h3>\n<p>React 19 eliminar\u00e1 <code>defaultProps<\/code> para los componentes de funci\u00f3n en favor de los par\u00e1metros por defecto de <a href=\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\">ES6<\/a>. Seg\u00fan el <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/07\/preparation-for-react-19-upgrade\/\" target=\"_blank\" rel=\"noopener noreferrer\">equipo de WordPress<\/a>, esta deprecaci\u00f3n es m\u00e1s com\u00fan en plugins y temas.<\/p>\n<p>Como desarrollador de WordPress, es posible que utilices <code>defaultProps<\/code> para proporcionar valores por defecto a los props en tus componentes de funci\u00f3n, asegur\u00e1ndote de que los componentes se comportan correctamente incluso si no se pasan ciertos props.<\/p>\n<p>Este es el aspecto que podr\u00eda tener tu c\u00f3digo actual 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>En este ejemplo, un componente <code>CustomButton<\/code> tiene valores por defecto <code>label<\/code> y <code>color<\/code> proporcionados por <code>defaultProps<\/code>. Con React 19, esto lanzar\u00e1 un error de advertencia, inst\u00e1ndote a utilizar en su lugar los par\u00e1metros por defecto de ES6.<\/p>\n<p>Aqu\u00ed tienes el c\u00f3digo actualizado con los par\u00e1metros por defecto de 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>Usando par\u00e1metros por defecto ES6, los valores por defecto est\u00e1n ahora directamente en la firma de la funci\u00f3n, haciendo el c\u00f3digo m\u00e1s f\u00e1cil de leer y mantener.<\/p>\n<h3>2. Eliminaci\u00f3n de propTypes para componentes de funci\u00f3n<\/h3>\n<p><code>propTypes<\/code> fue <a href=\"https:\/\/legacy.reactjs.org\/blog\/2017\/04\/07\/react-v15.5.0.html#new-deprecation-warnings\">deprecado en React 15.5.0<\/a> y ser\u00e1 completamente eliminado del paquete React en la versi\u00f3n 19. Si est\u00e1s utilizando\u00a0<code>propTypes<\/code>, se recomienda migrar a <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-typescript\/\">TypeScript<\/a> o a otra soluci\u00f3n de verificaci\u00f3n de tipos.<\/p>\n<p>Puede que hayas estado utilizando <code>propTypes<\/code> para validar los props pasados a tus componentes de funci\u00f3n para asegurarte de que reciben los tipos y valores correctos. Por ejemplo:<\/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>Hoy puedes empezar a utilizar TypeScript para estas verificaciones de tipos:<\/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>Para ayudarte a pasar de utilizar <code>propTypes<\/code> a TypeScript, puedes utilizar el siguiente 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. Eliminaci\u00f3n de Legacy Context (contextTypes y getChildContext)<\/h3>\n<p>Dada la antig\u00fcedad de muchos plugins y bases de c\u00f3digo de WordPress, es posible que a\u00fan utilices las APIs heredadas <code>contextTypes<\/code> y <code>getChildContext<\/code> en tus componentes de clase. Estas APIs se utilizaban para pasar datos de un componente padre a sus descendientes sin pasar expl\u00edcitamente props en cada nivel.<\/p>\n<p>Sin embargo, es importante tener en cuenta que el contexto heredado fue <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html\">deprecado en React 16.6.0<\/a> y se eliminar\u00e1 en React v19. Con este cambio se pretende que React sea algo m\u00e1s peque\u00f1o y r\u00e1pido, ya que la API Legacy Context ten\u00eda fallos sutiles que a menudo eran f\u00e1ciles de pasar por alto.<\/p>\n<p>El m\u00e9todo legacy ha sido sustituido por la nueva API <code>contextType<\/code>.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de c\u00f3mo puedes estar utilizando la API Context deprecada en un plugin de WordPress para pasar ajustes globales, como el t\u00edtulo del sitio, desde un componente padre a un componente hijo sin 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>En cambio, el enfoque moderno utiliza el m\u00e9todo <code>createContext<\/code>. Este es el m\u00e9todo que debes adoptar mientras te preparas para 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. Eliminaci\u00f3n de las referencias de cadena (string refs)<\/h3>\n<p>El uso de referencias de cadena (string refs) fue una forma com\u00fan de acceder a un elemento del DOM en componentes React. Sin embargo, han sido consideradas <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/03\/27\/update-on-async-rendering.html\">obsoletas desde React 16.3.0<\/a> y ser\u00e1n eliminadas en la v19.<\/p>\n<p>Aunque las referencias de cadena eran sencillas, ten\u00edan <a href=\"https:\/\/github.com\/facebook\/react\/issues\/1373\" target=\"_blank\" rel=\"noopener noreferrer\">varios problemas<\/a>, como posibles conflictos de nombres y falta de flexibilidad.<\/p>\n<p>Considera un ejemplo de uso de referencias de cadena en un bloque personalizado de WordPress. Imagina que tienes un bloque personalizado de Gutenberg que incluye un campo de entrada, y quieres que el campo de entrada se enfoque autom\u00e1ticamente cuando el bloque se a\u00f1ada al editor. As\u00ed es como podr\u00edas haberlo hecho utilizando referencias de cadena:<\/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>Para prepararte para React 19, debes sustituir las string refs con callback <code>refs<\/code> o la API <code>React.createRef<\/code>. Aqu\u00ed tienes el mismo ejemplo utilizando 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>Para ayudarte a pasar de utilizar strings refs a callback <code>ref<\/code>, puedes utilizar el siguiente 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. Eliminaci\u00f3n de patrones de f\u00e1brica de m\u00f3dulos<\/h3>\n<p>Otra <a href=\"https:\/\/legacy.reactjs.org\/blog\/2019\/08\/08\/react-v16.9.0.html#deprecating-module-pattern-factories\" target=\"_blank\" rel=\"noopener noreferrer\">caracter\u00edstica deprecada<\/a> que se eliminar\u00e1 en React 19 son los patrones de f\u00e1brica de m\u00f3dulos (module pattern factories). Este patr\u00f3n se utilizaba raramente y hac\u00eda que React fuera algo m\u00e1s grande y lento de lo necesario.<\/p>\n<p>Los patrones de f\u00e1brica de m\u00f3dulos permit\u00edan a los desarrolladores crear componentes de manera menos convencional. Aqu\u00ed tienes un ejemplo de c\u00f3mo podr\u00edas estar utiliz\u00e1ndolo:<\/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>En este patr\u00f3n, <code>SettingsPanelFactory<\/code> devuelve un objeto utilizando un m\u00e9todo <code>render<\/code> en lugar de devolver JSX directamente.<\/p>\n<p>Para cumplir con React 19, debes migrar los patrones de f\u00e1brica de m\u00f3dulos a funciones normales que devuelvan JSX directamente. Aqu\u00ed tienes el ejemplo actualizado:<\/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. Eliminaci\u00f3n de la API createFactory<\/h3>\n<p>En React 19, se est\u00e1 eliminando <code>React.createFactory<\/code>. Este m\u00e9todo se utilizaba con m\u00e1s frecuencia antes de que <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\">JSX<\/a> estuviera ampliamente soportado. Permit\u00eda a los desarrolladores crear elementos React sin utilizar la sintaxis JSX.<\/p>\n<p>Sin embargo, con la prevalencia de JSX, <code>createFactory<\/code> ha quedado obsoleto y puede sustituirse por c\u00f3digo JSX m\u00e1s sencillo y legible.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de uso de <code>createFactory<\/code> para crear un elemento <code>button<\/code>. Esto podr\u00eda formar parte de un plugin personalizado de WordPress que genere din\u00e1micamente elementos <code>button<\/code> en funci\u00f3n de la entrada del usuario:<\/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>Para actualizar este c\u00f3digo para React 19, sustituye <code>createFactory<\/code> por JSX. Este cambio hace que el c\u00f3digo sea m\u00e1s moderno, legible y f\u00e1cil de mantener:<\/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. Eliminaci\u00f3n de react-test-renderer\/shallow<\/h3>\n<p>React 19 elimina <code>react-test-renderer\/shallow<\/code> para agilizar las utilidades de prueba y fomentar las mejores pr\u00e1cticas. En React 18, <code>react-test-renderer\/shallow<\/code> se actualiz\u00f3 para volver a exportar <code><a href=\"https:\/\/github.com\/enzymejs\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>.<\/p>\n<p>Anteriormente, pod\u00edas haber utilizado <code>react-test-renderer\/shallow<\/code> para crear pruebas de renderizado superficial para tus componentes 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>Para cumplir con React 19, necesitas instalar <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>Y actualizar tu importaci\u00f3n:<\/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>El equipo de React recomienda migrar a la <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a>, que proporciona pr\u00e1cticas de prueba m\u00e1s s\u00f3lidas al centrarse en c\u00f3mo interact\u00faan los usuarios con tus componentes.<\/p>\n<p>Para ello, instala la <code><a href=\"https:\/\/www.npmjs.com\/package\/@testing-library\/react\" target=\"_blank\" rel=\"noopener noreferrer\">@testing-library\/react<\/a><\/code> como dependencia de desarrollo:<\/p>\n<pre><code class=\"language-bash\">npm install @testing-library\/react --save-dev<\/code><\/pre>\n<p>A continuaci\u00f3n, puedes probar el mismo componente utilizando este enfoque 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>Eliminaci\u00f3n de deprecaciones en React DOM<\/h2>\n<p>React 19 ha introducido varios cambios importantes en React DOM, eliminando m\u00e9todos que hab\u00edan sido marcados como deprecados.\u00a0 Esta secci\u00f3n describe estos cambios y te gu\u00eda para actualizar tu c\u00f3digo relacionado con el DOM.<\/p>\n<h3>1. Eliminaci\u00f3n de la API react-dom\/test-utils<\/h3>\n<p>La API <code><a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">react-dom\/test-utils<\/a><\/code>tambi\u00e9n se eliminar\u00e1 en React 19. Esto afecta a la forma de escribir pruebas para nuestros componentes React. En concreto, la utilidad <code>act<\/code> se ha trasladado de <code>react-dom\/test-utils<\/code> al paquete <code>react<\/code>.<\/p>\n<p>Adem\u00e1s, <a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\">se han eliminado<\/a> la mayor\u00eda de las utilidades de <code>react-dom\/test-utils<\/code>. A continuaci\u00f3n te explicamos c\u00f3mo adaptar tus pruebas para que se ajusten a estos cambios.<\/p>\n<p>La utilidad <code>act<\/code> es esencial para garantizar que todas las actualizaciones relacionadas con tus pruebas se han procesado y aplicado al DOM. En React 19, debes importar <code>act<\/code> directamente de <code>react<\/code> en lugar de <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>Para ayudarte a pasar de utilizar <code>react-dom\/test-utils<\/code> a las nuevas importaciones, puedes utilizar el siguiente 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>El equipo de React tambi\u00e9n recomienda migrar tus pruebas a la React Testing Library para disfrutar de una experiencia de pruebas moderna y bien soportada. Aqu\u00ed tienes algunos casos de uso comunes y c\u00f3mo actualizarlos.<\/p>\n<p>Se eliminar\u00e1 la utilidad <code>renderIntoDocument<\/code>. Puedes sustituirla por <code>render<\/code> desde <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>Del mismo modo, se eliminar\u00e1 la utilidad <code>Simulate<\/code> para simular eventos. En su lugar, debes utilizar <code>fireEvent<\/code> de <code>@testing-library\/react<\/code>, que env\u00eda un evento real sobre el 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>Ten en cuenta que <code>fireEvent<\/code> env\u00eda un evento real, lo que significa que interact\u00faa con el elemento de forma m\u00e1s natural que los eventos sint\u00e9ticos creados por <code>Simulate<\/code>. Para comprender correctamente la biblioteca de pruebas de React, lee su <a href=\"https:\/\/testing-library.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n<\/a>.<\/p>\n<h3>2. Eliminaci\u00f3n de la API findDOMNode<\/h3>\n<p>Otro cambio significativo que llega a React 19 es la eliminaci\u00f3n de <code>ReactDOM.findDOMNode<\/code>, que fue <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html#deprecations-in-strictmode\">deprecado\u00a0en React 16.6.0<\/a>.<\/p>\n<p>Esta funci\u00f3n se utilizaba para acceder al nodo DOM subyacente de un componente React, pero ten\u00eda <a href=\"https:\/\/legacy.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\" target=\"_blank\" rel=\"noopener noreferrer\">varios inconvenientes<\/a>, como ser lenta de ejecutar, fr\u00e1gil a la refactorizaci\u00f3n y romper los niveles de abstracci\u00f3n.<\/p>\n<p>En su lugar, debes utilizar las <a href=\"https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs\" target=\"_blank\" rel=\"noopener noreferrer\">referencias DOM<\/a>, que proporcionan una forma m\u00e1s fiable y eficiente de interactuar con los elementos DOM en tus componentes React.<\/p>\n<p>Aqu\u00ed tienes un ejemplo de uso de <code>findDOMNode<\/code> para seleccionar el texto de un campo de entrada cuando se monta el componente:<\/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>Para actualizar este c\u00f3digo para React 19, sustituye <code>findDOMNode<\/code> por un <code>ref<\/code>. Este cambio hace que el c\u00f3digo sea m\u00e1s robusto y lo alinea con las pr\u00e1cticas modernas de 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. Eliminaci\u00f3n de la API de renderizado<\/h3>\n<p>Con React 19, se eliminar\u00e1 <code>ReactDOM.render<\/code>. Este fue <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\">deprecado en React en React 18.0.0<\/a> en favor de la API <code>createRoot<\/code> de <code>react-dom\/client<\/code>, que proporciona una forma m\u00e1s eficiente y moderna de inicializar y renderizar aplicaciones React. Este cambio forma parte del esfuerzo continuo de React para optimizar y agilizar la biblioteca.<\/p>\n<p>En una configuraci\u00f3n t\u00edpica de WordPress, puedes tener un bloque personalizado o un plugin que inicialice una aplicaci\u00f3n React cuando el DOM est\u00e9 listo. Antes utilizabas <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, debes utilizar <code>createRoot<\/code> para inicializar y renderizar tu aplicaci\u00f3n 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>Para ayudarte a pasar de utilizar <code>ReactDOM.render<\/code> a la API <code>createRoot<\/code> desde <code>react-dom\/client<\/code>, puedes utilizar el siguiente 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. Eliminaci\u00f3n de la API unmountComponentAtNode<\/h3>\n<p>React 19 tambi\u00e9n elimina el m\u00e9todo <code>ReactDOM.unmountComponentAtNode<\/code>, que fue <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\">deprecado en React 18.0.0.<\/a> Este m\u00e9todo se utilizaba para desmontar un componente React del DOM.<\/p>\n<p>En React 19, debes migrar al uso del m\u00e9todo <code>root.unmount()<\/code>, que est\u00e1 m\u00e1s alineado con la API actualizada para crear y renderizar aplicaciones React.<\/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>Para ayudarte a pasar de utilizar <code>unmountComponentAtNode<\/code> a <code>root.unmount<\/code>, puedes utilizar el siguiente 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. Eliminaci\u00f3n de la API hydrate<\/h3>\n<p>ReactDOM.hydrate fue <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">deprecado en React 18<\/a> y se eliminar\u00e1 por completo en React 19.<\/p>\n<p>El nuevo m\u00e9todo de la API de cliente DOM de React, <code>hydrateRoot<\/code>, sustituye a <code>ReactDOM.hydrate<\/code>, proporcionando una forma m\u00e1s eficiente y moderna de activar y hacer interactivas las aplicaciones React renderizadas en el servidor.<\/p>\n<p>En un contexto WordPress, podr\u00edas utilizar la renderizaci\u00f3n del lado del servidor (SSR) para entregar el contenido HTML inicial y conseguir cargas de p\u00e1gina m\u00e1s r\u00e1pidas. Para activar este contenido y convertirlo en una aplicaci\u00f3n React interactiva, anteriormente usar\u00edas <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, debes utilizar <code>hydrateRoot<\/code> desde <code>react-dom\/client<\/code> para la activaci\u00f3n del contenido:<\/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>Para ayudarte a cambiar de <code>ReactDOM.hydrate<\/code> a <code>ReactDOMClient.hydrateRoot<\/code>, puedes utilizar el siguiente 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>Eliminados tipos TypeScript deprecados<\/h2>\n<p>Los desarrolladores de WordPress suelen utilizar TypeScript para a\u00f1adir seguridad de tipos y mejorar la calidad del c\u00f3digo en los componentes de React. Con React 19, se han eliminado varios tipos TypeScript deprecaddos o se han reubicado en paquetes m\u00e1s relevantes.<\/p>\n<p>Comprender estos cambios es crucial para garantizar que tu c\u00f3digo base siga siendo robusto y compatible con la \u00faltima versi\u00f3n de React.<\/p>\n<p>Para facilitar la transici\u00f3n, el equipo de React ha creado una herramienta llamada <code><a href=\"https:\/\/github.com\/eps1lon\/types-react-codemod\/\" target=\"_blank\" rel=\"noopener noreferrer\">types-react-codemod<\/a><\/code>que puede actualizar autom\u00e1ticamente tu c\u00f3digo base para gestionar estos cambios.<\/p>\n<p>Para utilizarla, ejecuta el siguiente comando codemod, que incluye varias transformaciones para actualizar los tipos obsoletos.<\/p>\n<pre><code class=\"language-bash\">npx types-react-codemod@latest preset-19 .\/path-to-app<\/code><\/pre>\n<p>La herramienta tambi\u00e9n ofrece un modo interactivo en el que puedes elegir transformaciones espec\u00edficas para aplicarlas:<\/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>Veamos algunos cambios clave con ejemplos.<\/p>\n<h3>1. Limpieza de referencias (refs) requerida<\/h3>\n<p>Con React 19, las funciones de limpieza de <code>ref<\/code> mejoran la seguridad de tipos al obligar a realizar retornos expl\u00edcitos en los callbacks <code>ref<\/code>. Los retornos impl\u00edcitos pueden hacer que TypeScript malinterprete el valor de retorno.<\/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 requiere un argumento<\/h3>\n<p>Antes, <code>useRef<\/code> pod\u00eda invocarse sin argumentos, lo que pod\u00eda dar lugar a problemas tipogr\u00e1ficos. En React 19, <code>useRef<\/code> requiere un argumento para garantizar que las refs sean siempre mutables.<\/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. Cambios en el tipo TypeScript de ReactElement<\/h3>\n<p>El tipo por defecto para <code>ReactElement<\/code> props ha cambiado de <code>any<\/code> a <code>unknown<\/code>, mejorando la seguridad de tipos al requerir un manejo expl\u00edcito de los tipos desconocidos.<\/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>Si tu c\u00f3digo se basaba en <code>any<\/code>, debes actualizarlo para manejar <code>unknown<\/code> expl\u00edcitamente o convertirlo a <code>any<\/code>.<\/p>\n<h2>Resumen<\/h2>\n<p>Como desarrolladores de WordPress, es crucial estar al d\u00eda de los \u00faltimos avances de React. Esta gu\u00eda te asegura que comprendes los distintos cambios que llegan a React para que puedas aplicarlos a tus proyectos de WordPress.<\/p>\n<p>Un \u00faltimo dato: Con React 19, ser\u00e1 necesaria la nueva transformaci\u00f3n JSX. La buena noticia es que <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/06\/jsx-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">ya viene con WordPress 6.6<\/a>. Si la nueva transformaci\u00f3n no est\u00e1 activada, ver\u00e1s esta advertencia:<\/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>Lo \u00fanico que tienes que hacer es dejar de utilizar las importaciones de React para las transformaciones JSX, pues ya no son necesarias.<\/p>\n<p><em>\u00bfNos hemos dejado algo? \u00a1Comp\u00e1rtelo con nosotros en la secci\u00f3n de comentarios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como desarrolladores de WordPress, a menudo integramos componentes React personalizados en nuestros temas y plugins para crear interfaces de usuario din\u00e1micas y con capacidad de respuesta. &#8230;<\/p>\n","protected":false},"author":287,"featured_media":75649,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1321],"class_list":["post-75648","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>Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6 - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.\" \/>\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\/es\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6\" \/>\n<meta property=\"og:description\" content=\"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T07:30:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-11T13:52:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6\",\"datePublished\":\"2024-07-05T07:30:41+00:00\",\"dateModified\":\"2024-07-11T13:52:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/\"},\"wordCount\":2364,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/\",\"name\":\"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6 - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"datePublished\":\"2024-07-05T07:30:41+00:00\",\"dateModified\":\"2024-07-11T13:52:22+00:00\",\"description\":\"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6 - Kinsta\u00ae","description":"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.","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\/es\/blog\/react-19-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6","og_description":"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.","og_url":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-07-05T07:30:41+00:00","article_modified_time":"2024-07-11T13:52:22+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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":"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6","datePublished":"2024-07-05T07:30:41+00:00","dateModified":"2024-07-11T13:52:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/"},"wordCount":2364,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/","name":"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6 - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","datePublished":"2024-07-05T07:30:41+00:00","dateModified":"2024-07-11T13:52:22+00:00","description":"Descubre las principales actualizaciones, consejos de compatibilidad y buenas pr\u00e1cticas para garantizar una transici\u00f3n fluida y un mejor rendimiento de tu sitio web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/react-19-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/es\/secciones\/react\/"},{"@type":"ListItem","position":3,"name":"Preparaci\u00f3n para React 19: gu\u00eda para usuarios de WordPress 6.6"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/75648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=75648"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/75648\/revisions"}],"predecessor-version":[{"id":75740,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/75648\/revisions\/75740"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/75648\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/75649"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=75648"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=75648"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=75648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}