javascriptreactjsreduxreact-starter-kit

React showing component before going through the render method

My react component is being showed (and it is complete functional) before going through the render() method.

The project is using the react-starter-kit, and a similar route code can be accessed here.

Router code

In the picture above I'm calling a bunch of actions and then returning the target component (Question).

Part of the component code is in the following image:

Component code

The problem is that the component is available and completely functional before both console.log be called:

Console debugging

In this case the component is available since the fist action call, but the logs are shown after everything. I want to add a loader since the beginning. Anyone have any idea about it?

Solution

  • That's probably the component being rendered on the server-side.

    Since it will set all flags/states to "loaded" because it was rendered it might cause conflicts with the frontend scritps.

    To avoid such conflicts you can check if your code is running on frontend or backend using:

    const isBack = typeof window === 'undefined';

    If there is no DOM available then it is on the server.