Recently I discovered that in nested components, child components are the first to render. Here are some of my observations.
How to test?
- Just console something in componentDidMount or useEffect of each component
How to revert this flow?
- Use componentWillMount and a react hook equivalent to componentWillMount
Why revert?
- There may be a case where some data from API is passed down as props to your child component.
- Due to the async nature, there won't be any data to render for the child and you might get the red flag.🛑
What if I don't want to revert?
- Using conditional rendering in such cases is the ideal solution
function demo(props) {
return (
props.data ? <MyComponent /> : <LoadingAnimations />
)
}
Do let me know about the basic discoveries you made. 👊
PS
Please let me know if I've made any err in this post. 😅
Top comments (0)