title: useReducer value not being updated properly
body: <p>I'm trying to update a state of a component with useReducer. I'm grabbing some info from mongodb in useEffect and there I am calling my useReducer dispatch so I can set my state as soon as the component mounts. Unfortunately, my state isn't being affected and my UI isn't changing. The console.log statement at the end of my useEffect statement shows my state to still have the initial values set in useReducer call. Can anybody tell me where I am going wrong here? Also, I plan on later adding to the state and to the dependency array in useEffect. Before when I was working on this, I was getting an infinite useEffect loop so for now I have an empty error. I'd like to update the state though and have my UI reflect the changes. Anways, here is the code of the functional component containing the useEffect call. </p>
  
  <p>EDIT: my_player object should originally be this object for the user I am currently using with mongodb {health_percent: 100, hunger_percent: 100, hydration_percent: 100}</p>
  
  <pre><code>const change_progress_color = (pet_percentage: any) =&gt; {
      // change the attribute's color depending on pet_attr value
      // PROGRESS_COLORS IS JUST AN ENUM OBJ WITH COLOR CODES
      let color;
      if (pet_percentage &lt; .10)
          color = PROGRESS_COLORS[1];
      else if (pet_percentage &lt; .30)
          color = PROGRESS_COLORS[2];
      else if (pet_percentage &lt; .50)
          color = PROGRESS_COLORS[3];
      else if (pet_percentage &lt; .75)
          color = PROGRESS_COLORS[4];
      else if (pet_percentage &lt; .90)
          color = PROGRESS_COLORS[5];
      else
          color = PROGRESS_COLORS[6];
      return color;
  };
  
  const Player: React.FC = () =&gt; {
      const [player, setPlayer] = useState&lt;any&gt;();
      const [state, dispatch] = useReducer&lt;React.Reducer&lt;State, Actions&gt;&gt;(reducer,
          {health: 0, hydration: 0, hunger: 0});
  
      useEffect(() =&gt; {
          console.log("running useEffect");
          (async () =&gt; {
              var my_player = await getPlayer();
              if (my_player)
                  if (my_player.length &gt; 0) {
                      const p: any = my_player[0];
                      setPlayer(p);
                      console.log("here is my player", p);
                      dispatch({type: "ChangeHealth", diff: p.health_percent});
                      dispatch({type: "ChangeHunger", diff: p.hunger_percent});
                      dispatch({type: "ChangeHydration", diff: p.hydration_percent});
                      console.log("Here is my state", state);
                  }
          })();
      }, []);
      return (
              &lt;IonPage&gt;
                  &lt;IonHeader&gt;
                      &lt;IonToolbar&gt;
                          &lt;IonTitle&gt;My Player&lt;/IonTitle&gt;
                      &lt;/IonToolbar&gt;
                  &lt;/IonHeader&gt;
                  &lt;IonContent&gt;
                      &lt;IonHeader collapse="condense"&gt;
                          &lt;IonToolbar&gt;
                              &lt;IonTitle size="large"&gt;My Player&lt;/IonTitle&gt;
                          &lt;/IonToolbar&gt;
                      &lt;/IonHeader&gt;
                      &lt;IonList&gt;
                          &lt;IonItem&gt;
                              &lt;IonLabel position="floating"&gt;
                                  Health
                              &lt;/IonLabel&gt;
                              &lt;IonProgressBar
                                  value={state.health}
                                  color={change_progress_color(state.health)}/&gt;
                          &lt;/IonItem&gt;
                          &lt;IonItem&gt;
                              &lt;IonLabel position="floating"&gt;
                                  Hunger
                              &lt;/IonLabel&gt;
                              &lt;IonProgressBar
                                  value={state.hunger}
                                  color={change_progress_color(state.hunger)}/&gt;
                          &lt;/IonItem&gt;
                          &lt;IonItem&gt;
                              &lt;IonLabel position="floating"&gt;
                                  Hydration
                              &lt;/IonLabel&gt;
                              &lt;IonProgressBar
                                  value={state.hydration}
                                  color={change_progress_color(state.hydration)}/&gt;
                          &lt;/IonItem&gt;
                      &lt;/IonList&gt;
                  &lt;/IonContent&gt;
              &lt;/IonPage&gt;
      );
  };
  
  export default Player;
  
  </code></pre>
  
  <p>Here is my code outside the react function with my types and reducer function. </p>
  
  <pre><code>type State = {
      health: number;
      hunger: number;
      hydration: number;
  };
  
  type ChangeHealth = {
      readonly type: "ChangeHealth";
      readonly diff: number;  // this number is going to need to be divided by 100
  }
  
  type ChangeHunger = {
      readonly type: "ChangeHunger";
      readonly diff: number; // this number is going to need to be divided by 100
  }
  
  type ChangeHydration = {
      readonly type: "ChangeHydration";
      readonly diff: number; // this number is going to need to be divided by 100
  }
  
  
  type Actions = ChangeHealth | ChangeHunger | ChangeHydration;
  
  function reducer(state: State, action: Actions): State {
      switch (action.type) {
          case "ChangeHealth":
              return (() =&gt; {
                  console.log("running func");
                  console.log("here is the diff ", action.diff);
                  let new_health = (state.health + action.diff) / 100;
                  console.log(new_health);
                  if (new_health &gt; 1)
                      new_health = 1;
                  return {...state, health: new_health};
              } )();
          case "ChangeHunger":
              return (() =&gt; {
                  let new_hunger = (state.hunger + action.diff) / 100;
                  if (new_hunger &gt; 1)
                      new_hunger = 1;
                  return {...state, hunger: new_hunger};
              } )();
          case "ChangeHydration":
              return (() =&gt; {
                  let new_hydration = (state.hydration + action.diff) / 100;
                  if (new_hydration &gt; 1)
                      new_hydration = 1;
                  return {...state, hydration: new_hydration};
              } )();
      }
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thanks</p>