diff --git a/code/0-starter/package.json b/code/0-starter/package.json
index 153be0f..ec46d19 100644
--- a/code/0-starter/package.json
+++ b/code/0-starter/package.json
@@ -4,8 +4,8 @@
       "build": "snowpack build"
     },
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
+      "react": "^18.0.2",
+      "react-dom": "^18.0.2"
     },
     "devDependencies": {
       "snowpack": "^3.8.8"
diff --git a/code/1-getting-started/end/src/index.jsx b/code/1-getting-started/end/src/index.jsx
index e21a0a5..e68355e 100644
--- a/code/1-getting-started/end/src/index.jsx
+++ b/code/1-getting-started/end/src/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );
diff --git a/code/2-component-data/end/package.json b/code/2-component-data/end/package.json
index 153be0f..042deb1 100644
--- a/code/2-component-data/end/package.json
+++ b/code/2-component-data/end/package.json
@@ -4,8 +4,8 @@
       "build": "snowpack build"
     },
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
     },
     "devDependencies": {
       "snowpack": "^3.8.8"
diff --git a/code/2-component-data/end/src/index.jsx b/code/2-component-data/end/src/index.jsx
index e21a0a5..e68355e 100644
--- a/code/2-component-data/end/src/index.jsx
+++ b/code/2-component-data/end/src/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );
diff --git a/code/2-component-data/start/package.json b/code/2-component-data/start/package.json
index 153be0f..ec46d19 100644
--- a/code/2-component-data/start/package.json
+++ b/code/2-component-data/start/package.json
@@ -4,8 +4,8 @@
       "build": "snowpack build"
     },
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
+      "react": "^18.0.2",
+      "react-dom": "^18.0.2"
     },
     "devDependencies": {
       "snowpack": "^3.8.8"
diff --git a/code/2-component-data/start/src/index.jsx b/code/2-component-data/start/src/index.jsx
index e21a0a5..e68355e 100644
--- a/code/2-component-data/start/src/index.jsx
+++ b/code/2-component-data/start/src/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );
diff --git a/code/3-state-events/end/end/package.json b/code/3-state-events/end/end/package.json
index 153be0f..ec46d19 100644
--- a/code/3-state-events/end/end/package.json
+++ b/code/3-state-events/end/end/package.json
@@ -4,8 +4,8 @@
       "build": "snowpack build"
     },
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
+      "react": "^18.0.2",
+      "react-dom": "^18.0.2"
     },
     "devDependencies": {
       "snowpack": "^3.8.8"
diff --git a/code/3-state-events/end/package.json b/code/3-state-events/end/package.json
index 153be0f..ec46d19 100644
--- a/code/3-state-events/end/package.json
+++ b/code/3-state-events/end/package.json
@@ -4,8 +4,8 @@
       "build": "snowpack build"
     },
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
+      "react": "^18.0.2",
+      "react-dom": "^18.0.2"
     },
     "devDependencies": {
       "snowpack": "^3.8.8"
diff --git a/code/3-state-events/end/src/index.jsx b/code/3-state-events/end/src/index.jsx
index e21a0a5..e68355e 100644
--- a/code/3-state-events/end/src/index.jsx
+++ b/code/3-state-events/end/src/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );
diff --git a/code/3-state-events/start/package.json b/code/3-state-events/start/package.json
index 153be0f..ec46d19 100644
--- a/code/3-state-events/start/package.json
+++ b/code/3-state-events/start/package.json
@@ -4,8 +4,8 @@
       "build": "snowpack build"
     },
     "dependencies": {
-      "react": "^17.0.2",
-      "react-dom": "^17.0.2"
+      "react": "^18.0.2",
+      "react-dom": "^18.0.2"
     },
     "devDependencies": {
       "snowpack": "^3.8.8"
diff --git a/code/3-state-events/start/src/index.jsx b/code/3-state-events/start/src/index.jsx
index e21a0a5..e68355e 100644
--- a/code/3-state-events/start/src/index.jsx
+++ b/code/3-state-events/start/src/index.jsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
-    <App />,
-    document.getElementById('app')
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 );