I have a parent component.
function ParentComponent(){
return (
//loading is asynchronous variable which changes on some event call.
{loading ? (
<ChildComponent></ChildComponent>
): (
<div>Some text...</div>
)}
)
}
and a child component
function ChildComponent(){
useEffect(() => {
console.log("render child component");
}, [])
return (
<div>This is child component</div>
)
}
The problem is that whenever loading state changes to true the child components useEffect hooks get calls every time time even though i am passing [] array as the second argument of useEffect hook. However useEffect works perfectly if i remove the condition and then change the loading state.