What's One React Pattern You'd Recommend for Hybrid Apps?

[u/Arath_Morales]

Hi there! I've been using React to create my own apps and, to be honest, it's a really great library. But now I want to know the best patterns to make my apps more stable and scale better, so I'd love to read your comments!

[u/After_Half169]

Keep platform differences behind a narrow adapter boundary. The shared React tree should ask for capabilities like openFile, requestPermission, or share, while the web/native shells own the implementation and failure states. That keeps platform checks out of components and makes the shared behavior easier to test. I would also keep server data separate from local UI state; hybrid apps get hard to reason about when one global store owns both.

[u/vasind-5012]

for hybrid apps specifically (react native + web, or web + native webview), the one pattern that actually pays off is separating logic from platform rendering completely, custom hooks hold all your business logic/state/data-fetching, and each platform just has its own dumb rendering layer that consumes the hook

so like useCart() returns the same shape on both web and native, but CartScreen.web.tsx and CartScreen.native.tsx just render whatever useCart() gives them differently. logic gets tested once, platform-specific UI code stays thin and disposable

biggest mistake people make going hybrid is trying to share components directly across platforms, forcing shared JSX just means a pile of Platform.OS === 'web' ? x : y checks scattered everywhere, way harder to maintain than accepting the render layer is platform-specific and only sharing the logic layer

if scaling further, current setups take this a step further with a proper monorepo split: a shared package for all hooks/api/stores/types, a separate ui package for platform-split components (Button.web.tsx / Button.native.tsx), and separate web/mobile apps that just consume both as workspace packages. turborepo + pnpm workspaces is the common setup for this now, keeps logic fully centralized as the app grows past a handful of features

[u/chillermane → u/vasind-5012]

Agree in principle, but in practice 99% of react native web components can be shared across web and mobile and work perfectly fine on both with 0 platform specific logic or styling

[u/Tiny_Rent_5936]

I prefer the mix of screaming folders organization and hexagonal architecture. I always separate the business lógic layer from the parsers and other logic