title: React Context API's setters work very slow
body: <p>My goal is to make such a functionality as changing the background gradient of the page depending on is child's sublinks are expanded/collapsed. For this I'm using useContext hook, but I noticed that even though everything is working as expected, the background gradient does change, but it takes ~20s for it to rerender the sublinks that were collapsed/expanded. I've seen only one question on SO with the same problem, but I didn't really understand how to solve it. The problem is that all children of context provider get rerendered because of state in context changing.
  I'd upload a codesandbox example, but I was asked not to, so here're the most reproducible code snippets. How can I use that functionality and prevent the children from rerendering, so everything works faster? Help please :)</p>
  <pre><code>const Wrapper = styled('div')&lt;{linksExpanded : boolean}&gt;`
    background-image: linear-gradient(180deg, pink 0.2%, #FFFFFF 3%);
    background-color: white;
    ${({theme})=&gt;theme.breakpoints.up('md')} {
      background-image: linear-gradient(180deg, pink 1.5%, #FFFFFF 5.5%);
    }
    ${({linksExpanded , theme})=&gt;linksExpanded &amp;&amp; `
      background-image: linear-gradient(180deg, pink 2.5%, #FFFFFF 4.25%);
      ${theme.breakpoints.up('md')} {
        background-image: linear-gradient(180deg, pink 6.5%, #FFFFFF 10%);
      }
    `}
  `
  
  const Home = () =&gt;
  {
    const { linksExpanded } = useContext(HomeDataContext);
    return (
              &lt;Wrapper linksExpanded={linksExpanded}&gt;
                &lt;About /&gt;
                &lt;Links /&gt;
                &lt;Contacts /&gt;
                &lt;Gallery /&gt;
              &lt;/Wrapper&gt;
    );
  };
  
  export default Home;
  
  export const Landing: FC = () =&gt; &lt;PageSkeleton
          pageContent={
            &lt;HomeDataContextProvider&gt;&lt;Home /&gt;&lt;/HomeDataContextProvider&gt;}
        /&gt;;
  
  
  const Links = () =&gt; {
    const { currentCakes, linksExpanded, setLinksExpanded } = useContext(HomeDataContext);
    const renderLinks = () =&gt; (
      &lt;S.List style={{maxHeight: !linksExpanded ? '0px' : '1000px'}}&gt;
        {currentCakes.map((el: CakeDescription, key : number) =&gt; (
          &lt;li key={el.name}&gt;
            &lt;a href='https://google.com'&gt;Link&lt;/a&gt;
          &lt;/li&gt;
        ))}
      &lt;/S.List&gt;
    );
    const handleLinksExpand = () =&gt; {
      setLinksExpanded(!linksExpanded);
    };
    return (
      &lt;S.Container&gt;
          &lt;S.ExpandableLinkContainer&gt;
            &lt;ExpandableLink
              onClick={handleLinksExpand}
              open={linksExpanded}
              title='Cakes'
            /&gt;
          &lt;/S.ExpandableLinkContainer&gt;
          {renderLinks()}
      &lt;/S.Container&gt;
    );
  };
  export default Links;
  </code></pre>
  <p>The Context finally:</p>
  <pre><code>export type HomeDataState = {
    currentCakes: Array&lt;CakeDescription&gt;;
    setCurrentCakes?: any;
    linksExpanded: boolean;
    setLinksExpanded?: any;
  };
  
  const initialValue: HomeDataState = {
    currentCakes: [],
    linksExpanded: false,
  };
  
  export const HomeDataContext = createContext(initialValue as HomeDataState);
  
  export const HomeDataContextProvider: FC = ({ children }) =&gt; {
    const [linksExpanded, setLinksExpanded] = useState(initialValue.linksExpanded);
    const [currentCakes, setCurrentCakes] = useState&lt;CakeDescription[]&gt;(initialValue.cakes);
    const fetchCakes = async () =&gt; {
      setCurrCakes(
        await myAxiosConstruct.get(process.env.api);
      );
    };
    useEffect(() =&gt; {
      fetchCakes();
    }, []);
    
    return (
      &lt;HomeDataContext.Provider
        value={{
          currentCakes,
          linksExpanded,
          setLinksExpanded,
        }}
      &gt;
        {children}
      &lt;/HomeDataContext.Provider&gt;
    );
  };
  </code></pre>