chore: Testing page re-renders when loading redux data from deeply-nested components

Author: weaponsforge

client/src/common/ui/card/Card.module.css

@@ -1,6 +1,7 @@
 .card {
   border: 1px solid;
-  max-width: 400px;
+  min-width: 400px;
+  max-width: 600px;
   min-height: 100px;
   border-radius: 16px;
   padding: 16px;

client/src/components/redux/index.js

@@ -13,12 +13,30 @@ function ReduxComponent ({
         Redux Toolkit
       </h2>
 
+      <p>Testing rendering data from a redux store inside a deeply-nested component.</p>
+
       <button onClick={addTodo}
         style={{ marginTop: '24px' }}>
         Add Todo
       </button>
 
-      <TodoListComponent deleteTodo={deleteTodo} />
+      <br /><br />
+
+      {/** A deeply-nested component */}
+      <Card>
+        <Card>
+          <Card>
+            <Card>
+              <Card>
+                <Card>
+                  <TodoListComponent deleteTodo={deleteTodo} />
+                </Card>
+              </Card>
+            </Card>
+          </Card>
+        </Card>
+      </Card>
+
       <br />
 
       <Card>