diff --git a/snippet-template.md b/snippet-template.md
index e198139ba..c6224c3af 100644
--- a/snippet-template.md
+++ b/snippet-template.md
@@ -22,5 +22,7 @@ const ComponentName = props => {
 ```
 
 ```jsx
-ReactDOM.render(<ComponentName />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ComponentName />
+);
 ```
diff --git a/snippets/Accordion.md b/snippets/Accordion.md
index d689acee6..db460a20d 100644
--- a/snippets/Accordion.md
+++ b/snippets/Accordion.md
@@ -73,7 +73,7 @@ const Accordion = ({ defaultIndex, onItemClick, children }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Accordion defaultIndex="1" onItemClick={console.log}>
     <AccordionItem label="A" index="1">
       Lorem ipsum
@@ -81,7 +81,6 @@ ReactDOM.render(
     <AccordionItem label="B" index="2">
       Dolor sit amet
     </AccordionItem>
-  </Accordion>,
-  document.getElementById('root')
+  </Accordion>
 );
 ```
diff --git a/snippets/Alert.md b/snippets/Alert.md
index 315adfe48..2a28a863c 100644
--- a/snippets/Alert.md
+++ b/snippets/Alert.md
@@ -101,8 +101,7 @@ const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <Alert type="info" message="This is info" />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Alert type="info" message="This is info" />
 );
 ```
diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md
index 5a88a2ab8..ae6523af7 100644
--- a/snippets/AutoLink.md
+++ b/snippets/AutoLink.md
@@ -35,8 +35,7 @@ const AutoLink = ({ text }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <AutoLink text="foo bar baz http://example.org bar" />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <AutoLink text="foo bar baz http://example.org bar" />
 );
 ```
diff --git a/snippets/Callto.md b/snippets/Callto.md
index d68aaf23b..99de38c92 100644
--- a/snippets/Callto.md
+++ b/snippets/Callto.md
@@ -20,8 +20,7 @@ const Callto = ({ phone, children }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <Callto phone="+302101234567">Call me!</Callto>,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Callto phone="+302101234567">Call me!</Callto>
 );
 ```
diff --git a/snippets/Carousel.md b/snippets/Carousel.md
index ebea9b3fc..827d85e81 100644
--- a/snippets/Carousel.md
+++ b/snippets/Carousel.md
@@ -55,14 +55,13 @@ const Carousel = ({ carouselItems, ...rest }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Carousel
     carouselItems={[
       <div>carousel item 1</div>,
       <div>carousel item 2</div>,
       <div>carousel item 3</div>
     ]}
-  />,
-  document.getElementById('root')
+  />
 );
 ```
diff --git a/snippets/Collapse.md b/snippets/Collapse.md
index 163cbc7b4..307b87b1a 100644
--- a/snippets/Collapse.md
+++ b/snippets/Collapse.md
@@ -52,11 +52,10 @@ const Collapse = ({ collapsed, children }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Collapse>
     <h1>This is a collapse</h1>
     <p>Hello world!</p>
-  </Collapse>,
-  document.getElementById('root')
+  </Collapse>
 );
 ```
diff --git a/snippets/ControlledInput.md b/snippets/ControlledInput.md
index bd3bf7908..0171a26a9 100644
--- a/snippets/ControlledInput.md
+++ b/snippets/ControlledInput.md
@@ -38,5 +38,7 @@ const Form = () => {
   );
 };
 
-ReactDOM.render(<Form />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Form />
+);
 ```
diff --git a/snippets/CountDown.md b/snippets/CountDown.md
index f445be25f..8d587dc58 100644
--- a/snippets/CountDown.md
+++ b/snippets/CountDown.md
@@ -60,8 +60,7 @@ const CountDown = ({ hours = 0, minutes = 0, seconds = 0 }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <CountDown hours={1} minutes={45} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <CountDown hours={1} minutes={45} />
 );
 ```
diff --git a/snippets/DataList.md b/snippets/DataList.md
index 7fac69e2e..e6a9c7612 100644
--- a/snippets/DataList.md
+++ b/snippets/DataList.md
@@ -20,9 +20,10 @@ const DataList = ({ isOrdered = false, data }) => {
 
 ```jsx
 const names = ['John', 'Paul', 'Mary'];
