Conditionally rendering a react component

Question

For a component that is hidden at some point in its lifecycle, what is the best way to render it? 1) render the component, but do not show it (display:none). 2) render the component only when needed. What is better for performance? If the component's props and state update later, would it be better to have the component present, but hidden in the virtual DOM?

render() {
    return (
        <div style={{display: this.props.visible ? 'block' : 'none'}}>
            <RestofComponentHere />
        </div>
    );
}

or this:

render() {
    if (!this.props.visible) {
        return null;
    }
    return (
        <div>
            <RestofComponentHere />
        </div>
    );
}

If we talk about performance, first variant better, because `Node` exists in `DOM`, and React only changes css property in order to show `Node`. Second variant is opposite, because React needs add/remove Node to/from `DOM`., based on best practices - adding or removing elements always slower than just change element visibility — Oleksandr T., Dec 24 '16 at 10:13
Yes. But there is also a balance between the first rendering of the page (which would be quicker when the component is not rendered at all) and future uses of the component. Let's say the component is a submenu, that is shown only when the user decides to filter things on the page. Most users will never do that. So for them, the page would render quicker... — reggie, Dec 24 '16 at 10:20
Possible duplicate of [How to load components conditionally in ReactJS](https://stackoverflow.com/questions/21278299/how-to-load-components-conditionally-in-reactjs) — Red fx, Sep 14 '17 at 13:23

score 0 · Answer 1 · edited May 23 '17 at 10:31

Just go with what works best for that situation. Sometimes it's method 1 and sometimes method 2. If you find out that it's slowing down your app then it's pretty easy to convert to method 1, but this should only if happen if you are conditionally rendering a ton of times. When you have a ref to the component then you want to always render it so that you can access the ref in componentDidMount and so you would have it hidden.

First method is faster as shown in answer here but don't do micro optimizations for the sake of it if conditionally rendering is cleaner code.

I'v used a mixture in my apps.

score 0 · Answer 2 · answered May 22 '17 at 18:43

I would suggest to go with the state values and have a condition based on state values to decide whether the component to be shown or hidden.

    constructor(props){
       //Set some initial condition for display depending on prop or default value
        //Something similar to this: 
        display: props.toDisplay === undefined ? true : props.toDisplay
    } 

    componentDidMount(){
        //update the state depending on the response or change
    } 

    onClick(event){
      //It might depend on someOther component's click action. 
    }

The render method would just have the following:

    render(){
       const toDisplay = this.state.display 
       if(toDisplay && 
        // Component To render
        )
    }

Conditionally rendering a react component

2 Answers2