score:2

Accepted answer

it does appear that this is an actual bug in the timing of the execution of uselayouteffect for a component within suspense where some other component is lazy loaded. if appbarheader is lazy loaded and counter is not, it works fine, but with counter lazy loaded, appbarheader's uselayouteffect executes before it is fully rendered in the dom (height is still zero).

this sandbox "fixes" it in a very hackish way that helps further demonstrate what is going on.

i added the following to app.js:

  replacerefheader = () => {
    this.setstate({ ref_header: react.createref() });
  };

and then passed this to counter:

<counter replacerefheader={this.replacerefheader} history={routeprops.history} />

then in counter:

const counter = ({ replacerefheader }) => {
  uselayouteffect(() => {
    replacerefheader();
  }, []);

and then i put [props.ref_header] in the dependency array of appbarheader's uselayouteffect.

i'm not proposing that this is what you should do (though something like this could work as a temporary workaround). this was just to demonstrate the timing issue more clearly.

i've logged a new issue here: https://github.com/facebook/react/issues/14869


Related Query

More Query from same tag