{"id":68864,"date":"2024-07-05T04:33:36","date_gmt":"2024-07-05T07:33:36","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=68864&#038;preview=true&#038;preview_id=68864"},"modified":"2024-07-12T07:21:45","modified_gmt":"2024-07-12T10:21:45","slug":"react-19-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/","title":{"rendered":"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6"},"content":{"rendered":"<p>Como <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">desenvolvedores de WordPress<\/a>, geralmente integramos componentes <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a> personalizados em nossos <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">temas<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/topicos\/plugins-wordpress\/\">plugins<\/a> para criar interfaces de usu\u00e1rio din\u00e2micas e responsivas.<\/p>\n<p>Com o <a href=\"https:\/\/react.dev\/blog\/2024\/04\/25\/react-19\" target=\"_blank\" rel=\"noopener noreferrer\">iminente lan\u00e7amento do React 19<\/a>, \u00e9 fundamental preparar-se para mudan\u00e7as e descontinua\u00e7\u00f5es que podem\u00a0<span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>impactar<\/span> <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>nossas bases de c\u00f3digo existentes. O <\/span><a style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-6\/\" data-darkreader-inline-bgcolor>WordPress 6.6<\/a><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>, que ser\u00e1 lan\u00e7ado em 16 de julho, inclui o React 18.3. Essa vers\u00e3o \u00e9 quase id\u00eantica ao 18.2, mas adiciona avisos sobre recursos d<\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>escontinuados<\/span> <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>para ajud\u00e1-lo a se preparar para o React 19.<\/span><\/p>\n<p>\u00c9 essencial abordar essas descontinua\u00e7\u00f5es para garantir a compatibilidade com o React 19, e ignor\u00e1-las pode levar a bugs ou problemas em seus <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">blocos<\/a>, plugins ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/tema-wordpress-react\/\">temas<\/a> personalizados quando o React 19 for lan\u00e7ado e inclu\u00eddo no WordPress.<\/p>\n<p>Este artigo descreve cada descontinua\u00e7\u00e3o, fornece exemplos de c\u00f3digo e orienta voc\u00ea na substitui\u00e7\u00e3o de recursos descontinuados para manter a funcionalidade sem problemas.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Para ajudar na atualiza\u00e7\u00e3o, a equipe do React trabalhou com a equipe do <a href=\"http:\/\/codemod.com\" target=\"_blank\" rel=\"noopener noreferrer\">Codemod<\/a> para publicar codemods que atualizar\u00e3o automaticamente seu c\u00f3digo para muitas das novas APIs e padr\u00f5es do React 19.<\/p>\n<p>Todos os codemods est\u00e3o dispon\u00edveis no <a href=\"https:\/\/github.com\/reactjs\/react-codemod\" target=\"_blank\" rel=\"noopener noreferrer\">reposit\u00f3rio react-codemod<\/a> no GitHub. Al\u00e9m disso, anexaremos o comando codemod de cada descontinua\u00e7\u00e3o (se dispon\u00edvel) para ajudar voc\u00ea a atualizar automaticamente seu 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>Descontinua\u00e7\u00f5es removidas no React<\/h2>\n<p>V\u00e1rias APIs e recursos descontinuados foram removidos para simplificar a biblioteca do React e incentivar as pr\u00e1ticas recomendadas. Esta se\u00e7\u00e3o aborda as principais mudan\u00e7as e como atualizar seu c\u00f3digo de acordo com elas.<\/p>\n<h3>1. Remo\u00e7\u00e3o do defaultProps para componentes de fun\u00e7\u00e3o<\/h3>\n<p>O React 19 remover\u00e1 o <code>defaultProps<\/code> para componentes de fun\u00e7\u00e3o em favor dos par\u00e2metros padr\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\">ES6<\/a>. De acordo com a <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/07\/preparation-for-react-19-upgrade\/\" target=\"_blank\" rel=\"noopener noreferrer\">equipe WordPress<\/a>, essa descontinua\u00e7\u00e3o \u00e9 mais comumente usada em plugins e temas.<\/p>\n<p>Como desenvolvedor WordPress, voc\u00ea poderia usar <code>defaultProps<\/code> para fornecer valores padr\u00e3o para props em seus componentes de fun\u00e7\u00e3o, garantindo que os componentes se comportem corretamente mesmo que certos props n\u00e3o sejam passados.<\/p>\n<p>O seu c\u00f3digo atual com <code>defaultProps<\/code>\u00a0pode se assemelhar a este:<\/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>Neste exemplo, um componente <code>CustomButton<\/code> tem valores padr\u00e3o <code>label<\/code> e <code>color<\/code> fornecidos por <code>defaultProps<\/code>. Com o React 19, isso gerar\u00e1 um erro de aviso, solicitando que voc\u00ea use par\u00e2metros padr\u00e3o ES6.<\/p>\n<p>Aqui est\u00e1 o c\u00f3digo atualizado com os par\u00e2metros padr\u00e3o 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 os par\u00e2metros padr\u00e3o ES6, os valores padr\u00e3o agora est\u00e3o diretamente na assinatura da fun\u00e7\u00e3o, tornando o c\u00f3digo mais f\u00e1cil de ler e manter.<\/p>\n<h3>2. Remo\u00e7\u00e3o do propTypes para componentes de fun\u00e7\u00e3o<\/h3>\n<p>O recurso <code>propTypes<\/code> foi <a href=\"https:\/\/legacy.reactjs.org\/blog\/2017\/04\/07\/react-v15.5.0.html#new-deprecation-warnings\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuado no React 15.5.0<\/a> e agora ser\u00e1 completamente removido do pacote do React na vers\u00e3o 19. Se voc\u00ea estiver usando <code>propTypes<\/code>, \u00e9 recomend\u00e1vel migrar para <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-typescript\/\">TypeScript<\/a> ou outra solu\u00e7\u00e3o de verifica\u00e7\u00e3o de tipos.<\/p>\n<p>Voc\u00ea pode estar usando o <code>propTypes<\/code> para validar as propriedades passadas para os componentes da fun\u00e7\u00e3o para garantir que recebam os tipos e valores corretos. Por exemplo:<\/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>Hoje voc\u00ea pode come\u00e7ar a usar o TypeScript para essas verifica\u00e7\u00f5es de 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>Para ajud\u00e1-lo a mudar do <code>propTypes<\/code> para TypeScript, voc\u00ea pode usar o seguinte 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. Remo\u00e7\u00e3o do Legacy Context (contextTypes e getChildContext)<\/h3>\n<p>Dada a natureza de longa dura\u00e7\u00e3o de muitos plugins e bases de c\u00f3digo no WordPress, voc\u00ea ainda pode estar usando as APIs legadas <code>contextTypes<\/code> e <code>getChildContext<\/code> em seus componentes de classe. Essas APIs eram usadas para passar dados de um componente principal para seus descendentes sem passar explicitamente as propriedades em cada n\u00edvel.<\/p>\n<p>No entanto, \u00e9 importante observar que o Legacy Context foi <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuado no React 16.6.0<\/a> e ser\u00e1 removido no React v19. Essa mudan\u00e7a visa tornar o React um pouco menor e mais r\u00e1pido, pois a API Legacy Context tinha bugs sutis que facilmente passavam despercebidos.<\/p>\n<p>O m\u00e9todo legado foi substitu\u00eddo pela nova API <code>contextType<\/code>.<\/p>\n<p>Aqui est\u00e1 um exemplo de como voc\u00ea pode estar usando a API Context descontinuada em um plugin WordPress para passar configura\u00e7\u00f5es globais, como o t\u00edtulo do site, de um componente principal para um componente filho sem perfura\u00e7\u00e3o de props:<\/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>Em contraste, a abordagem moderna usa o m\u00e9todo <code>createContext<\/code>. Esse \u00e9 o m\u00e9todo que voc\u00ea deve adotar ao se preparar para o 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. Remo\u00e7\u00e3o de refs de string<\/h3>\n<p>O uso de refs de string j\u00e1 foi uma maneira comum de acessar um elemento DOM em componentes React. No entanto, elas foram consideradas <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/03\/27\/update-on-async-rendering.html\" target=\"_blank\" rel=\"noopener noreferrer\">legadas desde o React 16.3.0<\/a> e ser\u00e3o removidas na vers\u00e3o 19.<\/p>\n<p>Embora os refs de string fossem simples, tinham <a href=\"https:\/\/github.com\/facebook\/react\/issues\/1373\" target=\"_blank\" rel=\"noopener noreferrer\">v\u00e1rios problemas<\/a>, como poss\u00edveis conflitos de nomenclatura e falta de flexibilidade.<\/p>\n<p>Considere um exemplo de uso de refs de string em um bloco personalizado do WordPress. Imagine que voc\u00ea tenha um bloco personalizado do Gutenberg que inclua um campo de entrada e queira que o campo de entrada seja focalizado automaticamente quando o bloco for adicionado ao editor. Veja como voc\u00ea poderia ter feito isso usando refs de string:<\/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 se preparar para o React 19, voc\u00ea deve substituir os refs de string pelo callback <code>refs<\/code> ou pela API <code>React.createRef<\/code>. Aqui est\u00e1 o mesmo exemplo usando um 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 ajud\u00e1-lo a passar do uso de refs de string para o callback <code>ref<\/code>, voc\u00ea pode usar o seguinte 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. Remo\u00e7\u00e3o das f\u00e1bricas de padr\u00e3o de m\u00f3dulo<\/h3>\n<p>Outro <a href=\"https:\/\/legacy.reactjs.org\/blog\/2019\/08\/08\/react-v16.9.0.html#deprecating-module-pattern-factories\" target=\"_blank\" rel=\"noopener noreferrer\">recurso descontinuado<\/a> que ser\u00e1 removido no React 19 s\u00e3o as <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>f\u00e1bricas de padr\u00e3o de m\u00f3dulo.<\/span> <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>Esse padr\u00e3o era raramente usado e fazia com que o React\u00a0<\/span>fosse ligeiramente maior e mais lento do que o necess\u00e1rio.<\/p>\n<p>As f\u00e1bricas de padr\u00e3o de m\u00f3dulo permitiam que os desenvolvedores criassem componentes de maneira menos convencional. Aqui est\u00e1 um exemplo de como voc\u00ea pode estar usando isso:<\/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>Nesse padr\u00e3o, o <code>SettingsPanelFactory<\/code> retorna um objeto usando um m\u00e9todo <code>render<\/code> em vez de retornar JSX diretamente.<\/p>\n<p>Para estar em conformidade com o React 19, voc\u00ea deve migrar as f\u00e1bricas de m\u00f3dulos para fun\u00e7\u00f5es regulares que retornam JSX diretamente. Veja um exemplo atualizado:<\/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. Remo\u00e7\u00e3o da API createFactory<\/h3>\n<p>No React 19, <code>React.createFactory<\/code> est\u00e1 sendo removido. Esse m\u00e9todo era mais comumente usado antes de o <a href=\"https:\/\/kinsta.com\/pt\/blog\/sintaxe-jsx\/\">JSX<\/a> receber amplo suporte. Ele permitia que os desenvolvedores criassem elementos React sem usar a sintaxe JSX.<\/p>\n<p>No entanto, com a preval\u00eancia do JSX, <code>createFactory<\/code> se tornou obsoleto e pode ser substitu\u00eddo por um c\u00f3digo JSX mais simples e leg\u00edvel.<\/p>\n<p>Aqui est\u00e1 um exemplo de uso do <code>createFactory<\/code> para criar um elemento <code>button<\/code>. Isso pode ser parte de um plugin WordPress personalizado que gera dinamicamente elementos <code>button<\/code> com base na entrada do usu\u00e1rio:<\/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 atualizar esse c\u00f3digo para o React 19, substitua <code>createFactory<\/code> por JSX. Essa altera\u00e7\u00e3o torna o c\u00f3digo mais moderno, leg\u00edvel e de f\u00e1cil manuten\u00e7\u00e3o:<\/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. Remo\u00e7\u00e3o do react-test-renderer\/shallow<\/h3>\n<p>O React 19 remove o <code>react-test-renderer\/shallow<\/code> para simplificar os utilit\u00e1rios de teste e incentivar as pr\u00e1ticas recomendadas. No React 18, <code>react-test-renderer\/shallow<\/code> foi atualizado para reexportar <code><a href=\"https:\/\/github.com\/enzymejs\/react-shallow-renderer\" target=\"_blank\" rel=\"noopener noreferrer\">react-shallow-renderer<\/a><\/code>.<\/p>\n<p>Anteriormente, voc\u00ea pode ter usado <code>react-test-renderer\/shallow<\/code> para criar testes de renderiza\u00e7\u00e3o\u00a0<span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>superficial<\/span> <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>para seus componentes React:<\/span><\/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 estar em conformidade com o React 19, voc\u00ea precisa 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>E atualizar seu import:<\/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>A equipe do React recomenda a migra\u00e7\u00e3o para a <a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Testing Library<\/a>, que oferece pr\u00e1ticas de teste mais robustas, concentrando-se em como os usu\u00e1rios interagem com os seus componentes.<\/p>\n<p>Para fazer isso, instale a biblioteca <code><a href=\"https:\/\/www.npmjs.com\/package\/@testing-library\/react\" target=\"_blank\" rel=\"noopener noreferrer\">@testing-library\/react<\/a><\/code> como uma depend\u00eancia de desenvolvimento:<\/p>\n<pre><code class=\"language-bash\">npm install @testing-library\/react --save-dev<\/code><\/pre>\n<p>Em seguida, voc\u00ea pode testar o mesmo componente usando esta abordagem moderna:<\/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>Descontinua\u00e7\u00f5es removidas no React DOM<\/h2>\n<p>O React DOM tamb\u00e9m foi alterado no React 19, com a remo\u00e7\u00e3o de alguns m\u00e9todos descontinuados. Esta se\u00e7\u00e3o descreve essas mudan\u00e7as e orienta voc\u00ea na atualiza\u00e7\u00e3o do c\u00f3digo relacionado ao DOM.<\/p>\n<h3>1. Remo\u00e7\u00e3o da API react-dom\/test-utils<\/h3>\n<p>A API <code><a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">react-dom\/test-utils<\/a><\/code> tamb\u00e9m ser\u00e1 removida no React 19. Isso afeta como escrevemos testes para nossos componentes React. Especificamente, o utilit\u00e1rio <code>act<\/code> foi movido de <code>react-dom\/test-utils<\/code> para o pacote <code>react<\/code>.<\/p>\n<p>Al\u00e9m disso, a maioria dos outros utilit\u00e1rios de <code>react-dom\/test-utils<\/code> <a href=\"https:\/\/react.dev\/warnings\/react-dom-test-utils\" target=\"_blank\" rel=\"noopener noreferrer\">foi removida<\/a>. Veja como voc\u00ea pode adaptar seus testes para se adequar a essas mudan\u00e7as.<\/p>\n<p>O utilit\u00e1rio <code>act<\/code> \u00e9 essencial para garantir que todas as atualiza\u00e7\u00f5es relacionadas aos seus testes tenham sido processadas e aplicadas ao DOM. No React 19, voc\u00ea deve importar <code>act<\/code> diretamente de <code>react<\/code> em vez 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 ajud\u00e1-lo a passar do uso de <code>react-dom\/test-utils<\/code> para os novos imports, voc\u00ea pode usar o seguinte 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>A equipe do React tamb\u00e9m recomenda que voc\u00ea migre seus testes para a React Testing Library para ter uma experi\u00eancia de teste moderna e com bom suporte. Aqui est\u00e3o alguns casos de uso comuns e como atualiz\u00e1-los.<\/p>\n<p>O utilit\u00e1rio <code>renderIntoDocument<\/code> ser\u00e1 removido. Voc\u00ea pode substitu\u00ed-lo por <code>render<\/code> de <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>Da mesma forma, o utilit\u00e1rio <code>Simulate<\/code> para simular eventos ser\u00e1 removido. Em vez disso, voc\u00ea deve usar <code>fireEvent<\/code> de <code>@testing-library\/react<\/code>, que envia um evento real para o 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>Esteja ciente de que o <code>fireEvent<\/code> envia um evento real, o que significa que interage com o elemento de forma mais natural do que os eventos sint\u00e9ticos criados pelo <code>Simulate<\/code>. Para entender corretamente a biblioteca de testes do React, leia sua <a href=\"https:\/\/testing-library.com\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o<\/a>.<\/p>\n<h3>2. Remo\u00e7\u00e3o da API findDOMNode<\/h3>\n<p>Outra mudan\u00e7a significativa chegando ao React 19 \u00e9 a remo\u00e7\u00e3o de <code>ReactDOM.findDOMNode<\/code>, que foi <a href=\"https:\/\/legacy.reactjs.org\/blog\/2018\/10\/23\/react-v-16-6.html#deprecations-in-strictmode\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuada no React 16.6.0<\/a>.<\/p>\n<p>Essa fun\u00e7\u00e3o era usada para acessar o node DOM subjacente de um componente React, mas tinha <a href=\"https:\/\/legacy.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\" target=\"_blank\" rel=\"noopener noreferrer\">v\u00e1rias desvantagens<\/a>, como lentid\u00e3o na execu\u00e7\u00e3o, fragilidade da refatora\u00e7\u00e3o e quebra dos n\u00edveis de abstra\u00e7\u00e3o.<\/p>\n<p>Em vez disso, voc\u00ea deve usar <a href=\"https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs\" target=\"_blank\" rel=\"noopener noreferrer\">DOM refs<\/a>, que fornecem uma maneira mais confi\u00e1vel e eficiente de interagir com elementos DOM em seus componentes React.<\/p>\n<p>Aqui est\u00e1 um exemplo de uso do <code>findDOMNode<\/code> para selecionar o texto em um campo de entrada quando o componente \u00e9 montado:<\/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 atualizar esse c\u00f3digo para o React 19, substitua <code>findDOMNode<\/code> por um <code>ref<\/code>. Essa altera\u00e7\u00e3o torna o c\u00f3digo mais robusto e o alinha com as pr\u00e1ticas modernas do 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. Remo\u00e7\u00e3o da API de renderiza\u00e7\u00e3o<\/h3>\n<p>Com o React 19, <code>ReactDOM.render<\/code> ser\u00e1 removido. Esse m\u00e9todo foi <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuado no React 18.0.0<\/a> em favor da API <code>createRoot<\/code> de <code>react-dom\/client<\/code>, que fornece uma maneira mais eficiente e moderna de inicializar e renderizar aplicativos React. Essa altera\u00e7\u00e3o faz parte do esfor\u00e7o cont\u00ednuo do React para simplificar e otimizar a biblioteca.<\/p>\n<p>Em uma configura\u00e7\u00e3o t\u00edpica de WordPress, voc\u00ea pode ter um bloco personalizado ou um plugin que inicializa um aplicativo React quando o DOM est\u00e1 pronto. Anteriormente, voc\u00ea usaria <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>Com o React 19, voc\u00ea deve usar <code>createRoot<\/code> para inicializar e renderizar seu aplicativo 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 ajud\u00e1-lo a mudar do uso de <code>ReactDOM.render<\/code> para a API <code>createRoot<\/code> de <code>react-dom\/client<\/code>, voc\u00ea pode usar o seguinte 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. Remo\u00e7\u00e3o da API unmountComponentAtNode<\/h3>\n<p>O React 19 tamb\u00e9m remove o m\u00e9todo <code>ReactDOM.unmountComponentAtNode<\/code>, que foi <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuado no React 18.0.0<\/a>. Esse m\u00e9todo era usado para desmontar um componente React do DOM.<\/p>\n<p>No React 19, voc\u00ea deve passar a utilizar o m\u00e9todo <code>root.unmount()<\/code>, que est\u00e1 mais alinhado com a API atualizada para criar e hidratar ra\u00edzes.<\/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 ajud\u00e1-lo a mudar de <code>unmountComponentAtNode<\/code> para <code>root.unmount<\/code>, voc\u00ea pode usar o seguinte 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. Remo\u00e7\u00e3o da API hydrate<\/h3>\n<p>O ReactDOM.hydrate foi <a href=\"https:\/\/react.dev\/blog\/2022\/03\/08\/react-18-upgrade-guide\" target=\"_blank\" rel=\"noopener noreferrer\">descontinuado no React 18<\/a> e ser\u00e1 completamente removido no React 19.<\/p>\n<p>O novo m\u00e9todo da API do cliente React DOM, <code>hydrateRoot<\/code>, substitui o <code>ReactDOM.hydrate<\/code>, fornecendo uma maneira mais eficiente e moderna de hidratar aplicativos React renderizados no servidor.<\/p>\n<p>Em um contexto de WordPress, voc\u00ea poderia usar a renderiza\u00e7\u00e3o do lado do servidor (SSR) para fornecer conte\u00fado HTML inicial para carregamentos de p\u00e1gina mais r\u00e1pidos. Para hidratar esse conte\u00fado em um aplicativo React interativo, anteriormente <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>voc\u00ea usaria <\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>o <\/span><code style=\"font-weight: var(--kmt-sys-typography-body-font-weight)\">ReactDOM.hydrate<\/code><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>:<\/span><\/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>Com o React 19, voc\u00ea deve usar <code>hydrateRoot<\/code> de <code>react-dom\/client<\/code> para hidrata\u00e7\u00e3o:<\/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 ajud\u00e1-lo a passar do <code>ReactDOM.hydrate<\/code> para <code>ReactDOMClient.hydrateRoot<\/code>, voc\u00ea pode usar o seguinte 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>Remo\u00e7\u00e3o de tipos TypeScript descontinuados<\/h2>\n<p>Os desenvolvedores WordPress costumam usar o TypeScript para adicionar seguran\u00e7a de tipos e melhorar a qualidade do c\u00f3digo nos componentes do React. Com o React 19, v\u00e1rios tipos de TypeScript descontinuados foram removidos ou realocados para pacotes mais relevantes.<\/p>\n<p>Entender essas altera\u00e7\u00f5es \u00e9 crucial para garantir que sua base de c\u00f3digo permane\u00e7a robusta e compat\u00edvel com a vers\u00e3o mais recente do React.<\/p>\n<p>Para ajudar na transi\u00e7\u00e3o, a equipe do React forneceu uma ferramenta chamada <code><a href=\"https:\/\/github.com\/eps1lon\/types-react-codemod\/\" target=\"_blank\" rel=\"noopener noreferrer\">types-react-codemod<\/a><\/code>, que pode atualizar automaticamente sua base de c\u00f3digo para lidar com essas altera\u00e7\u00f5es.<\/p>\n<p>Para us\u00e1-la, execute o seguinte comando codemod, que inclui v\u00e1rias transforma\u00e7\u00f5es para atualizar tipos descontinuados.<\/p>\n<pre><code class=\"language-bash\">npx types-react-codemod@latest preset-19 .\/path-to-app<\/code><\/pre>\n<p>A ferramenta tamb\u00e9m oferece um modo interativo no qual voc\u00ea pode escolher transforma\u00e7\u00f5es espec\u00edficas para aplicar:<\/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>Vamos dar uma olhada em algumas das principais altera\u00e7\u00f5es com exemplos.<\/p>\n<h3>1. Exig\u00eancia de limpeza de refs<\/h3>\n<p>Com o React 19, as fun\u00e7\u00f5es de limpeza de <code>ref<\/code> melhoram a seguran\u00e7a de tipos ao exigir retornos expl\u00edcitos em callbacks de <code>ref<\/code>. Retornos impl\u00edcitos podem fazer com que o TypeScript interprete incorretamente o 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. O useRef exige um argumento<\/h3>\n<p>Anteriormente, <code>useRef<\/code> podia ser chamado sem argumentos, o que levava a poss\u00edveis problemas de tipagem. No React 19, <code>useRef<\/code> <span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>requer<\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>\u00a0<\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>um argumento para garantir que os refs sejam sempre <\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>mut\u00e1veis.<\/span><\/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. Altera\u00e7\u00f5es no Tipo TypeScript de ReactElement<\/h3>\n<p>O tipo padr\u00e3o para props de <code>ReactElement<\/code> foi alterado de <code>any<\/code> para <code>unknown<\/code>, melhorando a seguran\u00e7a de tipos ao exigir o tratamento expl\u00edcito de tipos desconhecidos.<\/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 o seu c\u00f3digo dependia do <code>any<\/code>, voc\u00ea deve atualiz\u00e1-lo para lidar explicitamente com <code>unknown<\/code> ou convert\u00ea-lo para <code>any<\/code>.<\/p>\n<h2>Resumo<\/h2>\n<p><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>\u00c9 fundamental que\u00a0<\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>desenvolvedores WordPress <\/span><span style=\"font-weight: var(--kmt-sys-typography-body-font-weight);background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3)\" data-darkreader-inline-bgcolor>se mantenham sempre atualizados <\/span><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" data-darkreader-inline-bgcolor>com os avan\u00e7os do React. Este guia garante que voc\u00ea entenda as v\u00e1rias mudan\u00e7as que est\u00e3o chegando ao React para que possa aplic\u00e1-las aos seus projetos WordPress.<\/span><\/p>\n<p>Uma \u00faltima informa\u00e7\u00e3o: com o React 19, a nova transforma\u00e7\u00e3o JSX ser\u00e1 obrigat\u00f3ria. A boa not\u00edcia \u00e9 que ela <a href=\"https:\/\/make.wordpress.org\/core\/2024\/06\/06\/jsx-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">j\u00e1 vem com o WordPress 6.6<\/a>. Se a nova transforma\u00e7\u00e3o n\u00e3o estiver habilitada, voc\u00ea ver\u00e1 este aviso:<\/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>Tudo o que \u00e9 preciso \u00e9 parar de usar imports do React para transforma\u00e7\u00f5es JSX, pois n\u00e3o s\u00e3o mais necess\u00e1rios.<\/p>\n<p><em>Deixamos passar algo? Compartilhe conosco na se\u00e7\u00e3o de coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como desenvolvedores de WordPress, geralmente integramos componentes React personalizados em nossos temas e plugins para criar interfaces de usu\u00e1rio din\u00e2micas e responsivas. Com o iminente lan\u00e7amento &#8230;<\/p>\n","protected":false},"author":287,"featured_media":68865,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1002],"class_list":["post-68864","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>Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6 - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.\" \/>\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\/pt\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6\" \/>\n<meta property=\"og:description\" content=\"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T07:33:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-12T10:21:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\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\/pt\/blog\/react-19-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6\",\"datePublished\":\"2024-07-05T07:33:36+00:00\",\"dateModified\":\"2024-07-12T10:21:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/\"},\"wordCount\":2378,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/\",\"name\":\"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6 - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"datePublished\":\"2024-07-05T07:33:36+00:00\",\"dateModified\":\"2024-07-12T10:21:45+00:00\",\"description\":\"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6 - Kinsta\u00ae","description":"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.","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\/pt\/blog\/react-19-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6","og_description":"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.","og_url":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-07-05T07:33:36+00:00","article_modified_time":"2024-07-12T10:21:45+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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":"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users-1024x512.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Joel Olawanle","Tempo estimado de leitura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6","datePublished":"2024-07-05T07:33:36+00:00","dateModified":"2024-07-12T10:21:45+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/"},"wordCount":2378,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/","name":"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6 - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","datePublished":"2024-07-05T07:33:36+00:00","dateModified":"2024-07-12T10:21:45+00:00","description":"Conhe\u00e7a as principais atualiza\u00e7\u00f5es, dicas de compatibilidade e pr\u00e1ticas recomendadas para garantir uma transi\u00e7\u00e3o tranquila e um melhor desempenho do site.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/07\/preparing-for-react-19-a-guide-for-wordpress-6.6-users.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/react-19-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/pt\/topicos\/react\/"},{"@type":"ListItem","position":3,"name":"Preparando-se para o React 19: Um Guia para Usu\u00e1rios do WordPress 6.6"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/68864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=68864"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/68864\/revisions"}],"predecessor-version":[{"id":68955,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/68864\/revisions\/68955"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/68864\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/68865"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=68864"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=68864"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=68864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}