Bug: [Sync mode] Effects are not re-run after suspense completes

[1000hz]

As reported in #14536, React mounts suspended components to the DOM with display:none and fires effects before the components are visible. Once suspense has completed, effects are not re-run. This means that any component that reads layout info from the DOM becomes visible with content based on a stale layout.

React version: 16.12.0

Steps To Reproduce

1. Create a component that reads layout info from the DOM
2. Render that component in a suspense alongside a lazy component

Link to code example: https://codesandbox.io/s/busy-jang-75wmf

The current behavior

The layout-dependent component is rendered incorrectly based on when it was still invisible.

The expected behavior

The layout-dependent component should render correctly regardless of whether or not siblings are lazy and caused suspense.

[bvaughn]

cc @lunaruan in case this ties into the hidden stuff any.

[gaearon]

My understanding is that this is not possible to fix in the legacy (ReactDOM.render) mode. Sorry. It's a quirk of the legacy mode which we can't fix without introducing other breaking changes. This is solved in Blocking Mode and Concurrent Mode, but they are only available in experimental releases for now.

[gaearon]

This is fixed in React 18.

https://codesandbox.io/s/admiring-forest-tsnnbq?file=/src/index.js

You need to upgrade to createRoot() for the fix to work.