Sharing State Across Packages and Apps in a React Monorepo (Web + Mobile)

Article Introduction If you're building a modern app, chances are you’re not just building one thing. You might have: a web app (Next.js) a mobile app (React Native) shared UI packages multiple int...

By · · 1 min read
Sharing State Across Packages and Apps in a React Monorepo (Web + Mobile)

Source: DEV Community

Article Introduction If you're building a modern app, chances are you’re not just building one thing. You might have: a web app (Next.js) a mobile app (React Native) shared UI packages multiple internal modules And if you're using a monorepo (with tools like Turborepo, Nx, or Lerna), you’ll quickly run into this problem: How do you share state across packages… and across apps? The Real Problem Sharing state inside a single React app is easy. Sharing it across: packages apps platforms (web + mobile) is where things break down. You start dealing with: duplicated stores inconsistent state complex syncing logic unnecessary API calls Common Approaches (and Their Limits) Prop drilling / Context Only works inside one React tree. Shared packages You can move state into a shared package… but now everything is tightly coupled. Redux / Zustand across apps Tools like Redux Toolkit or Zustand work great inside a single app. But across packages and apps? You end up writing a lot of glue code. APIs f