Quiero separar mi interfaz de usuario y lógica para disminuir el tamaño del paquete. Sé que puedo separar la lógica con el enfoque de headless components o custom hooks , etc. pero también quiero separar la lógica del paquete. Supongo que puedo lograr esto mediante la carga diferida de toda la lógica y el envío de la interfaz de usuario de inmediato.

He creado un ejemplo de codesandbox para demostrar lo que quiero. Hay un componente llamado ui/index.js. Incluye un componente llamado <Logic {...props} /> . El componente Logic se procesa cuando el estado de enableLogic se establece en verdadero cuando el componente de la interfaz de usuario se procesa inicialmente. El componente Logic tiene carga diferida y no devuelve nada, null . El único propósito del componente es representar la lógica.

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

Mi pregunta es, tener este tipo de enfoque para componentes simples y ficticios sería una tontería , pero a veces, una parte de la lógica de la aplicación grande puede ser pesada . Me pregunto si separar la lógica y la interfaz de usuario con este tipo de enfoque puede causarme algún problema. ¿Muchas personas utilizan este enfoque? ¿Hay algún tipo de biblioteca que use el mismo tipo de enfoque para separar la lógica y la interfaz de usuario con carga diferida?

Creo que disminuir el tamaño del paquete para páginas con mucha lógica puede reducir el tiempo que los usuarios verán las páginas.

Puede echar un vistazo a la implementación a través del enlace de codesandbox aquí. codigosandbox