<p dir="auto">In React 0.12.0 if you attempt to use this.key inside a react component, it is <code class="notranslate">undefined</code></p>
<p dir="auto">Simple test case here: <a href="http://jsfiddle.net/jg2pd4ob/2/" rel="nofollow">http://jsfiddle.net/jg2pd4ob/2/</a></p>
<p dir="auto">In 0.11.x you could access this value via <code class="notranslate">this.props.key</code> which has been removed.</p>
<p dir="auto">React version: 18.0.0</p>
<p dir="auto">Root Component <code class="notranslate">App.tsx</code></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';
import theme from './theme';
import {ThemeProvider} from '@mui/material/styles';

interface AppProps {

}

const App: React.FC&lt;AppProps&gt; = () =&gt; {

  console.log(&quot;is load&quot;);

  return (
    &lt;ThemeProvider theme={theme}&gt;
      &lt;&gt;
        Hello world!
      &lt;/&gt;
    &lt;/ThemeProvider&gt;
  );
}

export default App;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">theme</span> <span class="pl-k">from</span> <span class="pl-s">'./theme'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">ThemeProvider</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@mui/material/styles'</span><span class="pl-kos">;</span>

<span class="pl-k">interface</span> <span class="pl-smi">AppProps</span> <span class="pl-kos">{</span>

<span class="pl-kos">}</span>

<span class="pl-k">const</span> <span class="pl-smi">App</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">FC</span><span class="pl-kos">&lt;</span><span class="pl-smi">AppProps</span><span class="pl-kos">&gt;</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>

  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"is load"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-kos">&lt;</span><span class="pl-smi">ThemeProvider</span><span class="pl-kos"></span> <span class="pl-s1">theme</span><span class="pl-c1">=</span><span class="pl-kos">{</span>theme<span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-c1">&gt;</span>
        <span class="pl-smi">Hello</span><span class="pl-kos"></span> <span class="pl-s1">world</span><span class="pl-c1">!</span>
      <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>&gt;</span><span class="pl-c1"></span>
    <span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>ThemeProvider&gt;</span><span class="pl-c1"></span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-smi">App</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">config webpack:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');

module.exports = {
  entry: &quot;./src/index.tsx&quot;,
  output: {
    filename: &quot;bundle.js&quot;,
    path: path.join(__dirname, &quot;./dist&quot;)
  },

  resolve: {
    extensions: [
      &quot;.ts&quot;, &quot;.tsx&quot;, &quot;.js&quot;, &quot;.jsx&quot;, &quot;.json&quot;
    ]
  },

  devtool: &quot;eval&quot;,

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: &quot;babel-loader&quot;,
        exclude: /node_modules/
      },
      {
        test: /\.css/,
        use: [
          &quot;style-loader&quot;,
          &quot;css-loader&quot;
        ]
      }
    ]
  }
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-s">"./src/index.tsx"</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">"bundle.js"</span><span class="pl-kos">,</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">"./dist"</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span>
      <span class="pl-s">".ts"</span><span class="pl-kos">,</span> <span class="pl-s">".tsx"</span><span class="pl-kos">,</span> <span class="pl-s">".js"</span><span class="pl-kos">,</span> <span class="pl-s">".jsx"</span><span class="pl-kos">,</span> <span class="pl-s">".json"</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>

  <span class="pl-c1">devtool</span>: <span class="pl-s">"eval"</span><span class="pl-kos">,</span>

  <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>tsx?<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-s">"babel-loader"</span><span class="pl-kos">,</span>
        <span class="pl-c1">exclude</span>: <span class="pl-pds"><span class="pl-c1">/</span>node_modules<span class="pl-c1">/</span></span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-kos">[</span>
          <span class="pl-s">"style-loader"</span><span class="pl-kos">,</span>
          <span class="pl-s">"css-loader"</span>
        <span class="pl-kos">]</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I've try render root component from <code class="notranslate">index.tsx</code> with:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import {render} from 'react-dom';

import App from './App'
import &quot;normalize.css&quot;;

render(
  &lt;App /&gt;,
  document.querySelector(&quot;main&quot;)
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">render</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-smi">App</span> <span class="pl-k">from</span> <span class="pl-s">'./App'</span>
<span class="pl-k">import</span> <span class="pl-s">"normalize.css"</span><span class="pl-kos">;</span>

<span class="pl-en">render</span><span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-smi">App</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
  <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"main"</span><span class="pl-kos">)</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I've get error at browser console:</p>
<blockquote>
<p dir="auto">Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: <a href="https://reactjs.org/link/switch-to-createroot" rel="nofollow">https://reactjs.org/link/switch-to-createroot</a></p>
</blockquote>
<p dir="auto">Also i've read <a href="https://reactjs.org/link/switch-to-createroot" rel="nofollow">switch-to-createroot</a> and i've try render root component with:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react';
import {createRoot} from 'react-dom/client';

