React - Can I add component inside of componentDidMount? - reactjs

Question

React complains about this code? Why?
componentDidMount() {
<childComponent />;
}
I need to show childComponent only once when the page loads.

Answer 1

As several of the comments indicate, there is no point to conditionally rendering a component on componentDidMount. That is what the render function is for. The reason for this is that generally the entire React application will be loaded onto the client as soon as the applications URL is hit.
There are instances where one would need to wait for resources or data to load before rendering however:
Lazy loading: It is possible to separate your application into chunks. Those chunks could then be delivered to the client only when needed. Read more about this in the React docs.
Below is an example of one possible implementation (also from the docs):
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
Waiting on data: It is also possible that you may only want to render your component (or some portion of your component) once data is returned from your server. In this case you may decide to initiate your server request in componentDidMount, then conditionally render something once the data is returned.
Below is an example of one possible implementation using hooks (out with 16.8):
const DataHandlerComponent = () => {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [submitting, setSubmitting] = useState(true);
// equivalent to componentDidMount
useEffect(() => {
axios.get('some url')
.then(({ data }) => {
setData(data);
setSubmitting(false);
})
.catch((err) => {
setError(err);
setSubmitting(false)
});
}, []);
// equivalent to render
return (
<div>
{submitting &&
<YourCustomProgress />
}
{!submitting && data &&
<YourCustomComponent data={data} />
}
{!submitting && !data &&
<YourCustomErrorComponent error={error} />
}
</div>
);
};
Hopefully one of these options will fit your needs. If you don't need one of these two approaches, you can probably just render your component in the normal render cycle.

Answer 2

<MyComponent> is just syntactic sugar for abstracting element creating and event binding. It does not make any sense to use it elsewhere than in render.
If you want to show the component only when the page load, you shall update the state and use state-conditioned rendering. React takes it from there, optimizing many thing you didn't think about, and allowing you to have a pattern-compliant, easy to maintain, and easy to debug React application. Something in the lines of:
export default class MyComponent {
constructor(props) {
super(props);
this.state = {
display = false;
}
}
componentDidMount() {
this.setState({display: true});
}
render() {
return this.state.display ? <ChildComponent/> : <div>Not yet</div>;
}
}

Answer 3

class demo extends Component{
constructor(props){
super(props);
this.state = {loading : true}
}
componentDidMount() {
this.setState({loading : false});
}
render(){
return (
{(()=>{
if(this.state.loading == false){
return(
<childComponent />
)
}else{
return (
<div>loading...</div>
)
}
})}
)
}
}