React two useeffects - reactjs

Question

Hi i have this function for rendering page, i wanna have function submenu, what will be generating dynamically submenus for my pages. I need get first id from outer function and after it fetch data for submenu, but useEffect in Submenu dont fetch data.
import Submenu from '../Submenu.js'
import React, {useEffect, useState} from 'react';
import * as myUtilities from '../Utilities';
function InfoForPatPage (props) {
const [Obsah,setObsah] = useState([]);
const [image,setimage] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
const [id, setId] = useState("");
const loadAsyncData = async () => {
setIsLoading(true);
setError(null);
try {
const resp = await fetch(myUtilities.translateApiUrl("/pages/?type=web.InfoForPatientsPage")).then(r=>r.json());
const id = await resp.items[0].id;
const data = await fetch(myUtilities.translateApiUrl("/pages/"+id+"/")).then(r=>r.json());
const img = await data.banner.meta
console.log(id)
setObsah(data);
setimage(img)
setId(id)
setIsLoading(false);
} catch(e) {
setError(e);
setIsLoading(false);
}
}
useEffect(() => {
loadAsyncData();
}, []);
return (........
<Submenu id={ id } />
)
}
export default InfoForPatPage;
and this inner function
import React, {useEffect, useState} from 'react';
import * as myUtilities from './Utilities';
function Submenu (props) {
const [Obsah,setObsah] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
const id = props.id
const loadAsyncSubmenu = async () => {
setIsLoading(true);
setError(null);
try {
console.log(url)
const short_url = "/pages/?child_of=" + id +"&fields=_,id"
const url = myUtilities.translateApiUrl(short_url)
console.log(url)
const resp = await fetch(url).then(r=>r.json());
console.log(resp)
const childs = []
for (let index = 0; index < resp.items.length; index++) {
const page_short_url = "/pages/"+ resp.items[index].id +"/?fields=_,title,ikona"
const page_url = myUtilities.translateApiUrl(short_url)
const child = await fetch(url).then(r=>r.json());
childs.push(child)}
console.log(childs)
setObsah(childs);
setIsLoading(false);
} catch(e) {
setError(e);
setIsLoading(false);
}
useEffect(() => {
loadAsyncSubmenu();
}, []);
return (
<div class="submenu " id="buttons">
{Obsah.map ( item => ( <div class="submentu_item "> <img src={item.ikona.meta.download_url} />
<a href="{{ child.get_url }}#buttons" />
</div>
))}
</div>)}}
export default Submenu;
But inner Useeffect dont start, if i delete try and try it without try, it gimmy error that id is undefined. Can anybody help with me with idea, how start inner useeffect after i have fetch all data from my outer useeffect

Answer 1

Your second useEffect has some flaws. Thats the problem.
useEffect(() => {
if (!id) {
return;
}
loadAsyncSubmenu();
}, [id]);
At first: At the start your id is an empty string. So you probably don't want to start a request in your child component. Or better: dont render the child component at all.
Second: After your parent component update the id changes. But your child component doesn't listen to it. so we add id as a dependency.