# React · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/react>)

Building interfaces with React components, state and rendering behavior.

## [react-resizable-panels: three patterns for resizable layouts](<https://sebastien.rigaux.be/en/tech-watch/links/react-resizable-panels-three-patterns-for-resizable-layouts>)

The react-resizable-panels documentation introduces React components for building resizable interfaces: panels arranged in rows or columns, grids that resize in two dimensions, and workspaces with tab sets users can rearrange by dragging.

The workspace example shows how to provide an initial model with `defaultModel` and select tab content through `renderTabContent`. The package includes TypeScript definitions.

2026-11-07 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-resizable-panels-three-patterns-for-resizable-layouts.md>) · [Original resource](<https://react-resizable-panels.vercel.app/>)

## [React hydration and SSR: prevent mismatches without hiding content](<https://sebastien.rigaux.be/en/tech-watch/links/react-hydration-and-ssr-prevent-mismatches-without-hiding-content>)

In Next.js, a `localStorage` value can make server-rendered HTML differ from the first client render. The article compares the trade-offs: waiting until mount avoids the error but leaves the real content out of the SSR HTML; using the same initial value for both renders preserves that content, though a later update can cause flicker.

To synchronize a sidebar without that flash, an inline script applies its saved state to the DOM before hydration and passes it to React, which uses the same classes. The article also distinguishes an isolated theme control from a mobile backdrop handled with CSS.

2026-11-07 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-hydration-and-ssr-prevent-mismatches-without-hiding-content.md>) · [Original resource](<https://www.gmoniava.com/blog/hydration-mismatch-errors-and-how-to-fix-them>)

## [emoji-picker-react: customize a React emoji picker](<https://sebastien.rigaux.be/en/tech-watch/links/emoji-picker-react-customize-a-react-emoji-picker>)

emoji-picker-react provides an emoji picker for React, either with its built-in styling or adapted to a product’s visual design. The interactive playground lets developers try props, CSS themes, and customization examples.

Features include search, skin tones, custom emojis, and multiple languages. Its reactions mode starts with a compact set of popular reactions, then opens access to the full emoji library.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/emoji-picker-react-customize-a-react-emoji-picker.md>) · [Original resource](<https://ealush.com/emoji-picker-react/#playground>)

## [Puck, a visual editor for React: field and canvas updates in 0.24](<https://sebastien.rigaux.be/en/tech-watch/links/puck-a-visual-editor-for-react-field-and-canvas-updates-in-024>)

Puck, a visual page editor for React, adds field groups and tabs in version 0.24, along with a `checkbox` field for selecting multiple options. Drag handles also make it easier to reorder components in nested layouts.

The `renderFields` API lets you compose these layouts. In the canvas, `InlineTextField` enables direct text editing, while `fieldTransforms` transforms values at render time without changing the underlying data.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/puck-a-visual-editor-for-react-field-and-canvas-updates-in-024.md>) · [Original resource](<https://puckeditor.com/blog/puck-024>)

## [React: preserve progressive enhancement with Server Actions](<https://sebastien.rigaux.be/en/tech-watch/links/react-preserve-progressive-enhancement-with-server-actions>)

React combines `<form action>`, `useActionState`, and `useOptimistic` to handle pending feedback and optimistic updates while keeping form submission available before JavaScript runs. The article shows how this continuity can enhance the interface after hydration without giving up the browser’s native form behavior.

The key is to keep the server action directly in `action`: inserting a client function breaks submission without JavaScript. For optimistic updates, `useHydrated()` lets the form choose between the server action and its client-enhanced version.

2026-11-01 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-preserve-progressive-enhancement-with-server-actions.md>) · [Original resource](<https://ebey.dev/blog/3myyseusgd22h>)

## [TanStack Redact trims React’s browser runtime](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-redact-trims-reacts-browser-runtime>)

TanStack Redact 0.2.0 replaces React and React DOM in the browser without changing application code. Its stable integrations support TanStack Start, Vite, Vinext, and Next.js; with the latter two, React still handles server rendering while Redact takes over hydration and client rendering.

TanStack’s measurements show bundle reductions from 20.4% to 70.5% across its reference apps, but actual savings vary by project. The tradeoff is explicit: Redact renders synchronously, without React’s time slicing or interruptible rendering. A heavy render can therefore delay input, so compatibility and the busiest screens should be checked in each application.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-redact-trims-reacts-browser-runtime.md>) · [Original resource](<https://tanstack.com/blog/introducing-tanstack-redact?ck_subscriber_id=2550494205&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F%20This%20Week%20In%20React%20%23303%3A%20TanStack%2C%20Next.js%2C%20Vinext%2C%20Motion%2C%20React%20Hook%20Form%20%7C%20Expo%20Desktop%2C%20Legend%20Spark%2C%20Nitro%2C%20Exact%2C%20Skia%2C%20Screens%2C%20Unistyles%20%7C%20Node.js%2C%20Bun%2C%20SWC%2C%20Content%20Mappers%2C%20pnpm%2C%20Biome%20-%2023928066>)

## [Redact: a smaller React runtime with synchronous rendering](<https://sebastien.rigaux.be/en/tech-watch/links/redact-a-smaller-react-runtime-with-synchronous-rendering>)

Tanner Linsley’s AI-driven React projection experiment has become a TanStack project used in production. Redact is a smaller, React-compatible runtime that already works with Start, Next.js, Vinext, and Vite. On the server, React still handles SSR and Server Components.

The tradeoff is in rendering: Redact renders synchronously, without React’s time slicing. As the blog post acknowledges, a heavy render can still delay input. The smaller runtime therefore comes with a constraint worth considering for interfaces that need to remain responsive under load.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/redact-a-smaller-react-runtime-with-synchronous-rendering.md>) · [Original resource](<https://github.com/shader-effects-inc/shaders>)

## [MicroKit: 54 React, CSS and Tailwind microinteractions to copy](<https://sebastien.rigaux.be/en/tech-watch/links/microkit-54-react-css-and-tailwind-microinteractions-to-copy>)

MicroKit collects copy-ready interactions—animated buttons, tabs, inputs and hover effects—with React or CSS and Tailwind variants. Each component is copied separately in JavaScript or TypeScript, with no package to install; 26 of the 54 have no dependencies, while 28 use lucide-react.

The code is MIT-licensed, and Tailwind variants are designed for versions 3 and 4. In the Next.js App Router, most components work in server components; those using state, refs or event handlers need « use client ».

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/microkit-54-react-css-and-tailwind-microinteractions-to-copy.md>) · [Original resource](<https://microkit.co/>)

## [next-themes: handle themes without flashes or hydration pitfalls](<https://sebastien.rigaux.be/en/tech-watch/links/next-themes-handle-themes-without-flashes-or-hydration-pitfalls>)

next-themes applies the theme as the page loads, respects the system preference, and syncs the choice across tabs. Its `ThemeProvider` works with both the App Router and `pages/`, while a hook lets components switch themes or handle multiple variants.

One architectural detail matters: the browser-stored theme is unavailable during server rendering. UI that depends on `useTheme` should wait until the client component mounts to avoid hydration errors. The library also updates the `<html>` attribute—`suppressHydrationWarning` is recommended—and remains independent of the CSS solution in use.

2026-10-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/next-themes-handle-themes-without-flashes-or-hydration-pitfalls.md>) · [Original resource](<https://github.com/pacocoursey/next-themes#readme>)

## [React: making UI states explicit in the agentic era](<https://sebastien.rigaux.be/en/tech-watch/links/react-making-ui-states-explicit-in-the-agentic-era>)

When an agent changes a UI, checking a single account cannot cover every role, plan, or feature flag. Matt Rothenberg shows how values scattered across hooks, providers, and layouts can hide overlooked states — such as a Delete button shown to a view-only user.

Making display state an explicit component input lets teams render relevant combinations directly, test them, or compare them in a visual grid. Storybook and Playwright complement this approach, but they do not choose which scenarios to cover; that decision still matters.

2026-10-27 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-making-ui-states-explicit-in-the-agentic-era.md>) · [Original resource](<https://mattrothenberg.com/notes/pure-ui-agentic-era/>)

## [React Bits 2.0 reworks animated components and creative tools](<https://sebastien.rigaux.be/en/tech-watch/links/react-bits-20-reworks-animated-components-and-creative-tools>)

React Bits 2.0 announces 216 animated components: 104 have been rebuilt or redesigned, and more than 20 have dropped extra dependencies. Demos add presets and click interactions, while Background Studio, Shape Magic, and Texture Lab have been rebuilt to tune effects live and export the results.

The update also refreshes the documentation and landing page, which is reported to use about five times less JavaScript. The catalog supports expressive interface prototyping; the range of animations still makes it worth assessing their runtime and dependency costs before integrating them into a product.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-bits-20-reworks-animated-components-and-creative-tools.md>) · [Original resource](<https://x.com/davidhaz/status/2110662315959803905?s=46>)

## [React Server Components: critical remote code execution flaw](<https://sebastien.rigaux.be/en/tech-watch/links/react-server-components-critical-remote-code-execution-flaw>)

A critical vulnerability enables unauthenticated remote code execution in some applications using React Server Components. It affects `react-server-dom-webpack`, `react-server-dom-parcel`, and `react-server-dom-turbopack` in the versions listed in the advisory, with a CVSS score of 9.5.

The described scenario is rare: it requires responses that transport multiple typed arrays and an attacker-controlled value. React applications without a server are unaffected, as are applications that do not use a framework, bundler, or plugin supporting Server Components. Fixes are available in 19.0.9, 19.1.10, 19.2.9, and 19.3.1; affected deployments should upgrade immediately.

2026-10-23 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-server-components-critical-remote-code-execution-flaw.md>) · [Original resource](<https://github.com/react/react/security/advisories/GHSA-xqc2-xf4c-x3h3?ck_subscriber_id=2550494205&utm_source=convertkit&utm_medium=email&utm_campaign=%E2%9A%9B%EF%B8%8F%20This%20Week%20In%20React%20%23302%3A%20Next.js%2C%20React%20Router%2C%20DevTools%2C%20Security%2C%20shadcn%2C%20Hydrogen%2C%20Vinext%2C%20Mutative%2C%20R3F%20%7C%20RN%200.88%2C%20Expo%2058%2C%20Navigation%2C%20FastImage%2C%20Screens%2C%20Device%20Hub%2C%20Edge%20to%20Edge%20%7C%20TypeScript%2C%20PHP%2C%20CrUX%2C%20Rsdoctor%2C%20Astro%20-%2023823401>)

## [React project structure: from single file to modular monorepo](<https://sebastien.rigaux.be/en/tech-watch/links/react-project-structure-from-single-file-to-modular-monorepo>)

This comprehensive overview walks through organizing a React project, from a single file to a modular monorepo structure. The author details how to split code (files, technical folders, feature folders, domains, packages) and the impact of each approach on maintainability, dependency isolation, and scalability. Concrete examples illustrate how to evolve the architecture as the project grows, with clear rules to prevent cross-feature dependencies and encourage reuse.

2026-10-19 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-project-structure-from-single-file-to-modular-monorepo.md>) · [Original resource](<https://www.robinwieruch.de/react-folder-structure/>)

## [React Aria Sheet: swipeable overlay and mobile-friendly release](<https://sebastien.rigaux.be/en/tech-watch/links/react-aria-sheet-swipeable-overlay-and-mobile-friendly-release>)

React Aria v1.22.0 introduces the **Sheet** component, a swipeable overlay leveraging native browser scroll gestures for smooth, touch-friendly transitions—well suited for mobile trays and notifications. This release also brings Turbopack support for locale optimization, improved handling of interactive widgets like the virtual keyboard, and various fixes for collections, ComboBox, and forms.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-aria-sheet-swipeable-overlay-and-mobile-friendly-release.md>) · [Original resource](<https://react-aria.adobe.com/releases/v1-22-0>)

## [TanStack Start 1.0: a stable, type-safe full-stack framework for React and Solid](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-start-1-0-a-stable-type-safe-full-stack-framework-for-react-and-solid>)

TanStack Start 1.0 marks the official stable release of a full-stack framework, already proven in production, that blends SPA-style routing, server rendering, streaming, and typed server functions for React and Solid. Its focus on **end-to-end type safety**—from route params to loaders and server functions—makes maintenance and evolution easier, even for AI agents. React Server Components are opt-in, and deployment is flexible via Vite, Nitro, or Rsbuild, without enforcing a single architecture.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-start-1-0-a-stable-type-safe-full-stack-framework-for-react-and-solid.md>) · [Original resource](<https://tanstack.com/blog/tanstack-start-1-0>)

## [TanStack Charts 1.0: modular, composable charting for scalable apps](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-charts-1-0-modular-composable-charting-for-scalable-apps>)

TanStack Charts 1.0 introduces a composable approach to charting, inspired by the Grammar of Graphics, with a framework-agnostic core and a React adapter. The post explains how each chart element (line, point, bar) is a reusable component, making it easy to extend or customize visualizations as requirements evolve. The stable API and granular imports help integrate charts into scalable applications without sacrificing bundle size or type safety.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/tanstack-charts-1-0-modular-composable-charting-for-scalable-apps.md>) · [Original resource](<https://tanstack.com/blog/tanstack-charts-1-0>)

## [React’s browser() API: rendering components only in the browser](<https://sebastien.rigaux.be/en/tech-watch/links/react-browser-api-rendering-components-only-in-the-browser>)

React Canary introduces the `browser()` API to render a component exclusively in the browser, avoiding hydration mismatches and extra mounted-state logic. The article demonstrates how to use `use(browser())` inside a client component, wrapped in Suspense, to defer rendering until browser APIs are available. Several concrete examples show how this approach enables access to `localStorage`, the DOM, or user-specific data, without the usual workarounds like `useEffect` or environment checks.

2026-10-15 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/react-browser-api-rendering-components-only-in-the-browser.md>) · [Original resource](<https://certificates.dev/blog/reacts-new-browser-api-rendering-components-only-in-the-browser>)

## [Open-source React blocks for building admin apps](<https://sebastien.rigaux.be/en/tech-watch/links/open-source-react-blocks-for-building-admin-apps>)

Shadcn Admin Kit provides open-source blocks for building internal tools, dashboards, and B2B apps with React. It preconfigures data tables, forms, authentication, search, and internationalization, with advanced capabilities such as generated CRUD screens, permissions, bulk actions, and undo.

2026-10-06 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/open-source-react-blocks-for-building-admin-apps.md>) · [Original resource](<https://marmelab.com/shadcn-admin-kit>)

## [Lint JSX, Vue, Svelte, and Pug with Markuplint](<https://sebastien.rigaux.be/en/tech-watch/links/lint-jsx-vue-svelte-and-pug-with-markuplint>)

This guide shows how to extend Markuplint beyond HTML with parser and specification plugins. Its installation examples cover JSX, Vue, Svelte, and Pug, providing a path to apply markup-quality rules across templates and components written in different syntaxes.

2026-09-29 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/lint-jsx-vue-svelte-and-pug-with-markuplint.md>) · [Original resource](<https://markuplint.dev/docs/guides/beyond-html>)

## [Production-ready transitions for React web apps](<https://sebastien.rigaux.be/en/tech-watch/links/production-ready-transitions-for-react-web-apps>)

Transitions Pro offers more than 43 production-ready transitions for React, TypeScript, and Next.js apps. Copyable examples come with agent skills and tools for creating or reviewing motion, helping teams build a consistent interaction system instead of isolated animations.

2026-09-13 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/production-ready-transitions-for-react-web-apps.md>) · [Original resource](<https://transitions.dev/pro.html>)

Page 1 / 4

[Next](<https://sebastien.rigaux.be/en/tech-watch/tags/react/page/2>)