title: change useState when redux state change
body: <p>I have a functional component with a useState hook. Its values are coming from my redux store and I want to update the state with the are store state every time a dispatch an action.</p>
  <p>Right now I have hardcoded an array that the useState starts with. I want to be able to push in new elements in the array via redux and have react re-render the new content.</p>
  <p>See code below:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import &quot;./style.scss&quot;;
  import { FormEquation } from &quot;../calc/interfaces/form&quot;;
  import { FlowrateCalc } from &quot;../calc/calculators/FlowrateCalc&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  import { RootState } from &quot;../state/reducers&quot;;
  import { ValveKvsCalc } from &quot;../calc/calculators/ValveKvsCalc&quot;;
  
  function Calculator() {
    const state = useSelector((state: RootState) =&gt; state.calc);
    
    // const state = [
    //   {
    //     ...FlowrateCalc,
    //     priorityList: FlowrateCalc.inputs.map((input) =&gt; input.name),
    //   },
    //   {
    //     ...ValveKvsCalc,
    //     priorityList: ValveKvsCalc.inputs.map((input) =&gt; input.name),
    //   },
    // ];
  
  // Usestate is run once after render and never again. How do I update this state whenever new content arrived from &quot;useSelector&quot;??
  
    const [formsEQ, setformsEQ] = useState&lt;FormEquation[]&gt;([...state]);
  
    const inputsHandler = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      // Copy form and get index of affected form
      const formCopy = formsEQ.slice();
      const [formName, inputFieldName] = e.target.name.split(&quot;-&quot;);
      const formIndex = formsEQ.findIndex((formEQ) =&gt; formEQ.name === formName);
      if (formIndex === -1) return;
      // if anything other than a number or dot inputted, then return
      // meTODO: if added number then trying to delete all numbers will stop!
      const isInputNum = e.target.value.match(/[0-9]*\.?[0-9]*/);
      if (!isInputNum || isInputNum[0] === &quot;&quot;) return;
  
      // Update priority list to calculate the last updated input
      formCopy[formIndex].priorityList = formCopy[formIndex].priorityList.sort((a, b) =&gt; {
        if (a === inputFieldName) return 1;
        if (b === inputFieldName) return -1;
        else return 0;
      });
  
      // Update selected input field
      formCopy[formIndex].inputs = formCopy[formIndex].inputs.map((input) =&gt; {
        if (input.name === inputFieldName) {
          input.value = e.target.value;
        }
        return input;
      });
    
      // If more than two inputs empty do not calculate
      const emptyInputs = formCopy[formIndex].inputs.reduce(
        (acc, nV) =&gt; (nV.value === &quot;&quot; ? (acc += 1) : acc),
        0
      );
  
      // Calculate the last edited input field
      formCopy[formIndex].inputs = formCopy[formIndex].inputs.map((input) =&gt; {
        if (input.name === formCopy[formIndex].priorityList[0] &amp;&amp; emptyInputs &lt;= 1) {
          const calculatedValue = formCopy[formIndex].calculate(formCopy[formIndex].priorityList[0]);
          input.value = calculatedValue;
        }
        return input;
      });
  
      // Final set hook, now with calculated value
      setformsEQ([...formCopy]);
    };
    const formInputs = formsEQ.map((formEQ) =&gt; {
      return (
        &lt;form className=&quot;form&quot; key={formEQ.name}&gt;
          {formEQ.inputs?.map((formInput) =&gt; {
            return (
              &lt;div className=&quot;form__input&quot; key={formInput.name}&gt;
                &lt;label&gt;{formInput.label}: &lt;/label&gt;
                &lt;input
                  name={`${formEQ.name}-${formInput.name}`}
                  onChange={inputsHandler}
                  placeholder={`${formInput.label} (${formInput.selectedUnit})`}
                  value={formInput.value}
                /&gt;
              &lt;/div&gt;
            );
          })}
        &lt;/form&gt;
      );
    });
  
    return &lt;div&gt;{formInputs}&lt;/div&gt;;
  }
  
  export default Calculator;
  </code></pre>