useEffect is never invoked in suspended component

[JoseExposito]

I'm trying to Fetch-On-Render (inside a useEffect hook) some data that depends on my component's props.

My component tree is wrapped in a Suspense component and the component that fetches data is a couple of levels down the tree.

Because the useEffect hook is in a suspended component it never gets invoked.

I'm not sure is this is the expected behaviour or a bug.

React version:

Experimental:

  "react": "0.0.0-experimental-e5d06e34b",
  "react-dom": "0.0.0-experimental-e5d06e34b",

Steps To Reproduce

Link to code example:

https://codesandbox.io/s/practical-burnell-75rqm?file=/src/index.js

import React, { Suspense, useEffect } from "react";
import ReactDOM from "react-dom";

class Resource {
  status = "pending";
  result = null;
  suspender = new Promise(resolve => {
    this.resolve = resolve;
  });

  read() {
    if (this.status === "pending") {
      throw this.suspender;
    } else {
      return this.result;
    }
  }

  load() {
    console.log("This method is never invoked");
    this.result = "Profile loaded";
    this.status = "success";
    this.resolve();
  }
}
const resource = new Resource();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <ProfileDetails />
    </Suspense>
  );
}

function ProfileDetails() {
  useEffect(() => {
    console.log("This code is never reached");
    resource.load();
  }, []);

  const user = resource.read();
  return <h1>{user}</h1>;
}

const rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(<ProfilePage />);

The current behavior

The useEffect hook in ProfileDetails is never invoked and the app stays in a loading state forever.

The expected behavior

I'd expect the hook to be called and the data to be loaded.

At the moment the only solution is to move all the data fetching logic outside the Suspense component, in my example to ProfilePage

[vkurchatkin]

I'm not sure is this is the expected behaviour or a bug.

This is expected. useEffect is triggered after a component is rendered and committed. If it is suspended, it's not going to happen

[gaearon]

With fetch-on-render, you have to have the read itself kick off the fetch. (Which is why fetch-on-render isn’t great, generally speaking — for example, it leads to waterfalls with nested components.)

Indeed, if a component's rendering suspends, any effects of that render are discarded. Effects only run for successful renders that haven't been suspended.

[JoseExposito]

Thank you very much for your quick answers @vkramskikh and @gaearon and for the technical explanation.

I'll have to move my fetching logic to the top level component or figure out a way to access React Router props and context to render-as-I-fetch.

[gaearon]

There are no good ergonomic solutions for render-as-you-fetch without either manually hoisting data fetching logic upwards (annoying) or letting a compiler do it (like Relay does). We're working on something in that vein but it's very early so we don't have anything to share yet.

[jezzgoodwin]

Hi, sorry to comment on a closed ticket, but I'm not sure where to ask this.

@gaearon have you guys considered making a useSuspense(val: boolean) hook which could tell the Suspense component above to show the fallback, while still loading the component? This would seem like the best of both worlds as you'd still get the power of Suspense but also be able to fetch data within your component.