title: React (+ Typescript) component not rerendering upon updating Context
body: <p>I have a <code>LaunchItem</code> component which uses <code>React.Context</code> to get and set information to/from the local storage.</p>
  <p>What I am trying to achieve is that, when the component updates the Context (and local storage), I want it to rerender with the new information, so that it then updates the state of a local button.</p>
  <p>The problem is, although the Context seems to be updated as well as the contents of the local storage, the item is not rerendered. (when I refresh the page I can see the button has changed state, however, signifying that it is able to derive that information from the Context just fine.</p>
  <p>I will now share some code and hopefully someone is able to understand what I might be missing, I thoroughly appreciate your help :)</p>
  <h2>Context provider setup</h2>
  <pre class="lang-ts prettyprint-override"><code>type FavoritesContextType = {
    favorites: Favorites;
    updateFavorites: (category: StorageCategory, item: string) =&gt; void;
  };
  
  export const FavoritesContext = createContext&lt;FavoritesContextType&gt;(
    {} as FavoritesContextType
  );
  
  const FavoritesProvider: FC = ({ children }) =&gt; {
    const [favorites, setFavorites] = useState&lt;Favorites&gt;(
      getFromLocalStorage(SOME_CONSTANT)
    );
  
    const updateFavorites = (category: StorageCategory, item: string) =&gt; {
      updateLocalStorage(category, item);
      setFavorites(favorites);
    };
  
    return (
      &lt;FavoritesContext.Provider value={{ favorites, updateFavorites }}&gt;
        {children}
      &lt;/FavoritesContext.Provider&gt;
    );
  };
  
  export const useFavoritesContext = () =&gt; useContext(FavoritesContext);
  </code></pre>
  <h2>App.tsx</h2>
  <pre class="lang-ts prettyprint-override"><code>export const App = () =&gt; {
    return (
      &lt;FavoritesProvider&gt;
        {/* Some routing wrapper and a few routes each rendering a component */}
        &lt;Route path=&quot;/launches&quot; element={&lt;Launches /&gt;} /&gt;
      &lt;/FavoritesProvider&gt;
    )
  </code></pre>
  <h2>Launches.tsx</h2>
  <pre class="lang-ts prettyprint-override"><code>export const LaunchItem = ({ launch }: LaunchItemProps) =&gt; {
    const { favorites, updateFavorites } = useFavoritesContext();
    const [isFavorite, setIsFavorite] = useState(false);
  
    useEffect(() =&gt; {
      if (favorites) {
        setIsFavorite(
          favorites.launches.includes(launch.flight_number.toString())
        );
      }
    }, [favorites]);
  
    return (
      {/* The rest of the component, irrelevant */}
      &lt;FavoriteButton
        isFavorite={isFavorite}
        updateFavorites={() =&gt; {
          updateFavorites(
            StorageCategory.Launches,
            launch.flight_number.toString()
            );
         }}
     /&gt;
    )
  </code></pre>
  <h2>FavoriteButton.tsx</h2>
  <pre class="lang-ts prettyprint-override"><code>export const FavoriteButton = ({
    isFavorite,
    updateFavorites,
  }: FavoriteButtonProps) =&gt; {
    const handleClick = (e: React.MouseEvent&lt;HTMLAnchorElement, MouseEvent&gt;) =&gt; {
      e.preventDefault();
      updateFavorites();
    };
  
    return (
      // Using Link vs a Button to be able to preventDefault of parent Link
      &lt;Link
        onClick={handleClick}
      &gt;
      {/* The rest of the component, irrelevant */}
  </code></pre>