react component lifecycle to execute before render

user_3858177 0
Viewed 17063

I want to have some check before react component is rendered..

Lets say I have a component which renders something like

render() {
    const {videos, actions} = this.props

    return (
        <div>
            <List />
        </div>
    )
}

But before rendering the list I want to have custom check on the list... What I meant to say is before showing the <List /> component I want to have some check and only after that check is finished I want to show the component with render method ..

The check I am mentioning here might be anything like the list should be 10 in count or anything.

I have tried following 

componentWillUpdate(){
    console.log("Component will update")
}

shouldComponentUpdate(){
    console.log("Should component update")
}

From the react documentation I knew that both of them are called before render... But when I do this nothing is printed in the console but render method is called..

I know that componentWillMount() is called before render but what I want is a function which calls render only after the completion or return from the function

Hope you understand and need help

jsx reactjs
2 Answers

You can return early from render with a different result. When the props change, render will be called again with newer props.

class MyComponent {
  render() {
    const { items } = this.props;
    if (items.length < 10) return <span>Loading...</span>;

    return <List items={items} />;
  }
}
user_17150040
Related