Update to React 18

snippet-template.md

@@ -22,5 +22,7 @@ const ComponentName = props => {
 ```
 
 ```jsx
-ReactDOM.render(<ComponentName />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ComponentName />
+);
 ```

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>
 );
 ```

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" />
 );
 ```

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" />
 );
 ```

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>
 );
 ```

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')
+  />
 );
 ```

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>
 );
 ```

snippets/ControlledInput.md

@@ -38,5 +38,7 @@ const Form = () => {
   );
 };
 
-ReactDOM.render(<Form />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Form />
+);
 ```

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} />
 );
 ```

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 />
+  </>
 );
 ```

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} />
+);
 ```

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} />
 );
 ```

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')
+  />
 );
 ```

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!" />
 );
 ```

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!" />
 );
 ```

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} />
+);
 ```

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>
 );
 ```

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} />
 );
 ```

snippets/Modal.md

@@ -151,5 +151,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```

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')
+  />
 );
 ```

snippets/PasswordRevealer.md

@@ -25,5 +25,7 @@ const PasswordRevealer = ({ value }) => {
 ```
 
 ```jsx
-ReactDOM.render(<PasswordRevealer />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <PasswordRevealer />
+);
 ```

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>
 );
 ```

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')
+  />
 );
 ```

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)} />
 );
 ```

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} />
+);
 ```

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>
 );
 ```

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']} />
 );
 ```

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')
+  />
 );
 ```

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 />
+);
 ```

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>
 );
 ```

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" />
 );
 ```

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')
+  />
 );
 ```

snippets/useAsync.md

@@ -73,5 +73,7 @@ const RandomImage = props => {
   );
 };
 
-ReactDOM.render(<RandomImage />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <RandomImage />
+);
 ```

snippets/useBodyScrollLock.md

@@ -59,5 +59,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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')} />
 );
 ```

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')} />
 );
 ```

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 />
+);
 ```

snippets/useComponentDidUpdate.md

@@ -46,5 +46,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```

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 />
+);
 ```

snippets/useCopyToClipboard.md

@@ -60,5 +60,7 @@ const TextCopy = props => {
   );
 };
 
-ReactDOM.render(<TextCopy />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <TextCopy />
+);
 ```

snippets/useDebounce.md

@@ -49,5 +49,7 @@ const Counter = () => {
   );
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 ```

snippets/useDefault.md

@@ -33,5 +33,7 @@ const UserCard = () => {
   );
 };
 
-ReactDOM.render(<UserCard />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <UserCard />
+);
 ```

snippets/useDelayedState.md

@@ -62,5 +62,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

snippets/useEventListener.md

@@ -51,5 +51,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

snippets/useFetch.md

@@ -58,5 +58,7 @@ const ImageFetch = props => {
   );
 };
 
-ReactDOM.render(<ImageFetch />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ImageFetch />
+);
 ```

snippets/useForm.md

@@ -45,5 +45,7 @@ const Form = () => {
   );
 };
 
-ReactDOM.render(<Form />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Form />
+);
 ```

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 />
+);
 ```

snippets/useHash.md

@@ -56,5 +56,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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 />
+);
 ```

snippets/useIntersectionObserver.md

@@ -49,6 +49,8 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 
 ```

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 />
+);
 ```

snippets/useIsomporphicEffect.md

@@ -25,5 +25,7 @@ const MyApp = () => {
   return null;
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

snippets/useMap.md

@@ -64,5 +64,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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 />
+);
 ```

snippets/useMergeState.md

@@ -46,5 +46,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

snippets/useMutationObserver.md

@@ -76,5 +76,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

snippets/usePersistedState.md

@@ -81,5 +81,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

snippets/usePortal.md

@@ -49,5 +49,7 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <App />
+);
 ```

snippets/usePrevious.md

@@ -38,5 +38,7 @@ const Counter = () => {
   );
 };
 
-ReactDOM.render(<Counter />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Counter />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

snippets/useScript.md

@@ -87,5 +87,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

snippets/useSearchParam.md

@@ -62,5 +62,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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 />
+);
 ```

snippets/useSet.md

@@ -46,5 +46,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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 />
+);
 ```

snippets/useTitle.md

@@ -46,5 +46,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

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 />
+);
 ```

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 />
+);
 ```

snippets/useUpdate.md

@@ -29,5 +29,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```

snippets/useWindowSize.md

@@ -47,5 +47,7 @@ const MyApp = () => {
   );
 };
 
-ReactDOM.render(<MyApp />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <MyApp />
+);
 ```