Reagent component rendering order management

Question

As you know, React components are displayed in parallel. There is no guarantee that they will complete the rendering.

I want to display the following components in this exact order:

• InterviewContentMain (because it will display the title

  . I need this title for rendering first so that I can work on it in my two other components after rendering. I am going to run some JS on it, etc. Later from the other two components of the DidMount component, so I want this to be displayed first).

• InterviewContainer (should only be displayed after InterviewContentMain has provided)
• TableOfContents (should only be displayed after the interviews by Container and InterviewContentMain have been transmitted)

Here is a bit more context https://youtu.be/OrEq5X9O4bw

I tried a bunch of things, as you can see with the help of life cycle methods, which are probably completely wrong or not even sure what people even do for this kind of scenario, but so far no luck.

const Main = Component({ getInitialState() { console.log("getInitialState being called"); return null; }, renderMe() { console.log("changed InterviewContent state"); this.setState({renderInk: true}); }, componentDidMount() { console.log("InterviewContentMain mounted"); }, render(){ var company = this.props.company; return ( <div id="ft-interview-content"> <p className="section-heading bold font-22" id="interview-heading">Interview</p> <InterviewContent renderMe={this.renderMe} company={company}/> </div> ) } }) export default InterviewContentMain; const InterviewContent = Component({ componentDidMount() { console.log("InterviewContent mounted"); }, renderMe() { console.log("changed InterviewContent state"); this.setState({subParentRendered: true}); }, render(){ var company = this.props.company; return ( <div id="interview-content" className="clear-both"> <div className="column-group"> <div className="all-20"> <TableOfContents renderHeader={this.props.renderMe} renderContent={this.renderMe} company={company}/> </div> <div className="all-80"> <InterviewContainer company={company}/> </div> </div> </div> ) } }) const TableOfContents = Component({ enableInk() { new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"}); }, componentDidMount() { console.log("table of contents mounted"); this.renderHeader; this.renderContent; enableInk(); // I only want to run this if the Header and the Content have rendered first }, render(){ return ( <div> <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p> ) } }) 

UPDATE:

this is what i tried. While all 3 are rendering, I still get the time when TableOfContents displays before InterviewContentMain or InterviewContent, which means TableOfContent after rendering the <p className="section-heading bold font-22" id="interview-heading">Interview</p> instead of rendering under it due to the sticky JS that I tried to apply in TableOfContents

 const InterviewContentMain = Component({ getInitialState() { console.log("getInitialState being called"); return {rendered: false}; }, componentDidMount() { console.log("InterviewContentMain mounted") this.setState({rendered: true}); }, render(){ var company = this.props.company; return ( <div id="ft-interview-content"> <div className="section-heading bold font-22" id="interview-heading">Interview</div> { this.state.rendered && <InterviewContent company={company}/> } </div> ) } }) export default InterviewContentMain; const InterviewContent = Component({ getInitialState() { console.log("getInitialState being called"); return {rendered: false}; }, componentDidMount() { console.log("InterviewContent mounted") this.setState({rendered: true}); }, render(){ var company = this.props.company; return ( <div id="interview-content" className="clear-both"> <div className="column-group"> <div className="all-20"> <TableOfContents company={company}/> </div> <div className="all-80"> <InterviewContainer company={company}/> </div> </div> </div> ) } }) const TableOfContents = Component({ componentDidMount() { const el = ReactDOM.findDOMNode(this); new Ink.UI.Sticky(el,{topElement: "#interview-heading", bottomElement: "#footer"}); console.log("TableOfContents mounted"); }, render(){ return ( <div> <p className="margin-8"><span className="blue medium"><Link to="/">HOME</Link></span></p> </div> ) } }) 

Answer 1

If you want to conditionally visualize a component, wrap it in a conditional expression (whether it be a function or an inline Boolean expression)

You speak:

TableOfContents (should only be displayed after InterviewContainer and InterviewContentMain are passed)

.. therefore, inside the render method of the parent container of TableOfContents check if any values ​​are true, as in the if .

 render(){ var company = this.props.company; return ( <div id="interview-content" className="clear-both"> <div className="column-group"> <div className="all-20"> {this.state.subParentRendered && <TableOfContents renderHeader={this.props.renderMe} renderContent={this.renderMe} company={company}/> } </div> <div className="all-80"> <InterviewContainer company={company}/> </div> </div> </div> ) } 

Answer 2

You call setState on componentDidMount . Name it in componentWillMount . This is an anti-template for calling setState in componentDidMount immediately, because componentDidMount is the one that calls render , see this discussion .

I used a slightly different syntax, but it should be clear.

 class InterviewContentMain ... this.state = { firstRendered: false } componentWillMount() { this.setState({ firstRendered: true }); } render() { return ( {this.state.firstRendered && <InterviewContent /> } ); } class InterviewContent ... this.state = { second: false } componentWillMount() { this.setState({ secondRendered: true }); } render() { return ( {this.state.secondRendered && <TableOfContents /> } ); } class TableOfContents ... render() { return ( <div>Hello World in order</div> ); }