React.Suspense provide a lifecycle so components can handle the `display:none` removal

Do you want to request a feature or report a bug?

It’s a feature.

What is the current behavior?

React.Suspense mounts its children with a display: none style if a promise is thrown. Once the thrown promise is resolved, React removes the display: none style.

What is the expected behavior?

The children components have no easy way to know when the display: none style is removed by React. This is problematic when one child component needs to read from the DOM layout to correctly display its elements. Most people wait for the componentDidMount callback to trigger, but because the element is display: none, it can’t read any value from the DOM layout.

The issue was discovered in https://github.com/mui-org/material-ui/issues/14077. I believe that React should provide a lifecycle so the children components know when they are visible, that it’s safe to do layout computations.

The best workaround I’m aware of it to use the Intersection Observer API but it requires a polyfill on IE 11 and Safari.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Version: 16.7.0-alpha.2

[gaearon]

Small update.

We released 18 alpha for libraries authors to start testing. Notably, there is no concurrent “mode” anymore, instead you opt into features as you use them. So it’s much easier to adopt.

The new behavior is to delay effects from firing until the tree unsuspends, which solves a bunch of issues like in this thread. See https://github.com/mui-org/material-ui/issues/14077#issuecomment-861965259 for a concrete example.

[codyml]

Had this same issue trying to trigger a transition on suspended component mount; ended up writing a wrapped Suspense that passes suspended status to descendants via context. Also relies on potentially hacky approach of tracking mount status of the fallback, but might help:

import React, {
  useEffect,
  useState,
  Suspense as ReactSuspense,
  createContext,
  useContext,
} from 'react';
import { node } from 'prop-types';

const SuspenseContext = createContext();

/*
 * Suspense apparently renders a suspended tree before it resumes,
 * hiding it with `display: none;`.  This tweaked version lets child
 * components use the `useSuspended` hook to know if they're in a
 * rendered-while-suspended tree.
 */

export default function Suspense({ fallback, children }) {
  const [suspended, setSuspended] = useState(true);
  const Fallback = props => {
    useEffect(() => {
      setSuspended(true);
      return () => setSuspended(false);
    }, []);

    return props.children;
  };

  return (
    <ReactSuspense fallback={<Fallback>{fallback}</Fallback>}>
      <SuspenseContext.Provider value={suspended}>
        {children}
      </SuspenseContext.Provider>
    </ReactSuspense>
  );
}

Suspense.propTypes = {
  fallback: node,
  children: node,
};

Suspense.defaultProps = {
  fallback: null,
  children: null,
};

export function useSuspended() {
  return useContext(SuspenseContext);
}

Then, you can do something like this: https://codesandbox.io/s/wild-feather-vynpq. Might need to be modified for situations with multiple nested Suspense/lazy?