Posts

⚡ FlashList Internals Explained

Image
  Why It’s Faster Than FlatList (And When You Should Use It) If you’ve ever replaced FlatList with FlashList and thought: “Why does this feel magically smoother?” The answer is not magic . It’s architecture, predictability, and aggressive recycling . Let’s open the hood and see what actually happens. 🧠 The Core Problem FlashList Solves FlatList tries to answer this question on every scroll : “Which items should I render now?” But it often doesn’t know : Exact item size Layout cost in advance How expensive rendering is So FlatList plays safe: Renders extra items Keeps more views alive Asks JS thread more often FlashList flips this model. 🧩 The FlashList Mental Model (Very Important) FlashList is a recycler first, renderer second Instead of: Creating views → destroying views → recreating views FlashList: Creates a small pool of views Recycles them aggressively Rebinds data instead of re-rendering trees This is the same...

Monorepo Setup Guide

  This guide explains  step by step  how to set up a  monorepo  containing: 📱 A React Native mobile app 🌐 A React Web app (Vite) 📦 Shared packages for: Design tokens  (colors, spacing, fonts) Network layer  (Axios) It also covers  common pitfalls ,  PNPM workspace quirks , and  troubleshooting steps  discovered during setup. 📌 Why Monorepo? A monorepo allows multiple related projects to live in a  single Git repository , enabling: Shared code without publishing packages Consistent dependency versions Atomic changes (one PR for app + shared code) Easier long-term scaling 🧠 High-Level Architecture my-monorepo/ ├── apps/ │ ├── mobile/ # React Native app │ └── web/ # React Web app (Vite) │ ├── packages/ │ ├── design-tokens/ # Shared colors, spacing, fonts │ │ └── src/ │ │ ├── colors.ts │ │ ├── spacing.ts │ │ └── index.ts │ │ │ └── network/ ...