Ecosystem & Tooling
React ecosystem tools and frameworks, including Vite, TanStack Start, routers, React Aria, XState, and framework migrations.
34%
Best tweets about React
Explore the best tweets about React, including components, hooks, Server Components, performance, state, architecture, releases, and production lessons.
React JavaScript framework patterns, components, hooks, rendering, performance, architecture, releases, debugging, and real application experience.
Original Xholic analysis
The 50-post React conversation was predominantly supportive (66%) and positive (68%), with Ecosystem & Tooling the most frequent theme (34%), followed by Rendering & Performance (30%). Posts repeatedly addressed tooling releases, rerender diagnosis, memoization, state placement, and application architecture. Media appeared in 72% of posts and had a higher median all-time score than text posts (42.45 versus 23.7).
68% of posts
All-time engagement
100% of posts
Published in 90 days
Conversation map
React ecosystem tools and frameworks, including Vite, TanStack Start, routers, React Aria, XState, and framework migrations.
34%
Rendering behavior, reconciliation, rerenders, memoization, React Compiler, profiling, and performance optimization.
30%
Hooks, effects, derived state, state placement, subscriptions, and client/server state-management choices.
24%
Component composition, reusable UI patterns, design systems, accessibility, loading/error states, animations, and UI generation.
22%
React Native and Expo development: navigation, native APIs, mobile UX, cross-platform tradeoffs, and deployment workflows.
22%
Application architecture: plugin systems, monorepos, project conventions, production stack decisions, testing, and scalability.
18%
Server Components, server actions, SSR, streaming, data-fetching waterfalls, and server/client rendering boundaries.
16%
React internals including JSX compilation, virtual DOM, reconciliation algorithms, and custom React implementations.
14%
Tone and stance
Performance benchmark
Posts with media make up 72% of this collection. Their median all-time score is 42.5, compared with 23.7 for text-only posts.
Format mix
Consensus and debate
Shared view
Practical performance guidance centers on identifying unnecessary rerenders, avoiding subscriptions to data that is not rendered, and using React Compiler’s build-time memoization rather than manually applying memoization everywhere.
Shared view
State and data-flow posts emphasize that UI state can live in places beyond React state—including the URL, memory, local storage, the server, or derived values—and describe a React Native approach that sends a server-parsed JSON tree to the client.
Shared view
Ecosystem posts highlight concrete tooling updates: React Aria support in shadcn/ui, XState Store v4, and React Navigation’s Static API for new applications.
Open debate
One post recommends a comparatively minimal React, Vite, and router stack for most apps. Another describes Pascal Editor as a React 19, Next.js 16, WebGPU, Three.js, Zustand, and Turborepo-based application with dirty-node recomputation. They illustrate different approaches to application complexity.
Open debate
Posts range from a broad critique of abstraction layers to specific measurement and diagnosis practices: one benchmark was rerun after a compression inconsistency, while react-scan was used to identify unnecessary rerenders in a filter UI.
What performs
The five supplied score outliers cover component extraction, UI motion, a critique of abstraction layers, React internals, and rerender debugging. Tweet 2009651698500051399 scored 2012.39, or 58.45× the overall median.
Rendering & Performance had a median all-time score of 47.047, higher than State Management & Hooks at 22.18. Relevant posts include rerender diagnosis, agent access to React DevTools for render profiling, and skepticism about unnecessary useEffect usage.
Media appeared in 36 of 50 posts (72%). Its median all-time score was 42.45, compared with 23.7 for text posts.
Statistical standouts
Creator landscape
The five most represented creators account for 20% of the selected posts.
1. George Moller
@_georgemoller
2 posts
2. David K 🎹
@DavidKPiano
2 posts
3. freeCodeCamp.org
@freeCodeCamp
2 posts
4. GitHub Projects Community
@GithubProjects
2 posts
5. Harshil Tomar
@Hartdrawss
2 posts
6. Joe Sluis
@jyobo10
2 posts
George Moller’s two posts cover avoiding data-fetching waterfalls in Server Components and the React Compiler v1.0 release.
David K’s posts address rerender discipline—subscribing only to rendered data—and introduce XState Store v4 as an event-driven, cross-framework state-management option.
Joe Sluis documents a from-scratch React implementation covering virtual DOM, reconciliation, hooks, and JSX, then shares an examples site rendered with that implementation.
Themes, sentiment, stance, and post format are classified per tweet. All counts, shares, medians, creator concentration, freshness, and performance comparisons are then calculated directly from the published snapshot.
Xholic's all-time score compares engagement while accounting for reach, post age, and creator consistency. It is used for relative comparisons within this collection.
This report analyzes the exact 50-post snapshot shown below. AI identifies editorial categories and drafts explanations; all statistics are calculated from the snapshot, and every narrative claim is checked against cited posts before publication.
Best React tweets
Ranked 01–50
@da_fant ·
you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure
@emilkowalski ·
Interaction for Linear’s homepage using motion/react’s `useSpring`, quite fun to play with
@jyobo10 ·
I rebuilt React from scratch to understand what it’s actually doing under the hood. I wrote an article about it that walks through: • the virtual DOM • a diffing/reconciliation algorithm • how hooks like useEffect work internally • how JSX compiles into JavaScript If you're a React dev or interested in framework internals, you might enjoy it.
@steventey ·
react-scan by @aidenybai is truly a gamechanger for debugging frontend perf issues. case in point: @dubdotco's filter UI has been "feeling" sluggish, so I set up react-scan and poof – it found the exact root cause (unnecessary rerenders). filters should feel much quicker now!
@betomoedano ·
Claude Fable 5 absolutely cooked 😮 I asked it to build a habit tracker with Expo, using the Code with Beto MCP server. It shipped: – zoom transitions – sortable habit list – app icon (Code with Beto Skill) – home screen widget with a heatmap – onboarding, haptics, animations, dark mode – notification actions (mark a habit done without opening the app) 100% React Native 👇
@KanikaBK ·
🚨 JUST IN: SOMEONE JUST BUILT A FREE TOOL that lets you DESIGN YOUR DREAM HOME. In 3D. IN YOUR BROWSER. It designs buildings. Generates geometry. Handles walls, floors, ceilings, roofs. All by itself. All in real time. It's called Pascal Editor. You give it a wall. It calculates the mitering, cuts out the doors and windows, and generates the geometry automatically. You come back and there's a finished 3D building waiting. Not a render. Not a mockup. The actual thing. Not a CAD tool. Not a BIM software. A fully stateful 3D building editor that runs in your browser with WebGPU. Here's what it does on its own: → Spawns geometry systems in parallel, each handling a different node type. Walls, slabs, ceilings, roofs all updating simultaneously → Writes real geometry, runs CSG boolean operations, cuts door and window openings without asking you once → Builds full building hierarchies. Site, building, level, wall, zone, item. Everything connected and queryable → Remembers your entire scene across sessions. Undo and redo with 50 step history. Persisted to IndexedDB automatically → Handles collision detection and placement validation so furniture never clips through walls → Connects tools directly to state. Draw a wall, place a door, create a zone. Everything updates in real time. HERE'S THE WILDEST PART: Pascal Editor hit GitHub and the architecture is genuinely impressive. Turborepo monorepo. React 19 and Next.js 16. Three.js with WebGPU renderer. Zustand for state. The entire scene runs on a dirty node system so only changed geometry ever recomputes. The community is already asking to extend it with custom tools and renderers. 4.2K GitHub stars. 634 forks. Built with React Three Fiber. 100% Open Source. MIT License. 👇
@_georgemoller ·
⚛️ React tip: How to avoid data fetching waterfalls in Server Components ↓
@_georgemoller ·
❌ useMemo, useCallback, memo everywhere ✅ React Compiler handles it automatically React Compiler v1.0 is here. It analyzes your code at build time and adds memoization where needed.↓
@DavidKPiano ·
XState Store v4 is released 🚀 Simple, small state management for stores (like Zustand/Redux) + atoms (like Jotai/Recoil) Works everywhere: vanilla, React, Vue, Svelte, Solid, and more. Event-driven, type-safe, batteries included, *really* agent-friendly. npm i @xstate/store Some new features:
@fernandorojo ·
I get a lot of questions about how we made markdown parsing fast on the @v0 mobile app. The answer: we do less work on the client. v0 doesn’t parse markdown strings in React Native. Instead, the server parses MDX and streams a JSON tree to the client. During message streaming, the server sends JSON patches for each chunk. The client applies the patch to its local cache using jsondiffpatch. We even modified the jsondiffpatch protocol to send the diff for string fields inside any JSON. Finally, the client recursively loops over the JSON tree and renders custom components for each MDX element.
@Hartdrawss ·
Here is a 10X Vibe coding HACK : Most people have no CLAUDE[.]md. Or it's 3 lines: "use TypeScript and Tailwind." Mine is 200+ lines. Covers four sections : STACK - Exact versions of every dependency - Which library handles what (React Query for server state, Zustand for client state) - What I explicitly don't use and why (no class components, no Redux, no inline styles, file naming conventations and super important stuff like global state management, api structuring and success / failure flows if stripe is needed ) CONVENTIONS - Folder structure with examples - Naming conventions: what's a service, a hook, a util - Error handling pattern: always use the custom AppError class - API response format for every endpoint SECURITY (non-negotiable rules for every file) - "Never store secrets in frontend code" - "Every route requires auth middleware unless explicitly marked public" - "Validate all inputs with Zod before any processing" - "Never return raw DB objects — always select fields explicitly" OUTPUT QUALITY - "Always include error handling and edge cases" - "Always include loading and error states" - "Write tests for all service layer functions" I am honestly organising it better each day and trying to review more Skills to make it better
@0xaxit ·
Everyone on my timeline was losing it this week over @emergentlabs raising $130M at a $1.5B valuation. So I gave the same prompt to @boltdotnew @v0 @lovable_dev and Emergent, and read every line of code. One of them shipped a 2019 stack in 2026. Create React App. CRACO. Mongo. No TypeScript. Full teardown 👇 ▶️ recommended watch speed: 1.5x 00:00 The $1.5B question 00:50 The prompt — same for all 4 01:15 @boltdotnew goes first, no pressure 08:48 @emergentlabs enters to a standing ovation 09:41 the UI is a genuine 10/10 12:11 …then I opened the code 14:30 Create React App + CRACO in 2026 15:08 @theo called this exact thing 4 years ago 19:33 Mongo, for a relational app (@theo again) 21:00 the Emergent scorecard 22:23 @v0 has thoughts on your design taste 28:06 @lovable_dev, living up to the name (mostly) 35:03 who I'd actually ship to production 35:50 my questions for @emergentlabs + YC Both @theo videos are linked below — genuinely worth the watch 🧵
@ImSh4yy ·
I'm getting close to a year running TanStack Start in production. I have two apps on Cloudflare Workers, they are completely stateless and talk to the backend API via tRPC. I'm not using any of the proprietary features of Workers, just have their Vite plugin to serve the Start app. Everything else is containerized and deployed to Swarm. It's been a great experience so far, and I can't recommend it enough. If you're starting a new project, or looking to migrate your current one to a different React framework, I highly recommend giving it a try.
@freeCodeCamp ·
Large React apps get harder to scale when every feature has to live inside the core codebase. In this tutorial, Jessica shows you how to design a React plugin architecture with TypeScript that is type-safe, lazy-loaded, and secure. You'll also learn about hosting APIs, plugin lifecycles, separate bundling, runtime loading, and more. https://t.co/SsT4uIKAnH
@dabit3 ·
Something cool - had Devin build a React Native app with @expo and test it on my phone in real time AI writes code in the cloud, I scan a QR code, app shows up on my device with hot reload. No local dev environment needed! I can run parallel sessions from anywhere.
@GithubProjects ·
Liquid DOM is a monorepo for WebGPU-powered liquid-glass rendering and SwiftUI-style layout, with packages for React, Three.js, and React Three Fiber. - Renderer-agnostic layout engine with SwiftUI-style measurement and placement - WebGPU liquid-glass renderer backed by a DOM scene graph - React 19 bindings for declarative glass UI - Three.js and R3F adapters for compositing liquid glass over existing WebGPU scenes
@Piotrski ·
I built a tool that gives AI agents access to React DevTools ⚛️🤖 Your AI coding assistant can now inspect components, profile renders, and diagnose performance issues completely on its own. Works with @cursor_ai , @claudeai Code, @OpenAI Codex, @opencode , or any other you like
@reactnavigation ·
If you are building a new app or boilerplate in 2026 and use React Navigation, please use the Static API. We have done a lot of work to reduce boilerplate further and improve TypeSafety in React Navigation 8. Unless you really need to build the list of screens dynamically at runtime, you'll likely find that the Static API can do everything you need. If you remember the Static API from React Navigation 4 and earlier, the new Static API is very different. It's built on the dynamic core that React Navigation 5 brought, so it has a lot of dynamism built-in. The static parts are only constrained by what we need to make type inference and deep linking automatic.
@GithubProjects ·
Million.js is an optimizing compiler that reduces React reconciliation overhead to make components up to 70% faster. - Works with existing React code, no framework migration needed - Fine-tuned virtual DOM reduces diffing overhead - CLI tool for automatic installation and setup - Benchmarked against js-framework-benchmark for performance validation Explore it here: https://t.co/T5AakNCcLz
@VadimNotJustDev ·
I just rebuild Apple Podcasts in React Native using @expo Fully functional: ✅ Auth using @clerk ✅ Data fetching from @PodcastindexOrg using Tanstack query ✅ Offline support Had a lot of fun with many native quirks for the audio player and navigation. Just look at that mini player 😍
@swmansion ·
Tired of wrapping gestures in useMemo? 🥱 Gesture Handler 3 introduces a hook-based API — the hook manages the native recognizer, which means you don’t need manual memoization. If you’re using React Compiler, it also handles memoization automatically. But with no React Compiler, the hook still takes care of it for you. Learn more 👉 https://t.co/njZveKldO3
@cathrynlavery ·
I built a product demo video with @reactjs and @remotion ~16 seconds. 480 frames. 6 scenes. zero screen recordings & didn't leave the terminal once. T𝗵𝗲 𝘀𝘁𝗮𝗰𝗸: • react 18 + typescript • ~15 custom components • remotion 4.0.429 for video-as-react • 8 voiceover & sounds with @ElevenLabs ngl pretty impressive for a first-timer 😍
@0xlelouch_ ·
90% of React interviews in 2026 come down to these 7 points: 1) Rendering model: what triggers a re-render, why referential equality matters, and how to avoid accidental work. 2) Hooks fundamentals: useEffect dependencies, cleanup, and why derived state is usually a bug (compute it, don’t store it). 3) State management: local vs server state, when Context is enough, and when you need a store for cross-page workflows. 4) Performance: memoization tradeoffs, virtualization for long lists, and profiling before optimizing. 5) Async + data fetching: request cancellation, race conditions, caching, and handling loading/error/retry without UI flicker. 6) Forms and validation: controlled vs uncontrolled inputs, debouncing, schema validation, and keeping UX fast under network latency. 7) Testing + production hygiene: React Testing Library patterns, mocking fetch, and catching regressions like double effects in StrictMode
@Hartdrawss ·
PRO TIP for FRONTEND DEVS : The component prompt that generates production-ready UI in Cursor every time. Most people prompt: "create a user profile card." Output: no loading state, no error state, no empty state, hardcoded data, no TypeScript. Here's how i prompt instead: --- "Create a UserProfileCard React component. Requirements: - Props: user object (id, name, email, avatarUrl, role, createdAt) — TypeScript interface required - Loading state: skeleton UI using the existing Skeleton component from /components/ui - Error state: error message with retry button, error passed as prop - Empty state: 'No user found' with a clear illustration or icon - Avatar: use Next.js Image component with fallback to initials if avatarUrl is null - Date formatting: 'Member since [Month Year]' — use the existing formatDate util - Responsive: full width on mobile, max-w-sm on desktop - Accessible: proper ARIA labels, keyboard focusable action buttons - No hardcoded data. No inline styles. Use only Tailwind classes from the design system. Export: named export only. No default export."
@hausdorff_space ·
react-prosemirror, like prosemirror core, is a modern marvel of engineering. New blog post talks about all the work react-prosemirror core put in to make it really, really fast. On par with, and maybe faster, than, the pure JS version. Seriously. Here we are editing Moby Dick with no perceptible lag at all:
@omkarships ·
That's how facebook was built in the beginning. Then : - Frontend: HTML + CSS + JavaScript - Backend: PHP - Database: MySQL - Server: Apache - OS: Linux - Hosting: Physical servers (no cloud) Now : - Frontend: React + GraphQL - Mobile: Swift | Kotlin | React Native - Backend: Hack + HHVM + Java + C++ - Databases: MySQL + TAO + RocksDB - Cache: Memcached - Streaming: Kafka - AI / ML: PyTorch - Infra: Meta Private Cloud - Containers: Tupperware
@freeCodeCamp ·
Tabs are common in dashboards and settings pages, but small motions can make them feel more polished. In this tutorial, @gupta05_vaibhav shows you how to build an animated tab component with Shadcn/ui, React, Tailwind CSS, and Motion. You'll learn about spring tab indicators, stacked card hover effects, entrance animations, and more. https://t.co/bArjFiJ9Je
@alexcooldev ·
Building a B2C app in 2025? React Native vs Flutter I’ve built with both. Here’s the real difference: React Native: - Faster to hire (lots of devs know React) - Easier to integrate with native modules - Ecosystem is massive (especially for startups) - UI sometimes feels slightly off on Android - Most importantly: you can reuse custom hooks across Web (I use Next.js, this was a big reason I picked RN) Flutter: - Pixel-perfect UI across platforms - Smooth animations, feels native -Dart is niche, harder to find good devs - App size can get heavy For B2C? Go with whatever gets you to market faster. Retention won’t be saved by “better UI”, it’s product and marketing. I picked React Native. Because I wanted growth, not perfection.
@swmansion ·
What does implementing word-level audio precision actually look like in a React Native app? 👀 Thanks to React Native Audio API, users can tap any paragraph to start listening, tap a specific word to jump right to it, or highlight sections to save for later. Read how we used it for Perch: https://t.co/qaJ20g2F0a Check the docs: https://t.co/QMWAkuLjch
@DivyanshT91162 ·
Someone got tired of manually building skeleton loaders... so they automated the entire process. Instead of drawing fake placeholder boxes every time your UI changes, Boneyard scans your real components and generates pixel-perfect skeleton screens automatically. No measuring. No tweaking. No keeping loading states in sync by hand. → Extracts skeletons directly from your real UI → Supports React, Vue, Svelte 5, Angular, Preact & React Native → Works seamlessly with Suspense and async data fetching → Vite plugin with automatic HMR re-capturing → Responsive across multiple breakpoints → Zero production overhead → MIT licensed → 100% open source This is one of those developer tools that saves hours of repetitive frontend work while making your loading states look exactly like the final UI. MIT licensed 100% open source Repo👇
@expo ·
🥕🥦 A community package broke when iOS 18 deprecated its API. Then CodePush sailed off into the sunset. These issues (and more) forced the @FoodIsGoodCo team to begin adopting Expo. Below you'll find the story of how they approached adding Expo to their bare React Native app, which libraries they rely on, and which services keep them lean and fast.
@jyobo10 ·
Built a mini examples site for my React clone. The whole site is rendered by my own React implementation and includes hook demos + reconciliation experiments. I made it to validate the behavior of my React implementation but thought it would be cool to share here too.
@DJbennyBuff ·
I just spent the weekend converting my Framer site into custom code. I'd say it got ~95% parity! My steps: 1. Use the "React Export" Framer plugin (they have a free trial) 2. Download Vercel's agent-browser will all the skills 3. Prompt Claude to recreate the site using the React components in step 1. Repeat until happy :)
Best Tweets by Topic