I have a goal to implement a functionality where the background gradient of a page changes depending on whether the child's sublinks are expanded or collapsed. To achieve this, I am using the useContext hook. However, I've noticed that although everything works as expected, there is a delay of approximately 20 seconds for the background gradient to update when the sublinks are collapsed or expanded. I came across a similar issue on Stack Overflow, but I couldn't fully comprehend the solution provided. The problem seems to be caused by all children of the context provider getting rerendered due to a change in the state within the context.
const Wrapper = styled('div')<{linksExpanded : boolean}>`
background-image: linear-gradient(180deg, pink 0.2%, #FFFFFF 3%);
background-color: white;
${({theme})=>theme.breakpoints.up('md')} {
background-image: linear-gradient(180deg, pink 1.5%, #FFFFFF 5.5%);
}
${({linksExpanded , theme})=>linksExpanded && `
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 = () =>
{
const { linksExpanded } = useContext(HomeDataContext);
return (
<Wrapper linksExpanded={linksExpanded}>
<About />
<Links />
<Contacts />
<Gallery />
</Wrapper>
);
};
export default Home;
export const Landing: FC = () => <PageSkeleton
pageContent={
<HomeDataContextProvider><Home /></HomeDataContextProvider>}
/>;
const Links = () => {
const { currentCakes, linksExpanded, setLinksExpanded } = useContext(HomeDataContext);
const renderLinks = () => (
<S.List style={{maxHeight: !linksExpanded ? '0px' : '1000px'}}>
{currentCakes.map((el: CakeDescription, key : number) => (
<li key={el.name}>
<a href='https://google.com'>Link</a>
</li>
))}
</S.List>
);
const handleLinksExpand = () => {
setLinksExpanded(!linksExpanded);
};
return (
<S.Container>
<S.ExpandableLinkContainer>
<ExpandableLink
onClick={handleLinksExpand}
open={linksExpanded}
title='Cakes'
/>
</S.ExpandableLinkContainer>
{renderLinks()}
</S.Container>
);
};
export default Links;
Now let's take a look at the Context:
export type HomeDataState = {
currentCakes: Array<CakeDescription>;
setCurrentCakes?: any;
linksExpanded: boolean;
setLinksExpanded?: any;
};
const initialValue: HomeDataState = {
currentCakes: [],
linksExpanded: false,
};
export const HomeDataContext = createContext(initialValue as HomeDataState);
export const HomeDataContextProvider: FC = ({ children }) => {
const [linksExpanded, setLinksExpanded] = useState(initialValue.linksExpanded);
const [currentCakes, setCurrentCakes] = useState<CakeDescription[]>(initialValue.cakes);
const fetchCakes = async () => {
setCurrCakes(
await myAxiosConstruct.get(process.env.api);
);
};
useEffect(() => {
fetchCakes();
}, []);
return (
<HomeDataContext.Provider
value={{
currentCakes,
linksExpanded,
setLinksExpanded,
}}
>
{children}
</HomeDataContext.Provider>
);
};