title: react hooks - useEffect not called after action is dispatched
body: <p>I have a button that can like/dislike a car.</p>
  
  <p>The state stores <code>usersLikedCars</code> which is an array.</p>
  
  <p>When the user clicks the <code>like/dislike</code> button (same button), an API call is made which is either a POST or DELETE which updates db and returns 1 more or 1 less row of <code>usersLikedCars</code>.</p>
  
  <p>After this operation completes, I want to:</p>
  
  <ol>
  <li>loop through the updated <code>usersLikedCars</code> array</li>
  <li>check if the car has been liked/disliked</li>
  <li>updated the button color to red=liked, blue=notLiked</li>
  </ol>
  
  <p><strong>Current behavior</strong></p>
  
  <ul>
  <li>The button color only updates when I leave the current page and come back to it</li>
  <li>Inside the action, I can log the returned API data, and it updates correctly</li>
  </ul>
  
  <p><strong>Expected Behavior</strong></p>
  
  <ul>
  <li>I expect <code>usersLikedCars</code> to update in the component (it's count that is) and call the function that basically updates the button color by checking if the newly added car is part of the updated array.</li>
  </ul>
  
  <p>Looking at answers in <a href="https://stackoverflow.com/questions/59489092/useselector-constant-not-updating-after-dispatch?noredirect=1#comment105167991_59489092">this</a> link, I added <code>useEffect</code> where I dispatch the action which grabs the updated <code>usersLikedCars</code> - at least I thought it did. It is only called when the page first renders.</p>
  
  <p>Also, <code>useEffect</code> forced me to wrap <code>isCarLiked</code> and <code>setLikeButtonColor</code> in <code>useCallback</code> which I am not 100% sure is correct..</p>
  
  <p>Can someone point me in the right direction?</p>
  
  <pre><code>const CarScreen = ({ route }) =&gt; {
    // props
    const { params } = route;
    const { car } = params;
    // member variables
    const carTitle = `#${car.title}`;
    const carLikeCount = car.hit_count ? car.hit_count : 0;
    const carBirthday = moment(car.created_at).format('MMMM Do YYYY');
    const carLikeButtonColor = useRef('');
    // redux
    const dispatch = useDispatch();
    const user = useSelector((state) =&gt; state.user.user);
    const usersLikedCars = useSelector(
      (state) =&gt; state.usersLikedCars.items,
    );
  
    /**
     * Call this function when car is liked/unliked
     * and when like button color needs to be updated
     */
    useEffect(() =&gt; {
      dispatch(fetchUsersLikedCars());
  
      // set the like button's color: red - LIKED, blue - NOT LIKED
      setLikeButtonColor();
    }, [dispatch, setLikeButtonColor]);
  
    /**
     * Method for liking a car
     */
    const handleLikeOrUnlikeCar = async () =&gt; {
      // check if user already liked this car
      const carAlreadyLikedByUser = isCarLiked();
  
      if (carAlreadyLikedByUser) {
        // find the car in user's liked car state array to "unlike"
        const carToDelete = usersLikedCars.find(
          (usersLikedCar) =&gt; usersLikedCar.title === car.title,
        );
        // unlike it
        try {
          await console.log(
            'BEFORE remove usersLikedCars',
            usersLikedCars,
          );
  
          await remove({
            uid: carToDelete.uid,
          });
          await dispatch(fetchUsersLikedCars());
          await console.log(
            'AFTER remove usersLikedCars',
            usersLikedCars,
          );
        } catch (error) {
          console.error(error);
        }
      } else {
        // like it
  
        try {
          await console.log('BEFORE add usersLikedCars', usersLikedCars);
          await add({
            title: car.title,
            user_uid: user.uid,
            car_uid: car.uid,
          });
          await dispatch(fetchUsersLikedCars());
          await console.log('AFTER add usersLikedCars', usersLikedCars);
        } catch (error) {
          console.error(error);
        }
      }
    };
  
    const isCarLiked = useCallback(
      () =&gt;
        usersLikedCars.some(
          (usersLikedCar) =&gt; usersLikedCar.title === car.title,
        ),
      [usersLikedCars, car.title],
    );
  
    /**
     * Set color of car like button
     */
    const setLikeButtonColor = useCallback(() =&gt; {
      // look through user's liked cars and see if the current one is in there already
      const carAlreadyLikedByUser = isCarLiked();
  
      // if user liked this car already, color = RED else BLUE
      carLikeButtonColor.current = carAlreadyLikedByUser
        ? Colors.loveRed
        : Colors.defaultColor;
    }, [isCarLiked]);
  
  ....
  }
  </code></pre>
  
  <p><strong>action</strong></p>
  
  <pre><code>export const fetchUsersLikedCars = () =&gt; async (dispatch) =&gt; {
    const usersLikedCars = await find();
  
    console.log('ACTION usersLikedCars', usersLikedCars); // value is correctly updated here
    return dispatch({
      type: FETCH_USERS_LIKED_CARS,
      payload: usersLikedCars,
    });
  };
  </code></pre>