-ReactDOM.render(<DataList data={names} />, document.getElementById('root'));
-ReactDOM.render(
-  <DataList data={names} isOrdered />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <>
+    <DataList data={names} />
+    <DataList data={names} isOrdered />
+  </>
 );
 ```
diff --git a/snippets/DataTable.md b/snippets/DataTable.md
index 2987336e9..cdc559364 100644
--- a/snippets/DataTable.md
+++ b/snippets/DataTable.md
@@ -36,5 +36,7 @@ const DataTable = ({ data }) => {
 
 ```jsx
 const people = ['John', 'Jesse'];
-ReactDOM.render(<DataTable data={people} />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <DataTable data={people} />
+);
 ```
diff --git a/snippets/FileDrop.md b/snippets/FileDrop.md
index 869bf5a0a..10d9e8191 100644
--- a/snippets/FileDrop.md
+++ b/snippets/FileDrop.md
@@ -101,8 +101,7 @@ const FileDrop = ({ onDrop }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <FileDrop onDrop={console.log} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <FileDrop onDrop={console.log} />
 );
 ```
diff --git a/snippets/LazyLoadImage.md b/snippets/LazyLoadImage.md
index 332a74f68..3529cbfb4 100644
--- a/snippets/LazyLoadImage.md
+++ b/snippets/LazyLoadImage.md
@@ -69,11 +69,10 @@ const LazyLoadImage = ({
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <LazyLoadImage
     src="https://picsum.photos/id/1080/600/600"
     alt="Strawberries"
-  />,
-  document.getElementById('root')
+  />
 );
 ```
diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md
index aabaf740d..ffa2e183b 100644
--- a/snippets/LimitedTextarea.md
+++ b/snippets/LimitedTextarea.md
@@ -40,8 +40,7 @@ const LimitedTextarea = ({ rows, cols, value, limit }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <LimitedTextarea limit={32} value="Hello!" />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <LimitedTextarea limit={32} value="Hello!" />
 );
 ```
diff --git a/snippets/LimitedWordTextarea.md b/snippets/LimitedWordTextarea.md
index 24570c801..e60bf9065 100644
--- a/snippets/LimitedWordTextarea.md
+++ b/snippets/LimitedWordTextarea.md
@@ -57,8 +57,7 @@ const LimitedWordTextarea = ({ rows, cols, value, limit }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <LimitedWordTextarea limit={5} value="Hello there!" />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <LimitedWordTextarea limit={5} value="Hello there!" />
 );
 ```
diff --git a/snippets/Loader.md b/snippets/Loader.md
index 43f3ab069..bc83e8667 100644
--- a/snippets/Loader.md
+++ b/snippets/Loader.md
@@ -64,5 +64,7 @@ const Loader = ({ size }) => {
 ```
 
 ```jsx
-ReactDOM.render(<Loader size={24} />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Loader size={24} />
+);
 ```
diff --git a/snippets/Mailto.md b/snippets/Mailto.md
index 1ed98fcd6..13e00636e 100644
--- a/snippets/Mailto.md
+++ b/snippets/Mailto.md
@@ -24,10 +24,9 @@ const Mailto = ({ email, subject = '', body = '', children }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Mailto email="foo@bar.baz" subject="Hello & Welcome" body="Hello world!">
     Mail me!
-  </Mailto>,
-  document.getElementById('root')
+  </Mailto>
 );
 ```
diff --git a/snippets/MappedTable.md b/snippets/MappedTable.md
index 68b2ed1fa..ac86c9454 100644
--- a/snippets/MappedTable.md
+++ b/snippets/MappedTable.md
@@ -50,8 +50,7 @@ const people = [
   { name: 'Adam', surname: 'Smith', gender: 'male' }
 ];
 const propertyNames = ['name', 'surname', 'age'];
-ReactDOM.render(
-  <MappedTable data={people} propertyNames={propertyNames} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MappedTable data={people} propertyNames={propertyNames} />
 );
 ```
diff --git a/snippets/Modal.md b/snippets/Modal.md
index 51f9d5652..f35461418 100644
--- a/snippets/Modal.md
+++ b/snippets/Modal.md
@@ -151,5 +151,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md
index e6b5276af..4190115fa 100644
--- a/snippets/MultiselectCheckbox.md
+++ b/snippets/MultiselectCheckbox.md
@@ -47,13 +47,12 @@ const MultiselectCheckbox = ({ options, onChange }) => {
 ```jsx
 const options = [{ label: 'Item One' }, { label: 'Item Two' }];
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <MultiselectCheckbox
     options={options}
     onChange={data => {
       console.log(data);
     }}
-  />,
-  document.getElementById('root')
+  />
 );
 ```
diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md
index 30f3edeca..87969e993 100644
--- a/snippets/PasswordRevealer.md
+++ b/snippets/PasswordRevealer.md
@@ -25,5 +25,7 @@ const PasswordRevealer = ({ value }) => {
 ```
 
 ```jsx
-ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <PasswordRevealer />
+);
 ```
diff --git a/snippets/RippleButton.md b/snippets/RippleButton.md
index 0f3612033..b69a630f0 100644
--- a/snippets/RippleButton.md
+++ b/snippets/RippleButton.md
@@ -104,8 +104,7 @@ const RippleButton = ({ children, onClick }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <RippleButton onClick={e => console.log(e)}>Click me</RippleButton>,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <RippleButton onClick={e => console.log(e)}>Click me</RippleButton>
 );
 ```
diff --git a/snippets/Select.md b/snippets/Select.md
index 41aeb56bd..b33789f5f 100644
--- a/snippets/Select.md
+++ b/snippets/Select.md
@@ -38,12 +38,11 @@ const choices = [
   ['coconut', 'Coconut'],
   ['mango', 'Mango'],
 ];
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Select
     values={choices}
     selectedValue="lime"
     onValueChange={val => console.log(val)}
-  />,
-  document.getElementById('root')
+  />
 );
 ```
diff --git a/snippets/Slider.md b/snippets/Slider.md
index a59286027..29d3172a1 100644
--- a/snippets/Slider.md
+++ b/snippets/Slider.md
@@ -34,8 +34,7 @@ const Slider = ({
 ```
 
 ```jsx
-ReactDOM.render(
-  <Slider onValueChange={val => console.log(val)} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Slider onValueChange={val => console.log(val)} />
 );
 ```
diff --git a/snippets/StarRating.md b/snippets/StarRating.md
index f6c9fd3a5..68b0468a6 100644
--- a/snippets/StarRating.md
+++ b/snippets/StarRating.md
@@ -59,5 +59,7 @@ const StarRating = ({ value }) => {
 ```
 
 ```jsx
-ReactDOM.render(<StarRating value={2} />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <StarRating value={2} />
+);
 ```
diff --git a/snippets/Tabs.md b/snippets/Tabs.md
index 3c9adedb0..97ae05662 100644
--- a/snippets/Tabs.md
+++ b/snippets/Tabs.md
@@ -82,7 +82,7 @@ const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Tabs defaultIndex="1" onTabClick={console.log}>
     <TabItem label="A" index="1">
       Lorem ipsum
@@ -90,7 +90,6 @@ ReactDOM.render(
     <TabItem label="B" index="2">
       Dolor sit amet
     </TabItem>
-  </Tabs>,
-  document.getElementById('root')
+  </Tabs>
 );
 ```
diff --git a/snippets/TagInput.md b/snippets/TagInput.md
index cfc323b75..0474414e2 100644
--- a/snippets/TagInput.md
+++ b/snippets/TagInput.md
@@ -116,8 +116,7 @@ const TagInput = ({ tags }) => {
 ```
 
 ```jsx
-ReactDOM.render(
-  <TagInput tags={['Nodejs', 'MongoDB']} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TagInput tags={['Nodejs', 'MongoDB']} />
 );
 ```
diff --git a/snippets/TextArea.md b/snippets/TextArea.md
index 32ed90217..448dd9e5e 100644
--- a/snippets/TextArea.md
+++ b/snippets/TextArea.md
@@ -32,11 +32,10 @@ const TextArea = ({
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <TextArea
     placeholder="Insert some text here..."
     onValueChange={val => console.log(val)}
-  />,
-  document.getElementById('root')
+  />
 );
 ```
diff --git a/snippets/Toggle.md b/snippets/Toggle.md
index 1cc9ac436..8f6338bbb 100644
--- a/snippets/Toggle.md
+++ b/snippets/Toggle.md
@@ -44,5 +44,7 @@ const Toggle = ({ defaultToggled = false }) => {
 ```
 
 ```jsx
-ReactDOM.render(<Toggle />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Toggle />
+);
 ```
diff --git a/snippets/Tooltip.md b/snippets/Tooltip.md
index 2d694d352..38eed8997 100644
--- a/snippets/Tooltip.md
+++ b/snippets/Tooltip.md
@@ -64,10 +64,9 @@ const Tooltip = ({ children, text, ...rest }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Tooltip text="Simple tooltip">
     <button>Hover me!</button>
-  </Tooltip>,
-  document.getElementById('root')
+  </Tooltip>
 );
 ```
diff --git a/snippets/TreeView.md b/snippets/TreeView.md
index 55cc9fec0..09cac0440 100644
--- a/snippets/TreeView.md
+++ b/snippets/TreeView.md
@@ -135,8 +135,7 @@ const data = {
     ipsum: 'primis'
   }
 };
-ReactDOM.render(
-  <TreeView data={data} name="data" />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TreeView data={data} name="data" />
 );
 ```
diff --git a/snippets/UncontrolledInput.md b/snippets/UncontrolledInput.md
index 1ca0be8d4..e3cdde268 100644
--- a/snippets/UncontrolledInput.md
+++ b/snippets/UncontrolledInput.md
@@ -24,12 +24,11 @@ const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
 ```
 
 ```jsx
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <UncontrolledInput
     type="text"
     placeholder="Insert some text here..."
     onValueChange={console.log}
-  />,
-  document.getElementById('root')
+  />
 );
 ```
diff --git a/snippets/useAsync.md b/snippets/useAsync.md
index 907ad6f22..98d1c0dd0 100644
--- a/snippets/useAsync.md
+++ b/snippets/useAsync.md
@@ -73,5 +73,7 @@ const RandomImage = props => {
   );
 };
 
-ReactDOM.render(<RandomImage />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <RandomImage />
+);
 ```
diff --git a/snippets/useBodyScrollLock.md b/snippets/useBodyScrollLock.md
index b96b5646a..eefc4ebe5 100644
--- a/snippets/useBodyScrollLock.md
+++ b/snippets/useBodyScrollLock.md
@@ -59,5 +59,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useClickInside.md b/snippets/useClickInside.md
index 4817bd685..aa001feee 100644
--- a/snippets/useClickInside.md
+++ b/snippets/useClickInside.md
@@ -51,8 +51,7 @@ const ClickBox = ({ onClickInside }) => {
   );
 };
 
-ReactDOM.render(
-  <ClickBox onClickInside={() => alert('click inside')} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ClickBox onClickInside={() => alert('click inside')} />
 );
 ```
diff --git a/snippets/useClickOutside.md b/snippets/useClickOutside.md
index bd11beb44..c06b01eaa 100644
--- a/snippets/useClickOutside.md
+++ b/snippets/useClickOutside.md
@@ -51,8 +51,7 @@ const ClickBox = ({ onClickOutside }) => {
   );
 };
 
-ReactDOM.render(
-  <ClickBox onClickOutside={() => alert('click outside')} />,
-  document.getElementById('root')
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ClickBox onClickOutside={() => alert('click outside')} />
 );
 ```
diff --git a/snippets/useComponentDidMount.md b/snippets/useComponentDidMount.md
index e767b48f8..66db6ec40 100644
--- a/snippets/useComponentDidMount.md
+++ b/snippets/useComponentDidMount.md
@@ -27,5 +27,7 @@ const Mounter = () => {
   return <div>Check the console!</div>;
 };
 
-ReactDOM.render(<Mounter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Mounter />
+);
 ```
diff --git a/snippets/useComponentDidUpdate.md b/snippets/useComponentDidUpdate.md
index 560df4f69..53aab4db0 100644
--- a/snippets/useComponentDidUpdate.md
+++ b/snippets/useComponentDidUpdate.md
@@ -46,5 +46,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useComponentWillUnmount.md b/snippets/useComponentWillUnmount.md
index f9e50d07b..7eb36ff20 100644
--- a/snippets/useComponentWillUnmount.md
+++ b/snippets/useComponentWillUnmount.md
@@ -30,5 +30,7 @@ const Unmounter = () => {
   return <div>Check the console!</div>;
 };
 
-ReactDOM.render(<Unmounter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Unmounter />
+);
 ```
diff --git a/snippets/useCopyToClipboard.md b/snippets/useCopyToClipboard.md
index e11a06d57..fc1f51bee 100644
--- a/snippets/useCopyToClipboard.md
+++ b/snippets/useCopyToClipboard.md
@@ -60,5 +60,7 @@ const TextCopy = props => {
   );
 };
 
-ReactDOM.render(<TextCopy />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TextCopy />
+);
 ```
diff --git a/snippets/useDebounce.md b/snippets/useDebounce.md
index ab7095150..236e64b4f 100644
--- a/snippets/useDebounce.md
+++ b/snippets/useDebounce.md
@@ -49,5 +49,7 @@ const Counter = () => {
   );
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 ```
diff --git a/snippets/useDefault.md b/snippets/useDefault.md
index 3302df17f..6542957b8 100644
--- a/snippets/useDefault.md
+++ b/snippets/useDefault.md
@@ -33,5 +33,7 @@ const UserCard = () => {
   );
 };
 
-ReactDOM.render(<UserCard />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <UserCard />
+);
 ```
diff --git a/snippets/useDelayedState.md b/snippets/useDelayedState.md
index 2103ec1fa..820bea78f 100644
--- a/snippets/useDelayedState.md
+++ b/snippets/useDelayedState.md
@@ -62,5 +62,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useEffectOnce.md b/snippets/useEffectOnce.md
index 46223ac82..7746d0d8e 100644
--- a/snippets/useEffectOnce.md
+++ b/snippets/useEffectOnce.md
@@ -33,5 +33,7 @@ const App = () => {
   return <button onClick={() => setClicked(true)}>Click me</button>;
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useError.md b/snippets/useError.md
index a02ad01dc..3c880693a 100644
--- a/snippets/useError.md
+++ b/snippets/useError.md
@@ -39,5 +39,7 @@ const ErrorButton = () => {
   return <button onClick={clickHandler}>Throw error</button>;
 };
 
-ReactDOM.render(<ErrorButton />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ErrorButton />
+);
 ```
diff --git a/snippets/useEventListener.md b/snippets/useEventListener.md
index 968b01f33..a9badb076 100644
--- a/snippets/useEventListener.md
+++ b/snippets/useEventListener.md
@@ -51,5 +51,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useFetch.md b/snippets/useFetch.md
index 4702ad300..b32f5feea 100644
--- a/snippets/useFetch.md
+++ b/snippets/useFetch.md
@@ -58,5 +58,7 @@ const ImageFetch = props => {
   );
 };
 
-ReactDOM.render(<ImageFetch />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ImageFetch />
+);
 ```
diff --git a/snippets/useForm.md b/snippets/useForm.md
index efe70090c..69b554b0b 100644
--- a/snippets/useForm.md
+++ b/snippets/useForm.md
@@ -45,5 +45,7 @@ const Form = () => {
   );
 };
 
-ReactDOM.render(<Form />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Form />
+);
 ```
diff --git a/snippets/useGetSet.md b/snippets/useGetSet.md
index d0d868f09..4007902af 100644
--- a/snippets/useGetSet.md
+++ b/snippets/useGetSet.md
@@ -42,5 +42,7 @@ const Counter = () => {
   return <button onClick={onClick}>Count: {getCount()}</button>;
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 ```
diff --git a/snippets/useHash.md b/snippets/useHash.md
index 6edc6dd97..a59141f46 100644
--- a/snippets/useHash.md
+++ b/snippets/useHash.md
@@ -56,5 +56,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useHover.md b/snippets/useHover.md
index 69d3e8bed..7a6680e89 100644
--- a/snippets/useHover.md
+++ b/snippets/useHover.md
@@ -50,5 +50,7 @@ const MyApp = () => {
   return <div ref={hoverRef}>{isHovering ? 'Hovering' : 'Not hovering'}</div>;
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useIntersectionObserver.md b/snippets/useIntersectionObserver.md
index bd2215e0c..9f9a90968 100644
--- a/snippets/useIntersectionObserver.md
+++ b/snippets/useIntersectionObserver.md
@@ -49,6 +49,8 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 
 ```
diff --git a/snippets/useInterval.md b/snippets/useInterval.md
index 5845479e5..9190d3c65 100644
--- a/snippets/useInterval.md
+++ b/snippets/useInterval.md
@@ -44,5 +44,7 @@ const Timer = props => {
   return <p>{seconds}</p>;
 };
 
-ReactDOM.render(<Timer />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Timer />
+);
 ```
diff --git a/snippets/useIsomporphicEffect.md b/snippets/useIsomporphicEffect.md
index 7e1bec55d..48bf9eda9 100644
--- a/snippets/useIsomporphicEffect.md
+++ b/snippets/useIsomporphicEffect.md
@@ -25,5 +25,7 @@ const MyApp = () => {
   return null;
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useKeyPress.md b/snippets/useKeyPress.md
index d1c8b2c76..a05e49afd 100644
--- a/snippets/useKeyPress.md
+++ b/snippets/useKeyPress.md
@@ -46,5 +46,7 @@ const MyApp = () => {
   return <p>The "w" key is {!wPressed ? 'not ' : ''}pressed!</p>;
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useLocalStorage.md b/snippets/useLocalStorage.md
index a6d6075a9..629d69af2 100644
--- a/snippets/useLocalStorage.md
+++ b/snippets/useLocalStorage.md
@@ -47,5 +47,7 @@ const MyApp = () => {
   return <input value={name} onChange={e => setName(e.target.value)} />;
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useMap.md b/snippets/useMap.md
index ea4a95ef8..c975a0157 100644
--- a/snippets/useMap.md
+++ b/snippets/useMap.md
@@ -64,5 +64,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useMediaQuery.md b/snippets/useMediaQuery.md
index bf6ac41e7..3deef59b5 100644
--- a/snippets/useMediaQuery.md
+++ b/snippets/useMediaQuery.md
@@ -43,5 +43,7 @@ const ResponsiveText = () => {
   return <span>{text}</span>;
 };
 
-ReactDOM.render(<ResponsiveText />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ResponsiveText />
+);
 ```
diff --git a/snippets/useMergeState.md b/snippets/useMergeState.md
index 29d5f1e37..953b611a1 100644
--- a/snippets/useMergeState.md
+++ b/snippets/useMergeState.md
@@ -46,5 +46,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useMutationObserver.md b/snippets/useMutationObserver.md
index 85908922e..b85739675 100644
--- a/snippets/useMutationObserver.md
+++ b/snippets/useMutationObserver.md
@@ -76,5 +76,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useNavigatorOnLine.md b/snippets/useNavigatorOnLine.md
index c8d899047..7d3bfaf03 100644
--- a/snippets/useNavigatorOnLine.md
+++ b/snippets/useNavigatorOnLine.md
@@ -47,5 +47,7 @@ const StatusIndicator = () => {
   return <span>You are {isOnline ? 'online' : 'offline'}.</span>;
 };
 
-ReactDOM.render(<StatusIndicator />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <StatusIndicator />
+);
 ```
diff --git a/snippets/useOnGlobalEvent.md b/snippets/useOnGlobalEvent.md
index 192d98ceb..a7c2f29e9 100644
--- a/snippets/useOnGlobalEvent.md
+++ b/snippets/useOnGlobalEvent.md
@@ -48,5 +48,7 @@ const App = () => {
   return <p>Move your mouse around</p>;
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useOnWindowResize.md b/snippets/useOnWindowResize.md
index 23814dfa4..69800fa91 100644
--- a/snippets/useOnWindowResize.md
+++ b/snippets/useOnWindowResize.md
@@ -35,5 +35,7 @@ const App = () => {
   return <p>Resize the window and check the console</p>;
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useOnWindowScroll.md b/snippets/useOnWindowScroll.md
index 56426d4fc..b9070f9aa 100644
--- a/snippets/useOnWindowScroll.md
+++ b/snippets/useOnWindowScroll.md
@@ -33,5 +33,7 @@ const App = () => {
   return <p style={{ height: '300vh' }}>Scroll and check the console</p>;
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/usePersistedState.md b/snippets/usePersistedState.md
index 1a34888ad..88235e289 100644
--- a/snippets/usePersistedState.md
+++ b/snippets/usePersistedState.md
@@ -81,5 +81,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/usePortal.md b/snippets/usePortal.md
index 389b41016..0793a5ac5 100644
--- a/snippets/usePortal.md
+++ b/snippets/usePortal.md
@@ -49,5 +49,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/usePrevious.md b/snippets/usePrevious.md
index 70a5ca26f..e21286c91 100644
--- a/snippets/usePrevious.md
+++ b/snippets/usePrevious.md
@@ -38,5 +38,7 @@ const Counter = () => {
   );
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 ```
diff --git a/snippets/useRequestAnimationFrame.md b/snippets/useRequestAnimationFrame.md
index 739f74bdf..1db4090b8 100644
--- a/snippets/useRequestAnimationFrame.md
+++ b/snippets/useRequestAnimationFrame.md
@@ -41,5 +41,7 @@ const Counter = () => {
   return <p>{Math.round(count)}</p>;
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 ```
diff --git a/snippets/useSSR.md b/snippets/useSSR.md
index 716c88c7d..34197ff9b 100644
--- a/snippets/useSSR.md
+++ b/snippets/useSSR.md
@@ -57,5 +57,7 @@ const SSRChecker = props => {
   return <p>{isBrowser ? 'Running on browser' : 'Running on server'}</p>;
 };
 
-ReactDOM.render(<SSRChecker />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <SSRChecker />
+);
 ```
diff --git a/snippets/useScript.md b/snippets/useScript.md
index 18b043f06..9a27c6069 100644
--- a/snippets/useScript.md
+++ b/snippets/useScript.md
@@ -87,5 +87,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useSearchParam.md b/snippets/useSearchParam.md
index 315c0f48e..a69ed7479 100644
--- a/snippets/useSearchParam.md
+++ b/snippets/useSearchParam.md
@@ -62,5 +62,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useSessionStorage.md b/snippets/useSessionStorage.md
index 0ea954aee..59ee0bc55 100644
--- a/snippets/useSessionStorage.md
+++ b/snippets/useSessionStorage.md
@@ -47,5 +47,7 @@ const MyApp = () => {
   return <input value={name} onChange={e => setName(e.target.value)} />;
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useSet.md b/snippets/useSet.md
index c71b6a880..2c590fd29 100644
--- a/snippets/useSet.md
+++ b/snippets/useSet.md
@@ -46,5 +46,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useTimeout.md b/snippets/useTimeout.md
index bad230952..f15390875 100644
--- a/snippets/useTimeout.md
+++ b/snippets/useTimeout.md
@@ -44,5 +44,7 @@ const OneSecondTimer = props => {
   return <p>{seconds}</p>;
 };
 
-ReactDOM.render(<OneSecondTimer />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <OneSecondTimer />
+);
 ```
diff --git a/snippets/useTitle.md b/snippets/useTitle.md
index 68f772a97..39703b81c 100644
--- a/snippets/useTitle.md
+++ b/snippets/useTitle.md
@@ -46,5 +46,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useToggler.md b/snippets/useToggler.md
index 44f87caf5..542094af9 100644
--- a/snippets/useToggler.md
+++ b/snippets/useToggler.md
@@ -28,5 +28,7 @@ const Switch = () => {
   const [val, toggleVal] = useToggler(false);
   return <button onClick={toggleVal}>{val ? 'ON' : 'OFF'}</button>;
 };
-ReactDOM.render(<Switch />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Switch />
+);
 ```
diff --git a/snippets/useUnload.md b/snippets/useUnload.md
index 989f0cfd2..c30b756e1 100644
--- a/snippets/useUnload.md
+++ b/snippets/useUnload.md
@@ -35,5 +35,7 @@ const App = () => {
   });
   return <div>Try closing the window.</div>;
 };
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```
diff --git a/snippets/useUpdate.md b/snippets/useUpdate.md
index 7187c0847..229ce647f 100644
--- a/snippets/useUpdate.md
+++ b/snippets/useUpdate.md
@@ -29,5 +29,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```
diff --git a/snippets/useWindowSize.md b/snippets/useWindowSize.md
index b8bc3a961..68534ca56 100644
--- a/snippets/useWindowSize.md
+++ b/snippets/useWindowSize.md
@@ -47,5 +47,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```