Start React root render after Server fetch success

Question

I want to fetch some data (like translations/initial settings etc.) and after that launch an application

How do I should do that in the best way?

Now I am rendering a spinner and after the fetch success I re-render React root. But I don't sure that is really good way.

Thanks for any help !

//launch fetch and wait for the response. After that re -render Root
bootPreparationInit()
    .then(() => {
        render(
            <RHTLContainer>
                <MuiThemeProvider>
                        <RootContainer store={store} history={history} />
                </MuiThemeProvider>
            </RHTLContainer>,
            document.getElementById("root")
        );
    });

// it for tests. Because Karma sometimes can't see the root element
(() => {
    if (!document.getElementById("root")) {
        const rootEl = document.createElement("div");
        rootEl.setAttribute("id", "root");
        document.body.appendChild(rootEl);
    }
})();

//  render a spinner before data load
render(
    <RHTLContainer>
        <MuiThemeProvider>

                <div className="spinner-ico-box">
                    <CircularProgress />
                </div>

        </MuiThemeProvider>
    </RHTLContainer>,
    document.getElementById("root")
);

// it for webpack HMR
if (module.hot) {
    module.hot.accept("./core/containers/Root.container", () => {
        const NewRootContainer = require("./core/containers/Root.container").default;

        render(
            <RHTLContainer>
                <NewRootContainer store={store} history={history} />
            </RHTLContainer>,
            document.getElementById("root")
        );
    });
}

Bartek Fryzowicz · Answer 1 · 2017-03-09T11:30:07.083

I'd suggest fetching data in RHTLContainer component constructor and on fetch success saving fetched data in state:

constructor() {
     ...
     this.state = {
        dataLoading: true;
     };
     bootPreparationInit()
        .then((responseData) => {
           ...
           this.setState({
               dataLoading: false,
               fetchedData: respondeData
           });
        });
}

And then inside your component you can use this.state.dataLoading to conditionally show spinner.

Start React root render after Server fetch success

1 Answers1