Next.js CompononentDidMount called before page loaded

Question

I setState show to true inside componentDidMount and inside render there is an if(this.state.show == true) return(components...) so what i want is my components should be displayed when page load is completed by next.js.

But for some reason componentdidmount is called before page is displayed, and component animation starts while page is still loading.So when page is actually displayed,user catches animation at middle of it which i dont want.

My static folder has lots of images so i guess next is loading them and thats why it takes long, but why did componentDidMount is called before page finishes loading ? (componentDidMount of index.js not components inside its render method)

I disabled ssr for the components but it didnt work.Page i mentioned is not fetching anything from database and getInitialProps is not used.Its just a next.js page with components inside its render method.

By the way i notice this behaviour only on production,when app is actually deployed to remote server since it takes time to load static folder.On localhost this behaviour is not noticeable.

score 0 · Answer 1 · answered Jul 19 '19 at 18:50

0

Basically, getInitialProps will fire before componentDidMount is invoked.

You can prove that by console.log inside each of these, knowing that getInitialProps's console.log would be loggin in your terminal.

To explain componentDidMount unexpected behavior you have:

Inside a react component tree, componentDidMount() is fired after all children components have also been mounted. This means, that any component's componentDidMount() is fired before its parent has been mounted.

So if you want to measure DOM position and sizes etc, using componentDidMount() of a child component is an unsafe place/ time to do this.

In your case: to get accurate reading from 100% width/height components, a safe place to take such measurements would be inside the componentDidMount() of the top react component. 100% is a width/height relative to the parent/ container. So measurements can only be taken after the parent has been mounted too.

Quoted From.

Also, if you are depending on load events from your getInitialProps, then the property show should be measured and sent as a prop from getInitialProps, as:

class Comp extends React.Component {
  async getInitialProps() {
    const loadableData = await ...loadingevent;
    return {
      show: !!loadableData.data //will return true when the data arrives
    }
  }
}

render(){
  const { show } = this.props;
  if(!show) {
    return <Loading />
  } else {
    return <SomethingElse />
  }
}

answered Jul 19 '19 at 18:50

Sultan H.

2,908
2
11
23

so what is the ...loadingevent ? static resources loaded ? – lastpeony4 Jul 19 '19 at 19:06
Static resources/Data from an API request. depends on what you are doing in your `getInitialProps` – Sultan H. Jul 19 '19 at 20:25
i dont even have getInitialProps in my code.if next is doing it on background i dont know.when i check pages static folder when its loaded,it shows only resources its used on that page,but probably on first load it takes time becase it loads all static folder – lastpeony4 Jul 20 '19 at 11:13
Can you provide the code you have in `componentDidMount` I must have had the wrong idea about your question, apologizes. – Sultan H. Jul 20 '19 at 11:17
componentDidMount(){ this.setState({show:true}) } componentDidMount is called before page is loaded.so when page is displayed,components are called few seconds ago.what i expect is componentDidMount should fire when page is loaded and displayed by next.js.But while next.js is still loading page,componentDidMount is already called. – lastpeony4 Jul 20 '19 at 11:50
@SultanH. don't `console.log` in `getInitialProps` and `componentDidMount` run in different consoles? One runs on the terminal & other in browser console; how do we compare which one ran first? – roshnet Mar 16 '21 at 19:52

Next.js CompononentDidMount called before page loaded

1 Answers1