why child component does not get rendered in react - reactjs

Question

my doubt is why child component LibrarySubChild is not called, Instead it goes to infinite rendering
my library component is fetching an JSON from local url which in then set the result
import React, { Component } from 'react';
import LibrarySubChild from './Library';
class Library extends Component {
state = {
libraries: []
};
componentDidMount() {
console.log("library componentDidMount method called");
this.fetchData();
}
fetchData = () => {
fetch('/library/get-all-library',{ mode: 'no-cors'})
.then(res => res.json())
.then((data) => {
this.setState({ libraries: data })
console.log(this.state.libraries)
})
.catch(console.log);
};
render() {
console.log("library render method called");
const arrLength=this.state.libraries.length;
return (
this.state.libraries.length>0 ?
<LibrarySubChild libraries={this.state.libraries} /> : arrLength
);
}
}
export default Library;
below component is not rendered
import React, { Component } from 'react';
const LibrarySubChild = ({ libraries }) => {
console.log("library sub child render method called");
return (
<div>
<h1>Contact List</h1>
{libraries.map((library) => (
<div key={library.libid}>
<h5>{library.libName}</h5>
</div>
))}
</div>
)
};
export default LibrarySubChild;
what is the best way to solve this issue
o/p from the console
library componentDidMount method called
library render method called
library componentDidMount method called
(2) [{…}, {…}] this is console output and it goes on for an infinite time

Answer 1

return/render executes before componentDidMount.
the state libraries value (the length of which determines whether LibrarySubChild ever gets rendered) is fetched after Library componentDidMount (as it should). This leads the child component to change after componentDidMount, specifically, an instance of an LibrarySubChild is created and after that, a new instance of Library should be created with the new LibrarySubChild.
The question is, why isn't LibrarySubChild ever getting rendered - rather than an infinite componentDidMount loop in Library?
Answer: Hinted at above, it's because (1) a new instance of Library with the libraries state value reset (in the constructor) to 0 is created rather than simply running componentDidMount once due to React's diffing algorithm (more below) and (2) the state libraries value, which determines what's rendered, is executed at the return/render stage of component lifecycle which necessarily does not have any value in state for libraries because of (1.) - remount is because the root element of Library begins as a p tag and changes to LibrarySubChild being the root.
Put another way, notice that render is executed before componentDidMount in diagram above. Whenever Library is instantiated (or re-mounted), fetchData is executed, which changes libraries state to having > 0 elements, and in turn results in the root element change from a p tag to the LibrarySubChild, which as we know results in a re-mount, and then back to square one (there's the logic behind infinite Library loop and never calling/rendering LibrarySubChild - the question at hand).
Now...you may be thinking "componentDidMount runs only once for any component...Fetching data is always recommended to happen there, right...?"
Generally, sure --- but it's crucial to note React's diffing algorithm (or reconciliation) is the core of whether or any component will remount. So, when will a component will have to remount (thereby triggering componentDidMount)?:
Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from to , or from to , or from to - any of those will lead to a full rebuild.
Is root value of Library changing? Indeed, from a p tag to a more-than-p-tag LibrarySubChild component.
import React, { Component } from 'react';
import LibrarySubChild from './Library';
class Library extends Component {
state = {
libraries: []
};
//componentDidMount RUNS **AFTER RETURN/RENDER**
componentDidMount() {
//Infinitely loops because new instances repeatedly made
//As React's diffing algorithm notes change in underlying
//root element types.
console.log("library componentDidMount method called");
this.fetchData();
}
fetchData = () => {
fetch('/library/get-all-library',{ mode: 'no-cors'})
.then(res => res.json())
.then((data) => {
//Side note: Try not to mutate state directly, like below:
Suggestion: this.setState({libraries [...this.state.libraries, data]})
this.setState({ libraries: data })
console.log(this.state.libraries)
})
.catch(console.log);
};
render() {
console.log("library render method called");
const arrLength=this.state.libraries.length;
return (
this.state.libraries.length>0 ?
<LibrarySubChild libraries={this.state.libraries} /> : 0
);
}
}
export default Library;
Good Luck,
Mo