What is a createLegacyRoot in react?

Question

I'm trying to replicate the same example as the react doc for context section, combined with react hook, but react devtool informs that my context is rendered by createLegacyRoot() from react-dom@17.0.2. It doesn't have any functionality issue, but I just wonder why it is legacy, is there any new way for creating context which is going to be proposed.

Here is what I'm doing.

const ThemeContext = React.createContext()

function ContextApp() {
  const [theme, setTheme] = React.useState('light')

  return (
    <ThemeContext.Provider value={[theme, setTheme]}>
      <ThemeSwitcherUseContext />
      <ThemeInformationClass />
      <ThemeInformationOldStyleConsumer />
    </ThemeContext.Provider>
  )
}


const ThemeSwitcherUseContext = () => {
  const [theme, setTheme] = React.useContext(ThemeContext)
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Switch to {theme === 'light' ? 'dark' : 'light'}
    </button>
  )
}

class ThemeInformationClass extends React.Component {
  static contextType = ThemeContext
  render() {
    return <div>class Theme="{this.context[0]}"</div>
  }
}

const ThemeInformationOldStyleConsumer = () => (
  <ThemeContext.Consumer>
    {([theme]) => <div>function Theme="{theme}"</div>}
  </ThemeContext.Consumer>
)

Answer 1

This refers to concurrent mode that will be launching with React 18, the new syntax is

ReactDOM.createRoot(rootNode).render(<App />);

https://reactjs.org/docs/concurrent-mode-reference.html