Bundled React is having worse performance

[tiagomta]

Hi,

I've recently came across an issue with React, when in development mode react was really slow.
I've tried everything, until in a desperate move I've loaded my app using react-scripts, which uses webpack, and the problem was gone.
The bundler is compiling a react into a non-optimized code

This simple code:

import * as React from "react";
import * as ReactDOM from "react-dom/client";

const App = () => {
  console.log("render", new Date().getTime());
  const [count, setCount] = React.useState(0);
  const increment = () => {
    setCount((v) => v + 1);
  };
  return React.createElement(
    React.Fragment,
    null,
    React.createElement("h5", null, count),
    React.createElement("button", { onClick: increment }, "increment")
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(React.StrictMode, null, React.createElement(App)));

with these bundler settings:

    entryPoints: [filename],
    minify: mode === "production",
    bundle: true,
    write: false,
    outdir: "out",
    legalComments: "none",
    keepNames: true,
    treeShaking: true,
    format: "esm",

if I instead use the script tags provided by react, the application behaves as expected...

Maybe there is something wrong with my configuration, or is this a know issue?
Thanks in advance

[evanw]

I don't know why your code is slow. I recommend using a profiler to figure this out. The esbuild repo is not the right place to get help with debugging your code.

[tiagomta]

Update, changing it to minify improves this to 160ms, the esbuild is the problem

[tiagomta]

the code that results from the bundle is not great, if I change the bundler to webpack the issue is gone...

[evanw]

It's not clear from this issue description that there's anything wrong with esbuild here, so I'm marking this as unactionable. If you use a profiler to determine that some specific thing is slow, and that esbuild is causing that specific thing, then that's something that can be fixed. Saying the output is "not great" doesn't communicate anything meaningful about a problem with esbuild.

[evanw]

I'm closing this issue because there isn't enough information to know if this is a problem with esbuild or not. We can reopen it later if it becomes clear that this is indeed a problem with esbuild.

Note that when bundle is enabled and platform is set to browser (the default value), then esbuild will automatically define process.env.NODE_ENV to either development (if minify is disabled) or production (if minify is enabled). That behavior is documented here: https://esbuild.github.io/api/#platform. This causes the development build of React to be bundled if minify is false and the production build of React to be bundled if minify is true. This behavior is intentional and is not a bug. If you want something different to happen, you can use esbuild's define feature to set process.env.NODE_ENV to whatever value you want it to be.