Javascript 尽管在react js中使用了memo和useCallback，但如何防止在更改父组件中的状态时不必要地重新呈现子组件

我有一个仪表板应用程序，它有一个侧栏和一个路由放置在那里的内容体，我在app.js中为单击按钮打开和关闭侧栏定义了一个状态，但是当我打开和关闭侧栏并且状态改变时，路由我内容体中所有URL的组件再次调用API；尽管我在我的childs组件中使用React.memo，并且在打开和关闭侧边栏函数中使用useCallback，但是每次打开和关闭侧边栏后它都会再次调用API，请告诉我问题出在哪里。 我的部分代码如下所示： App.js==>

功能应用程序（道具）{
.
.
.
const[open，setOpen]=useState（true）；
. 
.
.
const openSideBar=useCallback（（）=>{
setOpen（！open）；
}，[开放]；
.
.
.
返回(
{
！props.loading&&props.links！==未定义&&props.links.length>0？
(
{
props.links.map（函数（链接、索引）{
if（link.Childs&&link.Childs.length==0）{
返回(
{props.open？：''}
{link.Url&&link.Url.trim（）
);
}
否则{
返回(
handleClick（link.Id，e）}
班级={{
root:props.open？“drt\u linkitemclaps”：“drt\u SelectedLinkOnCloseSidebar”，
选中：props.open？“drt\u LinkItemColSelected”：“drt\u LinkItemColSelectedOnClose”}
>
{handleOpen（link.Id）？：'}
{props.open？：''}
{props.open？（handloopen（link.Id）？：：null}
{！道具，开门？
handleClick（link.Id，e）}
班级={{
根：“drt_linkitemclapsonclosesidebar”，
选中：“drt_LinkItemColSelectedOnClose”}
>
{handleOpen（link.Id）？：'}
{link.Childs.map（函数（项，索引）{
返回(
{item.Url&&item.Url.trim（）
);
})}
: ''}
{props.open？
{link.Childs.map（函数（项，索引）{
返回(
{props.open？：''}
{item.Url&&item.Url.trim（）
);
})}
：null}
);
}
})
}
) :