CODEWITHSUNDEEP
reactjsredux
user10712252
user10712252

Reputation: 31

re-render triggered in componentDidMount

In the life cycle of a component, if a re-render is triggered by some synchronous operation in componentDidMount(), would the user have a chance to see the first render content on browser? e.g. If I toggle a start downloading boolean flag in componentDidMount() through redux, which then causes the re-render because the flag is mapped to redux for the component.

-------Update Info-----

The sync operation is just changing the start downloading flag to true, and the flag is mapped to the component, where the flag is checked to determine the JSX contents in render(). In redux, right after the flag is set to true, then the downloading operation begins. When downloading is completed, redux sets the flag to false. Consider the following lifecycle sequence:

render() //JSX A  
componentDidMount() // the flag is set  
render() // re-render JSX B

Will JSX A be displayed in the browser, regardless of how quick it is?
the action creator called in componentDidMount(): 

export const downloadArticleList = () => {
        return (dispatch, getState) => {
        // set start flag to true synchronously, before axios.get
            dispatch(listDownloadStart());  
            axios.get('/articles')
                .then(response => {
                //set the flag to false and update the data
                    dispatch(saveArticleList(response.data))
                })
                .catch(err => {
                    dispatch(serverFail(err))
                    console.log("[downloadArticleList]] axios", err);
                })
        }
    }

It is a SPA, no SSR.

Upvotes: 3

Views: 2761

Answers (3)

Cong Dan Luong
Cong Dan Luong

Reputation: 1702

If your project is complicated, the easiest way is using 

setTimeout(() => {
    this.setState({
          // your new flag here
    })
}, 0);

Upvotes: 1

Alireza Yadegari
Alireza Yadegari

Reputation: 305

As we discuss in the comment here is the example : 

interface ExampleComponentProps {

}
interface ExampleComponentState {
    loading: boolean;
}

export class ExampleComponent extends React.Component<ExampleComponentProps, ExampleComponentState>{
    constructor(props, context) {
        super(props, context);

        this.state = { loading: true };
    }

    componentDidMount() {
        //some method {}

        //after get result 
        this.setState({
            loading: false
        })
    }

    render() {
        return (
            <div>
                <Spin spinning={this.state.loading} >
                    //Your COmponent here
                </Spin>
            </div>
        )
    }
}

Upvotes: 1

Alex Antonov
Alex Antonov

Reputation: 15166

It depends on a few things:

  • How long sync operation takes
  • Are you doing SSR (thus there will be time dedicated for DOM rehydrating)

Generally, I'd consider this as an antipattern

Upvotes: 1

Related Questions