Best of React — March 2026

  1. 1
    Article
    Avatar of hnHacker News·3w

    Video.js v10 Beta: Hello, World (again)

    Video.js v10.0.0 beta is a ground-up rewrite merging Video.js, Plyr, Vidstack, and Media Chrome into a single modern framework. Key highlights include an 88% reduction in default bundle size (66% even without ABR), a new composable streaming engine called SPF that enables much smaller adaptive bitrate bundles, first-class React and TypeScript support, unstyled UI primitives inspired by Radix/Base UI, and a shadcn-style skin ejection system. The architecture is fully composable — unused features are tree-shaken out. Three presets ship with the beta: video, audio, and background video. New skins were designed by Plyr's creator Sam Potts. GA is targeted for mid-2026, with migration guides for Video.js v8, Plyr, Vidstack, and Media Chrome planned before then.

  2. 2
    Article
    Avatar of storybookStorybook·3w

    Storybook MCP for React

    Storybook MCP is a new Model Context Protocol server for React that gives AI coding agents intelligence about your existing component library. It provides agents with component metadata (stories, API, docs) to reuse existing components instead of generating new patterns, embeds live story previews directly in chat UIs, and enables agents to run component and accessibility tests autonomously — fixing issues or flagging them for human review. Available now in Storybook 10.3 for React, with support for other frameworks coming later. Teams can publish the MCP server remotely via Chromatic to share component context without running Storybook locally.

  3. 3
    Article
    Avatar of bytesdevBytes by ui.dev·3w

    TypeScript 6.0 is your final warning

    TypeScript 6.0 has been released as the last version built on its JavaScript codebase, serving as a transition before TypeScript 7.0 introduces a Go-based compiler with native speed and multi-threaded type checking. Key changes include strict mode enabled by default, module defaulting to esnext, target floating to the current ES spec (es2025), and types defaulting to an empty array — a change that may break many projects but promises 20–50% speed improvements. New features include built-in Temporal API types and Map.getOrInsert support. Several legacy options like outFile, baseUrl, and AMD/UMD/SystemJS targets are deprecated or removed. The newsletter also covers pnpm 11 beta, Zero 1.0 stable release, a React useState closure gotcha, and various other JavaScript ecosystem links.

  4. 4
    Article
    Avatar of sitepointSitePoint·6w

    React 19 Compiler: What Senior Developers Need to Know

    The React Compiler (formerly React Forget), released as an opt-in beta alongside React 19, automates memoization by performing static analysis at build time rather than relying on developer-placed useMemo, useCallback, and React.memo hints. It integrates via a Babel plugin and enforces the Rules of React, silently skipping impure components. Senior developers can drop manual memoization ceremony from pure components, but must now audit codebases for purity violations, understand compiler-aware debugging via React DevTools, and adopt a deliberate migration strategy using 'use no memo' directives. The new senior skillset shifts from dependency array mastery to architectural thinking, component purity discipline, and understanding server/client boundary decisions.

  5. 5
    Article
    Avatar of devtoDEV·6w

    I Built a Pixel Art Village Where AI Characters Have Real Emotions

    A developer built Persona World, an open-source pixel art village simulation featuring 12 AI characters with dynamic emotional states. Each character has a HEXACO personality profile (six dimensions) and uses a 9-dimensional cognitive appraisal model to compute emotional responses in VAD (Valence-Arousal-Dominance) space. Personality shapes how characters react to interactions like praise or betrayal, relationships accumulate over time, and mood shifts gradually rather than instantly. The tech stack uses React 19, Canvas 2D, TypeScript, and the molroo SDK for emotion computation. The project is open source with a live demo available, and the author invites discussion on continuous emotion models in games.

  6. 6
    Article
    Avatar of iotechhubiO tech_hub·5w

    A TypeScript Class-Based WebSocket Library for React

    A developer built a custom TypeScript class-based WebSocket library for React after finding existing solutions like react-use-websocket lacking key features. The library uses three core classes: WebsocketConnection (singleton per URL with heartbeat, reconnection, and exponential backoff), WebsocketSubscriptionApi (streaming subscriptions), and WebsocketMessageApi (promise-based request/response). TanStack Store handles reactivity inside the classes, so only components reading specific store slices re-render. Key design decisions include lazy connection opening, shared instances per key to avoid subscribe/unsubscribe churn across page navigation, URI-based message routing, and thin React hook wrappers around the class instances. The post covers the architecture, edge cases like request overwriting and close code handling, and provides a downloadable package.

  7. 7
    Video
    Avatar of t3dotggTheo - t3․gg·5w

    Are you f**king kidding?

    California and Colorado have passed/proposed laws requiring operating systems and app stores to collect age verification data from users, with fines up to $7,500 per affected minor for intentional violations. The author argues these laws are written by legislators who don't understand software, will create massive compliance burdens for open-source maintainers, fragment software distribution across state lines, and expose users to unnecessary privacy risks by forcing collection of sensitive identity data. Real-world effects are already visible: MidnightBSD updated its license to exclude California residents, Canonical is reviewing Ubuntu's response, and Discord is requiring face scans or IDs. The author calls on developers—especially those in California—to contact their state representatives to push back against these laws before they spread further.

  8. 8
    Article
    Avatar of minersThe Miners·5w

    Figma MCP Builds Exactly What You Ask – Nothing More

    Two developers ran real-world experiments using Figma's MCP with Claude Code to convert Figma designs into code. Key findings: the tool is highly literal and does exactly what you ask — no more. Specificity in prompts is critical; vague requests yield inconsistent results. Visual translation from Figma to code is accurate, but structural best practices (file separation, responsiveness, component organization) must be explicitly requested. Applying changes to an existing codebase works better than greenfield generation because Claude has structural context to follow. A major practical blocker is Figma's MCP quota on the free tier (~6 requests/month), which severely limits experimentation. Design library mapping is also a current weak point.

  9. 9
    Article
    Avatar of coinsbenchCoins Bench·2w

    The Only React Hooks Guide You’ll Actually Finish Reading.

    A beginner-friendly guide covering the six most essential React hooks: useState, useEffect, useRef, useCallback, useMemo, and useContext. Each hook is explained with real-world analogies, practical code examples, and clear guidance on when to use and when to avoid each one. Key pitfalls are highlighted, including the infinite loop trap in useEffect, stale closure issues, premature memoization, and context re-render cascades.

  10. 10
    Video
    Avatar of bytegradByteGrad·3w

    Top 11 MCP-Servers EVERY Developer Should Use With Claude Code / Cursor / Codex / OpenCode

    A walkthrough of 11 MCP servers worth integrating into AI coding agent workflows (Claude Code, Cursor, Codex, OpenCode). Covers design tools (Figma MCP, Paper MCP, Pencil), UI component access (shadcn/ui MCP), up-to-date documentation (Context7), GitHub repo access, browser automation (Playwright MCP, Chrome DevTools MCP), web search providers (Brave, Firecrawl, Perplexity), third-party service integrations (Vercel, Supabase, Notion, Slack, Linear, n8n), and building custom MCP servers. Also introduces the Permit MCP Gateway for handling authentication, authorization, and auditing across MCP tool calls.

  11. 11
    Article
    Avatar of frontendmastersFrontend Masters·6w

    Post Mortem: Rewriting AgnosticUI with Lit Web Components – Frontend Masters Blog

    A developer's post-mortem on rewriting AgnosticUI, a framework-agnostic component library, using Lit and Web Components. Covers key decisions and trade-offs including Shadow DOM encapsulation with CSS ::part for styling hooks, accessibility challenges with label/input associations inside shadow roots, the unfinished state of native form participation (formAssociated), and React 19 vs @lit/react DX comparison. Also details a CLI-first distribution model where consumers copy component source into their projects, and a playbook-based dogfooding workflow using real UI scenarios to catch integration issues unit tests miss.

  12. 12
    Video
    Avatar of javascriptmasteryJavaScript Mastery·5w

    I Vibe Coded a $50K Website in One Weekend Using AI

    A developer built a high-end 3D basketball e-commerce website solo using AI (Gemini/Google AI Studio), React 19, Three.js via React Three Fiber, and GSAP scroll animations. The post outlines a 7-step workflow for agentic development: research references first, define goals before prompting, build a structured master prompt, iterate surgically with specific feedback, tackle one problem at a time, understand the code you ship, and build in public. The project featured procedural leather textures, Web Audio API sound effects, and a complex 3D-to-2D cart animation — all under 3MB. The author also promotes a SaaS tool for generating master prompts and an upcoming AI development course.

  13. 13
    Video
    Avatar of wdsWeb Dev Simplified·5w

    NEW Tanstack Hotkeys Library is Amazing

    TanStack's new hotkey library for React simplifies adding keyboard shortcuts to web apps. The library provides a `useHotkey` hook with TypeScript autocomplete and type safety, supporting cross-platform modifier keys (mod key maps to Ctrl on Windows/Linux, Cmd on Mac). Key features covered include: scoping hotkeys to specific DOM elements, enable/disable toggling, conflict behavior options, key sequence hotkeys (Vim-style multi-key combos), `useHeldKeys` and `useKeyHold` hooks for tracking held keys, and a `useHotkeyRecorder` hook for letting users configure their own custom shortcuts. A brief TypeScript template literal type tangent shows how the library achieves its type-safe string autocomplete.

  14. 14
    Video
    Avatar of mattpocockMatt Pocock·3w

    Claude Code tried to improve /init... Is it any better?

    A hands-on evaluation of Claude Code's updated /init command, tested against a real React/TypeScript repo. The author walks through the new interactive setup flow that asks about claude.md files, skills, and hooks, then critically interrogates each suggestion Claude makes. Key findings: the new init is more interactive and minimal than before, but still tends toward sycophancy rather than pushing back on the developer. The author ends up with a nearly empty claude.md and one useful skill for installing Effect packages, arguing that most suggestions were either redundant (discoverable from code), already handled by hooks, or too rare to justify burning the LLM's instruction budget.

  15. 15
    Article
    Avatar of jetbrainsJetBrains·4w

    Core JavaScript and TypeScript Features Will Be Free in IntelliJ IDEA

    JetBrains is making core JavaScript, TypeScript, HTML, and CSS features free in IntelliJ IDEA starting with v2026.1. Previously restricted to Ultimate subscribers, the free tier will now include syntax highlighting, code completion, import management, basic React support, code navigation, refactorings, quality inspections, and integrated tooling for Prettier, ESLint, Vite, and NPM scripts. Advanced features like dedicated debuggers, test runners, and full framework support (Angular, Vue) remain part of the Ultimate subscription, which offers a 30-day free trial.

  16. 16
    Article
    Avatar of infoqInfoQ·4w

    State of JavaScript 2025: Survey Reveals a Maturing Ecosystem with TypeScript Cementing Dominance

    The 2025 State of JavaScript survey highlights a maturing ecosystem with TypeScript now used exclusively by 40% of developers (up from 34% in 2024). Vite has effectively overtaken Webpack in developer satisfaction with a 98% satisfaction score vs Webpack's 26%. React remains the dominant framework at 83.6% usage, though Next.js faces growing criticism for complexity. AI coding tools saw notable growth, with Claude doubling to 44% and Cursor more than doubling to 26%. Node.js stays dominant at 90% on the backend, and overall developer happiness holds steady at 3.8/5 for the fifth consecutive year.

  17. 17
    Article
    Avatar of twirThis Week In React·5w

    This Week In React #272: Astro, Compiler, Next.js, shadcn, React Aria, Helmet, Preact

    Weekly React and React Native newsletter covering Astro 6.0 release (new Vite-based dev server, font API, CSP support, Rust compiler), React Compiler Rust port announcement, Next.js canary PRs for View Transitions, and shadcn CLI 4.0. On the React Native side: React Navigation 8 progress report with React 19/RN 0.83 requirements, Expo Agent and Expo Observe private betas, Hermes native TypeScript support, React Native 0.85 RC, and multiple library releases (Unistyles 3.1, FlashList 2.3, MMKV 4.2). Also covers TypeScript 6.0 RC, Node.js moving to one major release per year, TanStack Intent for agent skills, and ArkType 2.2.

  18. 18
    Article
    Avatar of bytesdevBytes by ui.dev·4w

    Vite+ enters the Matrix

    VoidZero launched Void, a Vite-native deployment platform built on Cloudflare Workers, and as a result made Vite+ fully open-source under MIT license. The Vite+ alpha bundles Vite, Vitest, Oxlint, Oxfmt, Rolldown, and tsdown into a single binary (`vp`) covering the full local dev lifecycle including env management, package installation, linting, formatting, type-checking, and building. A built-in task runner with input fingerprinting for caching is also included. Other news covered: Next.js 16.2, Nuxt 4.4, @clerk/expo 3.1 with native auth components, a React-to-Svelte migration of 130k lines, a team banning useEffect, and a JavaScript quiz about Array.fill reference behavior.

  19. 19
    Article
    Avatar of smashingSmashing Magazine·5w

    Building Dynamic Forms In React And Next.js — Smashing Magazine

    A practical comparison of two approaches to building multi-step dynamic forms in React: the component-driven RHF + Zod + React Query stack versus a schema-driven approach using SurveyJS. Both approaches are used to build the same 4-step form with conditional visibility, derived calculations, and page-skipping logic. The component-driven approach scatters business logic across JSX branches, useWatch/useMemo chains, and superRefine blocks, while the schema-driven approach centralizes all rules in a JSON object. A decision framework is provided: use RHF for CRUD-oriented, UI-driven forms owned by engineers; use SurveyJS when forms encode business decisions that need to be auditable, versioned, or editable by non-engineers.

See all React archives