React 19: Separating Logic and Markup, Testing with Shallowly and Vitest

This article explores a modern approach to component architecture in React 19, aimed at improving code readability and testability. The author proposes moving business logic and data preparation into specialized hooks like useSetup, leaving only declarative markup within the component itself. This approach promotes a cleaner separation of concerns. The material details the testing process: verifying logic through setup hooks, using the Shallowly library for component isolation, and React Testing Library for verifying user interactions. Finally, a complete practical example using the Vitest framework is provided, which readers can implement in their own projects. The article is useful for developers looking to optimize their React application structure and increase code test coverage.