both useState and useReducer states rendering on tool tip display but state includes reducer states as well

Author: garrettlchow

demo-app/src/client/Components/FunctionalReducerCounter.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React, { useState, useReducer } from 'react';
 
 type CounterProps = {
   initialCount?: number;
@@ -73,6 +73,9 @@ function FunctionalReducerCounter({
     textColor: '#330002',
   },
 }: CounterProps): JSX.Element {
+  const [clickCount, setClickCount] = useState(0);
+  const [lastClickTime, setLastClickTime] = useState<Date | null>(null);
+  const [averageTimeBetweenClicks, setAverageTimeBetweenClicks] = useState<number>(0);
   const [state, dispatch] = useReducer(
     (state: CounterState, action: CounterAction) => counterReducer(state, action, step),
     {

demo-app/src/client/Components/FunctionalStateCounter.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+
+type CounterProps = {
+  initialCount?: number;
+  step?: number;
+  title?: string;
+  theme?: {
+    backgroundColor?: string;
+    textColor?: string;
+  };
+};
+
+function FunctionalStateCounter({
+  initialCount = 0,
+  step = 1,
+  title = 'Function-based State Counter',
+  theme = {
+    backgroundColor: '#ffffff',
+    textColor: '#330002',
+  },
+}: CounterProps): JSX.Element {
+  const [count, setCount] = useState(initialCount);
+  const [history, setHistory] = useState<number[]>([]);
+  const [lastAction, setLastAction] = useState('none');
+
+  const handleAction = (type: string, payload?: number) => {
+    let newCount = count;
+    switch (type) {
+      case 'INCREMENT':
+        newCount = count + step;
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction('INCREMENT');
+        break;
+      case 'DECREMENT':
+        newCount = count - step;
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction('DECREMENT');
+        break;
+      case 'DOUBLE':
+        newCount = count * 2;
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction('DOUBLE');
+        break;
+      case 'ADD':
+        newCount = count + (payload || 0);
+        setCount(newCount);
+        setHistory([...history, newCount]);
+        setLastAction(`ADD ${payload}`);
+        break;
+      case 'RESET':
+        setCount(0);
+        setHistory([]);
+        setLastAction('RESET');
+        break;
+    }
+  };
+
+  return (
+    <div
+      className='reducer-counter'
+      style={{
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+      }}
+    >
+      <h2>{title}</h2>
+      <div className='counter-value'>
+        <h3>Current Count: {count}</h3>
+      </div>
+
+      <div className='counter-buttons'>
+        <button onClick={() => handleAction('INCREMENT')}>Increment (+{step})</button>
+        <button onClick={() => handleAction('DECREMENT')}>Decrement (-{step})</button>
+        <button onClick={() => handleAction('DOUBLE')}>Double Value</button>
+        <button onClick={() => handleAction('ADD', 5)}>Add 5</button>
+        <button onClick={() => handleAction('RESET')}>Reset</button>
+      </div>
+
+      <div className='counter-info'>
+        <h4>Last Action: {lastAction}</h4>
+        <h4>History:</h4>
+        <div className='history-list'>
+          {history.map((value, index) => (
+            <span key={index}>
+              {value}
+              {index < history.length - 1 ? ' → ' : ''}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FunctionalStateCounter;

demo-app/src/client/Router.tsx

@@ -9,14 +9,34 @@ import Buttons from './Components/Buttons';
 import ReducerCounter from './Components/ReducerCounter';
 import FunctionalReducerCounter from './Components/FunctionalReducerCounter';
 // import ButtonsWithMoreHooks from './Components/ButtonsWithMoreHooks';
+import FunctionalStateCounter from './Components/FunctionalStateCounter';
 
 const domNode = document.getElementById('root');
 const root = createRoot(domNode);
 
 const CounterPage = () => (
   <div style={{ display: 'flex', justifyContent: 'center', gap: '2rem', flexWrap: 'wrap' }}>
-    <ReducerCounter key='ReducerCounter' />
-    <FunctionalReducerCounter key='FunctionalReducerCounter' />
+    <ReducerCounter
+      key='ReducerCounter'
+      initialCount={5}
+      step={2}
+      title='Class Counter'
+      theme={{ backgroundColor: '#f5f5f5', textColor: '#2a2a2a' }}
+    />
+    <FunctionalReducerCounter
+      key='FunctionalReducerCounter'
+      initialCount={10}
+      step={3}
+      title='Functional Reducer'
+      theme={{ backgroundColor: '#e8f4f8', textColor: '#2b4d59' }}
+    />
+    <FunctionalStateCounter
+      key='FunctionalStateCounter'
+      initialCount={15}
+      step={5}
+      title='Functional State'
+      theme={{ backgroundColor: '#f8f4e8', textColor: '#594b2b' }}
+    />
   </div>
 );
 

src/backend/controllers/createTree.ts

@@ -147,7 +147,6 @@ export default function createTree(currentFiberNode: Fiber): Tree {
         // Else filter & format props data to ensure they are JSON stringify-able, before sending to front end
         default: {
           componentData.props = filterAndFormatData(memoizedProps);
-          console.log('Default case props for', componentName, ':', componentData.props);
         }
       }
     }
@@ -210,7 +209,6 @@ export default function createTree(currentFiberNode: Fiber): Tree {
           const hooksStates = getHooksStateAndUpdateMethod(memoizedState);
           console.log('hook states', hooksStates);
           // Get the hooks names by parsing the elementType
-          console.log('element type', elementType.toString());
           const hooksNames = getHooksNames(elementType.toString());
           console.log('hook names', hooksNames);
 

src/backend/controllers/statePropExtractors.ts

@@ -82,7 +82,7 @@ export function getHooksStateAndUpdateMethod(
       });
     }
     // Existing useState check
-    else if (memoizedState.queue) {
+    if (memoizedState.queue) {
       hooksStates.push({
         component: memoizedState.queue,
         state: memoizedState.memoizedState,