When creating an app using create-react-app I get the following error when trying to use hydrate instead of the default .render. Here is the src/index.js file's contents.
import React from 'react';
import ReactDOMServer from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOMServer.createRoot(document.getElementById('root'));
root.hydrate(
<React.StrictMode>
<App />
</React.StrictMode>
);
Running the above code npm start produces the following error
Uncaught TypeError: root.hydrate is not a function
The error is not present if I change the .hydrate back to .render and I am not sure why this is happening.
Thank you @PR7 that worked perfectly.
Please note, as my original file syntax was slightly different (from your example), I have written my "before" and "after" below; in case it can help anyone else.
// Before
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.hydrate(
<React.StrictMode>
<App />
</React.StrictMode>
);
// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = hydrateRoot(container, <App />);
hydratehas been replaced withhydrateRootin React 18.
hydrateRoot(container, element[, options])
You can check for more info about hydrateRoot here : Documentation
// Before React 18
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);
// After React 18+
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.