Leipzig.js #3 (Hybrid) - How Service Injection Fixes React's Broken Architecture

👋 Hello and welcome to the 3rd Leipzig.js meetup 🥳! This time we will have a hot topic from Frank Reimann about broken dependency injection in react and how we can fix this.

The event is suitable for intermediate and experts

About the event:
React's current architectural patterns fail to scale beyond medium-complexity applications due to fundamental issues with hooks-based state management, prop drilling, and lack of clear separation of concerns. This talk presents React Service Injection (RSI) as a paradigm shift that eliminates these scaling problems by introducing compile-time dependency injection and service-oriented architecture to React applications.

The core problem lies in React's conflation of UI rendering with business logic and state management. Components become coupled to data sources, testing requires complex mock setups, and architectural boundaries dissolve as applications grow. Traditional solutions like Redux and modern alternatives like Zustand add complexity without solving the underlying coupling issues.

RSI addresses these problems through two key technologies: TDI2 (TypeScript Dependency Injection) for compile-time dependency injection and Valtio for reactive state management. This combination enables components to become pure templates while business logic resides in injectable services. The approach eliminates props drilling and hooks complexity entirely, provides automatic cross-component synchronization, and enables enterprise-grade testing patterns familiar to backend and Angular developers.

The talk demonstrates RSI through prepared code examples, transforming React's official useEffect patterns into service-based alternatives. The architectural approach draws from proven backend patterns including repository, service, and adapter layers while maintaining React's component model.

Results indicate significant improvements in code organization, testing simplicity, and team scalability. The pattern enables interface-driven development, SOLID principle compliance, and clear architectural boundaries previously impossible in React applications. Early adoption suggests this approach could represent React's evolution from view library to application framework.

☝ Important to know:

👨‍💼 Speaker: Frank Reimann
💬 Language: German/English - German but english is also possible, depends on the audience
🦾 Level: Intermediate and expert
🧠 Previous knowledge (Desirable):

• You have experience with React architecture and its pain points
• Your React architecture doesn't scale and you're looking for reasons / solutions
• Nice to have: Spring Boot, Angular, SOLID, TypeScript, Knowedge of software architecture patterns (DDD, Ports & Adapters, Onion)

📹 Will it be recorded? Yes

🗣️ About our speaker: Frank Reimann (https://github.com/7frank)
Frank likes learning new concepts and exploring tech by building prototypes.

⏰ Schedule:

• Entry: ~ 6:00 pm ⚠️
• Orga: 6:15 – 6:30 pm
• Start of the event: ~ 6:30 pm
• Event: 45min - 60min + Question round
• A nice time together afterwards, so please come by 🦄
• Livestreamlink: Coming shortly before the event.

🏡 Location: Singular IT

We will have food and drinks, thx to our Sponsor Singular IT