Is React.Suspense really required when using module federation with react?

[sotiristherobot]

Hello,

Until recently I was under the impression that React.Suspense is strictly required to be used when using federated modules but that seems to not be the case. However, in all examples I could find online it's used. Could someone please explain to me what is going on?
I understand how it's a good practice to use React.Suspense, but my question is if it really must be there or if the app can work without it.

The following example works:

Host App webpack.config.js

    new ModuleFederationPlugin({
      name: "Host",
      remotes: {
        Remote: `Remote@http://localhost:4000/moduleEntry.js`,
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
    }),

Host App.tsx

import RemoteButton from "Remote/Button";

function App() {
  return   
   <div >
    <RemoteButton />
  </div>
}

Client webpack.config.js

      name: "Remote",
      filename: "moduleEntry.js",
      exposes: {
        "./Button": "./src/Button",
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
    }),

Client Remote Button

import React from "react";

export const Button = () => <button>Hello!</button>;

export default Button;

[sotiristherobot]

I can partially answer my own question. If we don't use React.Suspense, then React waits for the promise to resolve before rendering the React tree. But still from technical perspective, it's not a must to use suspense.