re-render triggered in componentDidMount

Question

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.

Answer 1

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