chore: Testing page re-renders when loading local state data set by useState from deeply-nested components

Author: weaponsforge

client/src/components/home/items.json

@@ -6,5 +6,9 @@
   {
     "name": "redux toolkit",
     "link": "/redux"
+  },
+  {
+    "name": "useState",
+    "link": "/usestate"
   }
 ]

client/src/components/usestate/index.js

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import Card from '@/common/ui/card'
+import Page from '@/common/layout/page'
+import TodoListComponentV3 from '@/domain/usestate/todolist'
+
+function UseStateComponent () {
+  const [state, setState] = useState([])
+
+  const addTodo = () => {
+    const data = [...state]
+    data.push({
+      id: Math.random().toString(36).substring(2, 8),
+      text: 'Hello, wooorld!!'
+    })
+
+    setState(data)
+  }
+
+  const deleteTodo = (id) => {
+    const temp = state.filter(item => item.id !== id)
+    setState(temp)
+  }
+
+  return (
+    <Page>
+      <h2>
+        useState
+      </h2>
+
+      <p> Testing page re-renders and local state set by useState rendering from inside a deeply-nested component.</p>
+      <br />
+
+      <button onClick={addTodo}>
+        Create Todo
+      </button>
+      <br /><br />
+
+      <Card>
+        <Card>
+          <Card>
+            <Card>
+              <Card>
+                <Card>
+                  <TodoListComponentV3
+                    todos={state}
+                    addTodo={addTodo}
+                    deleteTodo={deleteTodo}
+                  />
+                </Card>
+              </Card>
+            </Card>
+          </Card>
+        </Card>
+      </Card>
+    </Page>
+  )
+}
+
+export default UseStateComponent

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

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types'
+
+function TodoListComponentV3 ({
+  todos,
+  deleteTodo
+}) {
+  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>
+  )
+}
+
+TodoListComponentV3.propTypes = {
+  deleteTodo: PropTypes.func
+}
+
+export default TodoListComponentV3

client/src/pages/_app.js

@@ -4,7 +4,9 @@ import { store } from '@/store/store'
 import '@/styles/globals.css'
 
 export default function App({ Component, pageProps }) {
-  return <Provider store={store}>
-    <Component {...pageProps} />
-  </Provider>
+  return (
+    <Provider store={store}>
+      <Component {...pageProps} />
+    </Provider>
+  )
 }

client/src/pages/usestate/index.js

@@ -0,0 +1,9 @@
+import UseStateComponent from '@/components/usestate'
+
+function UseStateContainer () {
+  return (
+    <UseStateComponent />
+  )
+}
+
+export default UseStateContainer