Upgrade to React 18 and useSyncExternalStore (atlassian#162)

babel.config.js

@@ -18,6 +18,7 @@ module.exports = {
       },
     ],
     '@babel/preset-react',
+    '@babel/preset-typescript',
     '@babel/preset-flow',
   ],
   env: {

docs/advanced/README.md

@@ -4,7 +4,6 @@
 - [Selectors](./selector.md)
 - [Containers](./container.md)
 - [Devtools](./devtools.md)
-- [Performance tips](./performance.md)
 - [State rehydration](./rehydration.md)
 - [Middlewares](./middlewares.md)
 - [Custom mutator](./mutator.md)

examples/advanced-flow/index.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { useState, StrictMode } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { defaults, type Middleware } from 'react-sweet-state';
 
 import { UserListRpc, UserListHook } from './views/user-list';
@@ -23,11 +23,6 @@ defaults.middlewares.add(mw);
  */
 defaults.devtools = true;
 
-/**
- * Enable Batch updates
- */
-defaults.batchUpdates = true;
-
 /**
  * Main App
  */
@@ -57,9 +52,9 @@ const App = () => {
   );
 };
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <StrictMode>
     <App />
-  </StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 );

examples/advanced-scoped-flow/index.js

@@ -1,6 +1,6 @@
 // @flow
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import React, { Component, StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
 import { defaults } from 'react-sweet-state';
 
 import { ChatRpc } from './views/chat-rpc';
@@ -10,11 +10,6 @@ import { ChatHook } from './views/chat-hook';
  */
 defaults.devtools = true;
 
-/**
- * Enable Batch updates
- */
-defaults.batchUpdates = true;
-
 /**
  * Main App
  */
@@ -57,19 +52,24 @@ class App extends Component<
             key={String(remount)}
             id={String(reset)}
             remoteUsers={remoteUsers}
-            defaultColor="#FED"
+            defaultColor="#FFF"
           />
           <hr />
           <ChatHook
             key={String(remount + 1)}
             id={String(reset + 1)}
             remoteUsers={remoteUsers}
-            defaultColor="#DED"
+            defaultColor="#EEE"
           />
         </main>
       </div>
     );
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

examples/advanced-scoped-flow/views/chat-hook.js

@@ -5,14 +5,22 @@ import { FormContainer, useForm } from '../components/form';
 import { useMessagesActions, useMessagesValue } from '../components/messages';
 import { ThemeContainer, useTheme } from '../components/theme';
 
-const ThemeWrapper = React.memo(({ children }: any) => {
+const IsolatedHeader = React.memo(() => {
   const [{ color }, { change }] = useTheme();
   return (
     <div style={{ background: color }}>
-      <h3>With Hooks</h3>
       <button onClick={() => change('#DFF')}>Theme 1</button>
       <button onClick={() => change('#FDF')}>Theme 2</button>
       <button onClick={() => change('#FFD')}>Theme 3</button>
+    </div>
+  );
+});
+
+const ThemeWrapper = React.memo(({ children }: any) => {
+  const [{ color }] = useTheme();
+  return (
+    <div style={{ background: color }}>
+      <h3>With Hooks</h3>
       {children}
     </div>
   );
@@ -60,6 +68,7 @@ export const ChatHook: AbstractComponent<Props> = React.memo(
     return (
       <ThemeContainer scope={id} defaultColor={defaultColor}>
         <ThemeWrapper>
+          <IsolatedHeader />
           <MessagesList />
           <FormContainer remoteUsers={remoteUsers}>
             <FormComponent onSubmitSuccess={add} />

examples/basic-flow/index.js

@@ -1,15 +1,9 @@
 // @flow
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { defaults } from 'react-sweet-state';
 
 import { useCounter } from './components';
 
-/**
- * Enable Batch updates
- */
-defaults.batchUpdates = true;
-
 /**
  * Components
  */

examples/basic-ts/index.tsx

@@ -1,6 +1,6 @@
 // @flow
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
 
 import { CounterSubscriber, useCounter } from './components';
 
@@ -41,4 +41,9 @@ const App = () => (
   </div>
 );
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

examples/performance-scale-test/index.js

@@ -1,26 +1,24 @@
 // @flow
-import React, { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { defaults } from 'react-sweet-state';
+import React, { StrictMode, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom/client';
 
 import { useTodo } from './controllers/todos';
 
-/**
- * Enable Batch updates
- */
-defaults.batchUpdates = true;
-
 const COLLECTION = Array.from({ length: 500 });
 
 type TodoViewProps = { id: string, count: number };
+
 const TodoView = ({ id, count }: TodoViewProps) => {
   const [todo, actions] = useTodo({ id });
+
   useEffect(() => {
     if (!todo) actions.create(id);
   }, [actions, id, todo]);
+
   useEffect(() => {
     actions.toggle(id);
   }, [actions, count, id]);
+
   return <div>{todo ? todo.title : 'creating...'}</div>;
 };
 
@@ -42,4 +40,9 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

examples/performance-test/index.js

@@ -1,71 +1,49 @@
 // @flow
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { defaults } from 'react-sweet-state';
+import React, { Component, StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
 
-import { TreeRpc } from './views/tree-rpc';
-import { TreeHooks } from './views/tree-hooks';
+import { Tree } from './views/tree';
 
-/**
- * Enable Batch updates
- */
-defaults.batchUpdates = true;
-
-const [TYPE = '', DEPTH = '2'] = window.location.hash
-  .replace('#', '')
-  .split('|');
+const [DEPTH = '2'] = window.location.hash.replace('#', '').split('|');
 
 /**
  * Main App
  */
 class App extends Component<{}, any> {
   state = {
-    type: TYPE,
     depth: Number(DEPTH),
   };
 
-  onChangeType = (ev) => {
-    const { depth } = this.state;
-    const type = ev.target.value;
-    this.setState({ type });
-    window.location.hash = type + '|' + depth;
-  };
-
   onChangeDepth = (ev) => {
-    const { type } = this.state;
     const depth = Number(ev.target.value);
     this.setState({ depth });
-    window.location.hash = type + '|' + depth;
+    window.location.hash = depth;
   };
 
   render() {
-    const { type, depth } = this.state;
+    const { depth } = this.state;
     return (
       <div>
-        <h1>Performance ({type})</h1>
-        Type:{' '}
-        <select onChange={this.onChangeType} value={type}>
-          {['', 'rpc', 'hooks'].map((v) => (
-            <option key={v} value={v}>
-              {v}
-            </option>
-          ))}
-        </select>
+        <h1>Performance</h1>
         Depth:{' '}
         <select onChange={this.onChangeDepth} value={depth}>
-          {['2', '5', '10'].map((v) => (
+          {['0', '2', '5', '10'].map((v) => (
             <option key={v} value={v}>
               {v}
             </option>
           ))}
         </select>
         <main>
-          {type === 'rpc' && <TreeRpc n={depth} />}
-          {type === 'hooks' && <TreeHooks n={depth} />}
+          <Tree n={depth} />
         </main>
       </div>
     );
   }
 }
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);