chore: Minimize full page rerendering from usesyncexternalstore

Author: weaponsforge

client/src/components/usesyncexternalstore/index.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
 import Page from '@/common/layout/page'
+import Card from '@/common/ui/card'
+import TodoListComponentV2 from '@/domain/usesyncexternalstore/todolist'
 
 function UseSyncExternalStoreComponent ({
-  todos,
   addTodo,
   deleteTodo
 }) {
@@ -12,30 +13,26 @@ function UseSyncExternalStoreComponent ({
         UseSyncExternalStoreComponent
       </h2>
 
-      {(todos !== undefined) &&
-      <div>
-        <ul>
-          {todos.map((item, index) => (
-            <li key={index}>
-              <span>{item.text}</span> &nbsp;
-              <span>
-                <button onClick={() => deleteTodo(item.id)}>[ X ]</button>
-              </span>
-            </li>
-          ))}
-        </ul>
-      </div>
-      }
+      <TodoListComponentV2
+        deleteTodo={deleteTodo}
+      />
 
-      <button onClick={() => addTodo()}>Add Todo</button>
+      <button onClick={() => addTodo()}>
+        Add Todo
+      </button>
+
+      <br /><br />
+
+      <Card>
+        Hello
+      </Card>
     </Page>
   )
 }
 
 UseSyncExternalStoreComponent.propTypes = {
-  todos: PropTypes.array,
   addTodo: PropTypes.func,
-  deleteTodo: PropTypes.fun
+  deleteTodo: PropTypes.func
 }
 
 export default UseSyncExternalStoreComponent

client/src/domain/usesyncexternalstore/todolist/index.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+import useTodos from '@/lib/hooks/usetodo'
+
+function TodoListComponentV2 ({
+  deleteTodo
+}) {
+  const { todos } = useTodos()
+
+  return (
+    <ul style={{ marginTop: '24px' }}>
+      {(todos).map(((item, index) => (
+        <li key={index}>
+          <span>id: {item.id}, {item.text}</span>
+          <span>
+            <button onClick={() => deleteTodo(item.id)}>
+              [ x ]
+            </button>
+          </span>
+        </li>
+      )))}
+    </ul>
+  )
+}
+
+TodoListComponentV2.propTypes = {
+  deleteTodo: PropTypes.func
+}
+
+export default TodoListComponentV2

client/src/domain/usesyncexternalstore/todostore.js renamed to client/src/lib/hooks/usetodo.js

@@ -1,12 +1,11 @@
 import UseSyncExternalStoreComponent from '@/components/usesyncexternalstore'
-import useTodos from '@/domain/usesyncexternalstore/todostore'
+import useTodos from '@/lib/hooks/usetodo'
 
 function UseSyncExternalStore () {
-  const { todos, addTodo, deleteTodo } = useTodos()
+  const { addTodo, deleteTodo } = useTodos()
 
   return (
     <UseSyncExternalStoreComponent
-      todos={todos}
       addTodo={addTodo}
       deleteTodo={deleteTodo}
     />