import App from './App'

import &quot;normalize.css&quot;;

const container = document.querySelector(&quot;main&quot;);
const root = createRoot(container!);

root.render(
  &lt;React.StrictMode&gt;
    &lt;App /&gt;
  &lt;/React.StrictMode&gt;
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-s1">createRoot</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom/client'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-smi">App</span> <span class="pl-k">from</span> <span class="pl-s">'./App'</span>

<span class="pl-k">import</span> <span class="pl-s">"normalize.css"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">container</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">querySelector</span><span class="pl-kos">(</span><span class="pl-s">"main"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">root</span> <span class="pl-c1">=</span> <span class="pl-en">createRoot</span><span class="pl-kos">(</span><span class="pl-s1">container</span><span class="pl-c1">!</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">root</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span>
  <span class="pl-kos">&lt;</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">StrictMode</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-smi">App</span> <span class="pl-c1">/</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">StrictMode</span><span class="pl-kos">&gt;</span><span class="pl-s1"></span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">This work but in my browser console for my <code class="notranslate">App.tsx</code> component now i get two times log <code class="notranslate">is load</code><br>
and if i add local state at component and update state render are duplicate.</p>
<p dir="auto">By going back to the old way of rendering the root component, the problem of multiple renders is solved, but I keep the error message.<br>
How fix it?</p>
<p dir="auto">Browser Microsoft Edge:<br>
<code class="notranslate">Version 100.0.1185.39 (Official build) (64-bit)</code></p>
<p dir="auto">package.json:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;assets&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;build:prod&quot;: &quot;webpack --config ./webpack.config.js --mode production&quot;,
    &quot;build:dev&quot;: &quot;webpack --config ./webpack.config.js --mode development --watch&quot;
  },
  &quot;keywords&quot;: [],
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;devDependencies&quot;: {
    &quot;@babel/preset-react&quot;: &quot;^7.16.7&quot;,
    &quot;@babel/preset-typescript&quot;: &quot;^7.16.7&quot;,
    &quot;@emotion/react&quot;: &quot;^11.9.0&quot;,
    &quot;@emotion/styled&quot;: &quot;^11.8.1&quot;,
    &quot;@mui/icons-material&quot;: &quot;^5.6.1&quot;,
    &quot;@mui/material&quot;: &quot;^5.6.1&quot;,
    &quot;@types/react&quot;: &quot;^18.0.5&quot;,
    &quot;@types/react-dom&quot;: &quot;^18.0.0&quot;,
    &quot;babel-loader&quot;: &quot;^8.2.4&quot;,
    &quot;css-loader&quot;: &quot;^6.7.1&quot;,
    &quot;normalize.css&quot;: &quot;^8.0.1&quot;,
    &quot;react&quot;: &quot;^18.0.0&quot;,
    &quot;react-dom&quot;: &quot;^18.0.0&quot;,
    &quot;style-loader&quot;: &quot;^3.3.1&quot;,
    &quot;webpack&quot;: &quot;^5.72.0&quot;,
    &quot;webpack-cli&quot;: &quot;^4.9.2&quot;
  }
}
"><pre class="notranslate">{
  <span class="pl-ent">"name"</span>: <span class="pl-s"><span class="pl-pds">"</span>assets<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"version"</span>: <span class="pl-s"><span class="pl-pds">"</span>1.0.0<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"description"</span>: <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>,
  <span class="pl-ent">"main"</span>: <span class="pl-s"><span class="pl-pds">"</span>index.js<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"build:prod"</span>: <span class="pl-s"><span class="pl-pds">"</span>webpack --config ./webpack.config.js --mode production<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"build:dev"</span>: <span class="pl-s"><span class="pl-pds">"</span>webpack --config ./webpack.config.js --mode development --watch<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"keywords"</span>: [],
  <span class="pl-ent">"author"</span>: <span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>,
  <span class="pl-ent">"license"</span>: <span class="pl-s"><span class="pl-pds">"</span>ISC<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"devDependencies"</span>: {
    <span class="pl-ent">"@babel/preset-react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.16.7<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@babel/preset-typescript"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.16.7<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@emotion/react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^11.9.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@emotion/styled"</span>: <span class="pl-s"><span class="pl-pds">"</span>^11.8.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@mui/icons-material"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.6.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@mui/material"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.6.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@types/react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^18.0.5<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@types/react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^18.0.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^8.2.4<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"css-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.7.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"normalize.css"</span>: <span class="pl-s"><span class="pl-pds">"</span>^8.0.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^18.0.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^18.0.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"style-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.3.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.72.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack-cli"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.9.2<span class="pl-pds">"</span></span>
  }
}
</pre></div>