I want to separate my UI and logic to decrease the size of the bundle. I know I can separate the logic with the headless components approach or custom hooks, etc. but I also want to separate the logic from the bundle. I assume that I can achieve this by lazy-loading all logic and sending UI immediately.

I have created a codesandbox example to demonstrate what I want. There is a component called ui/index.js. It includes a component called <Logic {...props} />. The Logic component gets rendered when the enableLogic state is set to true when the UI component initially renders. The Logic component is lazy-loaded and returns nothing, null. The only purpose of the component is to render the logic.

const Logic = React.lazy(() =>
  import(/* webpackChunkName: "logic" */ "./logic")
);

My question is, having this kind of approach for simple, dummy components would be nonsense but sometimes, some part of the large application's logic can be heavy. I wonder if, separating the logic and UI with this kind of approach can cause me any trouble? Is this approach used by many people? Is there any kind of library that uses the same kind of approach to separate logic and UI with lazy-loading?

I believe that decreasing bundle size for pages with heavy logic can reduce the time that users will see pages.

You can have a look at the implementation via codesandbox link right here. Codesandbox