01.About02.Experience03.Projects04.Skills05.ContactTech.Watch resources
Technology watch

2025/04

2025/04/02

Is CSS-in-JS still a thing?
The most popular CSS-in-JS library, styled-components, has entered maintenance mode, indicating a shift away from CSS-in-JS solutions in favor of alternatives like Tailwind. The React core team has expressed concerns about the performance overhead of CSS-in-JS libraries, recommending inline styles for dynamic content and static CSS for unchanging styles. Many developers are migrating from CSS-in-JS to Tailwind, which has become the preferred choice for its social collaboration benefits and ease of use.
This week in React#228📝Article

2025/03

2025/03/26

React Trends in 2025
RSC and React Server Functions (RSF) will streamline data fetching and mutations in both Server and Client Components, enhancing the developer experience by eliminating the need for custom API routes. In addition to Next.js, TanStack Start and React Router are anticipated to gain traction in 2025, offering alternatives with support for React Server Components and Functions.
This week in React#227📝Article
Passing TypeScript React Components Native HTML Attributes
By utilizing the InputHTMLAttributes interface from React, developers can easily extend their custom components without needing to redefine all HTML attributes. Creating a new TypeScript type that combines custom props with InputHTMLAttributes ensures type safety, allowing for error-free integration of native input attributes.
This week in React#227📝Article
Components Are Just Sparkling Hooks
Components are fundamental building blocks in React that return ReactNodes, while hooks are utility functions for managing state and side effects. Notably, components can be viewed as a subtype of hooks. Headless components are hooks that encapsulate component logic without returning a ReactNode, allowing for greater flexibility in rendering and state management.
This week in React#227📝Article
Experimenting with React View Transitions
The View Transition API allows for smooth animations between different views or pages in web applications, enhancing user experience by animating elements like text and images during navigation. The <ViewTransition> component supports lifecycle classes such as enter, exit, and update, allowing developers to apply specific animations and execute logic during transitions.
This week in React#227📝Article
Next.js and the corrupt middleware: the authorizing artifact
By manipulating the x-middleware-subrequest header, attackers can completely bypass middleware protections, making it possible to access restricted paths without proper authorization. The vulnerability has a CVSS score of 9.1, indicating critical severity, and poses significant risks to applications using Next.js, which is downloaded nearly 10 million times weekly.
This week in React#227📝Article
Postmortem on Next.js Middleware bypass
A critical severity vulnerability in Next.js was disclosed on February 27, 2025, affecting older versions (12.x) and later confirmed to impact more recent versions. The vulnerability primarily affected self-hosted Next.js applications, while Vercel and other platforms like Netlify and Cloudflare Workers were found to be invulnerable due to their decoupled routing logic.
This week in React#227📝Article

2025/03/19

Why React is surprisingly the best model for LLM workflows
GenSX is an open-source framework designed for building AI agents and workflows using a React-like component model, focusing on modularity and encapsulation. Current LLM frameworks are criticized for being overly abstracted and difficult to reason about, leading to inefficiencies in development and experimentation.
This week in React#226📝Article
Biome v2.0 beta
Biome v2.0 is a major release with many new features, including plugins for custom lint rules, domains to organize lint rules, multi-file analysis, a new noFloatingPromises lint rule, an improved import organizer, new "assists" for actions without diagnostics, and an experimental HTML formatter.
Other📝Article
SSR Deep Dive for React Developers
Server-Side Rendering (SSR) improves initial load performance and accessibility for search engines and social media by delivering fully rendered HTML pages instead of relying solely on client-side JavaScript. While SSR can enhance performance by reducing the time to first contentful paint (FCP), it may also introduce latency due to server round-trips, especially on slow networks. Hydration allows React to reuse server-rendered HTML, improving efficiency by avoiding unnecessary re-renders, which can significantly enhance user experience.
This week in React#226📝Article
Writing static websites with Vite and React
The post discusses using vite-ssg-react to configure Vite for building static websites with React, emphasizing a simple input-output structure for project files. Using Server-Side Rendering (SSR) during development allows for fast feedback loops and produces SEO-friendly, pre-rendered HTML for production, enhancing performance.
This week in React#226📝Article
How we migrated MUI X to React 19
The migration to React 19 was executed in two phases: first, adding compatibility while maintaining React 18 support, and then fully transitioning to React 19. A new issue arose with the handling of the ref prop in function components, necessitating a compatibility shim to ensure stable props and type safety. A custom RefObject type was created to manage different types for the apiRef in the Data Grid component, ensuring compatibility across React versions.
This week in React#226📝Article
Oxlint Beta
Oxlint is now in beta after over a year of community development, marking a significant improvement in performance, stability, and feature completeness. Oxlint can replace ESLint in small to medium projects; for larger projects, disable ESLint rules via eslint-plugin-oxlint and run Oxlint first for faster feedback. Oxlint supports configuration via .oxlintrc.json files, automatic fixes, and linting of <script> content in .astro, .svelte, and .vue files without extra setup.
This week in React#226📝Article
Live Mode
Live mode allows for real-time data updates by fetching new data based on timestamps, enhancing user experience with immediate content refresh. Utilize the useInfiniteQuery hook from TanStack to manage data fetching, allowing for independent loading of previous and next pages while maintaining a flat data structure. Implement a custom refresh button that fetches new data at set intervals, ensuring that only new items are retrieved without overloading the server with simultaneous requests.
This week in React#226📝Article
TanStack + Netlify Partnership
TanStack has partnered with Netlify to become the Official Deployment Partner for TanStack Start, enhancing the ease of building and deploying modern web applications. Netlify offers no-config simplicity for deploying TanStack Start apps, serverless capabilities with Netlify Functions, and global performance through its edge network. A full-stack AI chatbot starter template has been launched, showcasing TanStack Start's data management with features like real-time data handling and efficient routing.
This week in React#226📝Article
Parcel v2.14.0
Parcel v2.14.0 introduces beta support for React Server Components, allowing integration into existing apps to reduce client bundle sizes by pre-rendering non-interactive components. Parcel now utilizes native HTML import maps to optimize browser caching, improving cache hit rates and reducing unnecessary cache invalidation across bundles.
This week in React#226📝Article

2025/03/12

How much traffic can a pre-rendered Next.js site really handle?
A pre-rendered Next.js site can handle approximately 193 requests per second on a VPS, but this is insufficient for high traffic surges, as just three simultaneous visitors can push the server to its limits. Switching to a dedicated server significantly improved performance, allowing the site to handle 2,330 requests per second, with 99% of requests responding within 500ms. Server-side rendering (SSR) performed poorly in comparison, with the homepage only managing 271 requests per second on a dedicated server, indicating that pre-rendering is far more efficient for high traffic.
This week in React#225📝Article
How The New York Times systematically migrated from Enzyme into React Testing Library
The New York Times adopted a piecemeal approach for migrating from Enzyme to React Testing Library, allowing for gradual updates and minimal disruption to ongoing development. The migration involved updating test files individually, starting with the simplest files, which helped build momentum and facilitated collaboration among engineers.
This week in React#225📝Article
React Router error reporting from scratch
Implement a handleError function in the entry.server.tsx to manage server-side errors effectively. Enable source maps in the vite.config.ts to help trace errors back to the original source code, which is crucial for debugging in production. Use a custom server setup to manage error reporting and source maps without exposing sensitive source code, allowing for better error context in notifications.
This week in React#225📝Article
Server Actions with Toast (useActionState)
Guide through creation of a higher-order function (HoF) to wrap Server Actions, allowing for callback functions that handle success, error, and loading states.
This week in React#225📝Article
Beyond React.memo: Smarter Ways to Optimize Performance
Instead of defaulting to React.memo for performance issues, consider restructuring components to isolate state changes, which can lead to simpler and more efficient solutions. Utilize composition by moving state down to smaller components, allowing only those components to re-render when state changes, thus improving performance without memoization.
This week in React#225📝Article
Split Route Modules
The new Split Route Modules feature in React Router v7.2.0 optimizes performance by allowing independent downloading of route module exports, enhancing user experience. By splitting route modules, the client loader can execute independently of larger components, reducing wait times for users and improving overall application responsiveness. .
This week in React#225📝Article
Use middleware in React Router
To enable middleware in React Router v7.3.0, update the package.json and add unstable_middleware to the config file to allow middleware types. Middleware is applicable for both server and client loaders/actions, with client middleware using unstable_ClientMiddlewareFunction for handling requests.
This week in React#225📝Article

2025/03/05

A 10x Faster TypeScript
The new native implementation of TypeScript aims to improve performance by 10x, drastically reducing editor startup times and build times while also cutting memory usage significantly. A preview of the native TypeScript compiler is expected by mid-2025, with a feature-complete version for project builds and language services anticipated by the end of 2025. TypeScript 6.x will continue to develop alongside the new native codebase, with TypeScript 7.0 set to be released once the native implementation reaches parity with the current version.
Other📝Article
Understanding TypeScript generators
In TypeScript, generator functions are defined using the function* syntax, allowing them to pause execution with the yield keyword and resume later, enabling lazy evaluation. Generators are useful for calculating values on demand, iterating over large datasets without consuming memory, and implementing recursive functions, such as reading files in a directory. By yielding values one at a time, generators can create infinite sequences and handle large computations without the need for large memory allocations, making them highly efficient.
Other📝Article
Async, Sync, in Between
The coloring problem in programming distinguishes between synchronous (blocking) and asynchronous (non-blocking) functions, complicating code structure as changes in one function's 'color' can necessitate changes in all its callers or dependencies. quansync provides a single API with two overloads, allowing developers to create functions that can adapt to either sync or async execution based on the context. The unplugin-quansync macro allows developers to write standard async/await syntax, which is transformed into generator syntax at build time, simplifying the implementation of quansync functions.
This week in React#224📝Article
The HTML command and commandfor attributes
The command and commandfor attributes for the <button> element allow for declarative control of dialogs and popovers without JavaScript, enhancing UX.The command attribute supports actions like 'show-modal', 'close', 'show-popover', 'hide-popover', and 'toggle-popover', with custom values possible for future use. .
This week in React#224📝Article
Building APIs with Next.js
We can create API endpoints by setting up route.ts files in the app/api/ directory, allowing for multiple HTTP methods (GET, POST, etc.) to be handled in a single file. Dynamic routes can be created using folder structures with brackets (e.g., app/api/users/[id]/route.ts), enabling parameterized URLs for fetching specific resources. Reusable middleware functions can be implemented to handle common tasks like authentication across multiple Route Handlers, enhancing code maintainability.
This week in React#224📝Article
{transitions} = f(state)
The article presents the idea of viewing a React application as a state machine, where each render corresponds to a specific state and defines valid transitions for user interactions. React's concurrent mode can introduce scenarios where UI updates do not flush immediately, necessitating additional measures to ensure users cannot perform invalid updates during this window.
This week in React#224📝Article
Announcing TanStack Form v1
The library supports five frameworks at launch: React, Vue, Angular, Solid, and Lit, providing tailored features for each. TanStack Form offers extreme type safety, schema validation with Zod, async validation capabilities, and support for multiple runtimes including SSR solutions.
This week in React#224📝Article
Next.js 15.2
Next.js 15.2 includes updates to the error UI and stack traces, streaming metadata, Turbopack performance improvements, experimental support for React's View Transitions API, and experimental support for using the Node.js runtime in Middleware. The post also mentions upcoming features like "use cache" and Turbopack persistent caching.
This week in React#224📝Article

2025/02

2025/02/26

Speeding up the JavaScript ecosystem - Rust and JavaScript Plugins
Rust is being increasingly adopted to rewrite JavaScript tools for improved performance, particularly in computationally intensive tasks like linting. A new approach to flattening Abstract Syntax Trees (ASTs) allows for faster traversal without the need for extensive deserialization, significantly speeding up linting processes.
This week in React#223📝Article
TC39 Advances 3 Proposals to Stage 4: RegExp Escaping, Float16Array, and Redeclarable global eval vars
The Float16Array proposal introduces a new typed array for 16-bit floating-point numbers, enhancing memory efficiency for performance-critical applications, while RegExp Escaping provides a built-in method to safely escape special characters in strings for regular expressions. Additional proposals making progress include Math.clamp, which aims to constrain numbers within a specified range, and enhancements to error handling, such as standardizing Error.captureStackTrace and Error.prototype.stack. .
This week in React#223📝Article
Making Next.js Apps Faster: A Practical Performance Guide Beyond Next.js
To enhance Next.js app performance, consider moving code to server components, implementing dynamic imports for non-essential components, and utilizing tree shaking to reduce JavaScript size. Utilize tools like PageSpeed Insights and Chrome DevTools to identify performance bottlenecks, focusing on metrics such as Total Blocking Time and Unused JavaScript. Next.js automatically splits code into chunks, but further optimization can be achieved by loading components only when needed, improving both actual and perceived performance.
This week in React#223📝Article
React.js Performance Guide
Investing in performance enhances user experience, boosts conversion and retention rates, improves SEO, and facilitates scalability while reducing costs. Key issues include large bundle sizes, unoptimized assets, unnecessary re-renders, inefficient state management, and excessive network requests, all of which can significantly slow down React applications. Improving perceived performance involves minimizing layout shifts, providing content previews, and giving feedback during loading processes to enhance user satisfaction.
This week in React#223📝Article
Level Up React: Functional programming in React
Functional programming treats computation as the evaluation of mathematical functions, emphasizing data transformations over state changes, which contrasts with imperative programming. Using functional programming in React enhances predictability, testability, and performance, allowing for efficient state management and easier debugging. .
This week in React#223📝Article
Shadcn Registry: A Better Way to Manage Your UI Components
The shadcn registry is a tool for managing and distributing reusable UI components across multiple React projects, allowing for customization and efficient updates without traditional npm packages. Components are defined in a structured format using the registry-item.json schema, enabling dependencies and multiple files to be listed for each component.
This week in React#223📝Article
Download a file from a React Router route
There are two primary methods to trigger file downloads in React Router: using a loader function for GET requests or an action function for POST requests. A loader function can be implemented to generate and return a file which can be linked to via an anchor tag for direct downloads. An action function is useful when user input is required before generating a file, allowing for a two-step process where the user submits a form and then downloads the file.
This week in React#223📝Article
Debouncing in React Router v7
Debouncing is introduced to optimize user interactions by delaying requests until the user stops typing, reducing unnecessary backend load. Utilizing React Router v7, the implementation of clientLoader allows for conditional request handling based on user input, improving performance. The technique leverages AbortSignal to cancel requests that are no longer needed. .
This week in React#223📝Article
There’s no such thing as an isomorphic layout effect
Discussion on the issue of using useLayoutEffect in server-side rendered React components, which can lead to mismatches between the initial server-rendered UI and the intended client-side UI. It examines various implementations of "isomorphic layout effect" hooks that attempt to work around this issue, and argues that these implementations are often misunderstood and misapplied.
This week in React#223📝Article
Avoiding Server Component Waterfall Fetching with React 19 cache()
The cache() API in React 19 allows for caching data fetch results, optimizing performance by reducing data coupling across multiple components. Using the cache() API to preload data is crucial; it allows deeper components to reuse preloaded data without blocking rendering, enhancing user experience. When implementing the preloading pattern, be cautious of potential hidden data coupling and ensure that preloaded data remains relevant during component refactoring.
This week in React#223📝Article
How Preply improved INP on a Next.js application (without React Server Components and App Router)
Preply undertook an R&D project to improve the Interaction to Next Paint (INP) metric on their Next.js application, focusing on the Home and Search pages, which are critical for SEO and SEM. Strategies included reducing React hydration time, optimizing JavaScript performance, and implementing techniques like debouncing keyboard events and memoizing heavy components. The team utilized extensive data collection methods, including the web-vitals library and custom dashboards in DataDog, to identify and address performance bottlenecks effectively.
This week in React#223📝Article

2025/02/19

Mocking in Node.js Has Just Changed Forever
Nock, a popular API mocking library, has migrated to use the Interceptors library, which enhances its functionality and performance. The integration allows Nock to fully support the Fetch API, addressing the growing need for server-side fetch testing as Node.js evolves.
This week in React#222📝Article
ESLint now officially supports linting of CSS
ESLint now officially supports linting of CSS through the @eslint/css plugin, enhancing its capabilities as a language-agnostic linter. The plugin includes several built-in rules such as no-duplicate-imports, no-empty-blocks, and require-baseline, aimed at enforcing best practices in CSS. ESLint offers a tolerant parsing mode that mimics browser error recovery, allowing it to lint CSS with some syntax errors without reporting all issues.
This week in React#222📝Article
React Libraries for 2025
The guide outlines crucial libraries for React development in 2025, including state management with Zustand, data fetching with TanStack Query, and routing with React Router or the emerging TanStack Router. The most popular styling method is Utility-First-CSS, particularly Tailwind CSS, while CSS Modules and CSS-in-JS solutions like styled-components are also discussed. For new React projects, Vite is recommended for client-side applications, while Next.js is ideal for server-side rendering, and Astro is suggested for static site generation.
This week in React#222📝Article
Client-Side Rendering in Flame Graphs
Flame Graphs visually represent an application's call stack, helping developers analyze performance by showing the duration of tasks and their relationships, including Total Time and Self Time. CSR can negatively affect initial load and Largest Contentful Paint (LCP) metrics since users see no content until JavaScript execution is complete, making it crucial to optimize loading times. Despite its downsides, CSR is easy and cost-effective, allowing developers to create complex applications with minimal backend concerns, making it suitable for many use cases.
This week in React#222📝Article
I like the future of Next.js
Next.js introduces a new granular caching system that allows for file-level, component-level, and function-level caching using the use cache directive. We can tag cached data for easy invalidation, enabling efficient updates to specific cache entries without affecting the entire cache. Next.js allows the definition of custom cache profiles, which specifies cache lifetimes for different content types. .
This week in React#222📝Article
React "as" Prop Using TypeScript
The as prop in React allows developers to dynamically render different HTML tags while maintaining type safety, enhancing the flexibility of reusable UI components. To type the as prop in TypeScript, create a generic type that extends from React.ElementType, ensuring valid HTML tag names are used.
This week in React#222📝Article
Introducing the new TanStack React Query integration
The new TanStack React Query integration for tRPC is now available, offering a simpler and more native experience compared to the classic integration. This integration enhances simplicity, familiarity for existing TanStack users, and maintainability, allowing for easier updates and adherence to best practices.
This week in React#222📝Article
Tanstack Start – Is it the Next NextJS?
TanStack Start is a new full-stack JavaScript framework designed for server-side rendering (SSR), streaming, and server functions, built on Vite and Nitro. It offers first-class support for SSR, client-side hydration, and integrates with TanStack Router for type-safe navigation, enhancing flexibility compared to competitors like NextJS. TanStack Start addresses NextJS's black-box nature by providing transparent file-based routing and middleware, allowing for greater customization despite requiring more boilerplate code.
This week in React#222📝Article
Designing backgrounds with LLMs and React
Utilizing LLMs and React, we can create interactive backgrounds with minimal effort, enhancing the visual appeal of landing pages. While LLMs assist in generating design components, the author emphasizes that they do not replace the need for skilled designers who understand user needs and aesthetics.
This week in React#222📝Article
Snapshot testing styled-components with Vitest
When using Vitest for snapshot testing styled-components, the snapshots only show hashed class names, making it difficult to identify style changes. To replicate Jest's functionality in Vitest, you can use the 'jest-styled-components' serializer by adding it to your dev dependencies and configuring it in your test setup.
This week in React#222📝Article
Human-in-the-Loop with Next.js
Discussion on how to implementing Human-in-the-Loop (HITL) functionality in Next.js applications, allowing users to approve actions before execution, enhancing user control and safety. It details how to manage tool calls in a Next.js chatbot, including intercepting tool calls, rendering confirmation UI, and handling user responses to ensure actions are executed only upon user approval.
This week in React#222📝Article
Sunsetting Create React App
CRA is officially deprecated for new applications as of February 14, 2025, with a recommendation to migrate to frameworks like Next.js or build tools such as Vite. CRA lacks essential features for high-performance production apps, such as routing, data fetching, and code splitting, which are better handled by modern frameworks. Frameworks like Next.js, React Router, and Expo are suggested for new projects, as they integrate necessary features and improve user experience compared to CRA.
This week in React#222📝Article

2025/02/12

Promises across the void: Streaming data with RSC
Live examples of the use() hook. The server streams HTML responses to the client, keeping the connection open until promises resolve, allowing for faster UI rendering without blocking user interaction. Only simple data types or rendered React components can be sent as promise resolutions; complex types like functions or classes will result in errors.
This week in React#221📝Article
Optimizing Images for Web Performance
Choosing the right image format is crucial for performance; use JPG for photos, PNG for graphics, and modern formats like WebP or AVIF for better compression. Implement responsive images using the <picture> element with srcset and sizes attributes to serve appropriately sized images based on the user's device. Utilize lazy loading by adding loading='lazy' to images to prevent them from downloading until they are about to be viewed, improving load times.
This week in React#221📝Article
There are a lot of ways to break up long tasks in JavaScript
Several techniques are discussed, including using setTimeout() with recursion, async/await with promises, and the newer scheduler.postTask() for better task scheduling. While newer APIs like scheduler offer advanced control, they may lack support across all browsers, necessitating polyfills for broader usability. For offloading tasks from the main thread, web workers are recommended as the best option, providing significant performance benefits despite a more complex API.
This week in React#221📝Article
TypeScript: the 
The satisfies operator in TypeScript allows for compile-time type checking of a value against a specified type without altering the value's type at runtime. Using satisfies, you can maintain narrow types while ensuring that an object conforms to a specific shape. Unlike as, which can change the type of its left-hand side, satisfies provides stricter type-checking and warns about missing properties.
This week in React#221📝Article
How to start a React Project [2025]
Vite is lightweight, fast, and allows developers to focus on React fundamentals without being locked into a specific framework, making it ideal for beginners. Next.js is a mature, opinionated framework that supports multiple rendering techniques (SSR, SSG, ISR) and integrates backend capabilities, but has a steeper learning curve. Astro is designed for content-focused websites, offering excellent performance and SEO benefits through its island architecture, but is not primarily aimed at dynamic web applications.
This week in React#221📝Article
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App (CRA) is officially deprecated due to compatibility issues with React 19 and has not been maintained for over two years. React 19 introduces peer dependency mismatches that cause CRA to fail during project setup, particularly with React Testing Library. The CRA CLI will display deprecation warnings, and SEO updates will be made to reduce CRA's visibility in search results.
This week in React#221📝Article
How React Router works under the hood
React Router has evolved from a routing library to a full-stack web framework after merging with Remix, enhancing its capabilities for server-side rendering (SSR) and client-side navigation. Utilizing a single-fetch strategy for client-side navigation, React Router minimizes network requests and optimizes data loading, reducing the waterfall effect and improving performance.
This week in React#221📝Article
State of React 2024
React 19 has introduced significant improvements, including making forwardRef obsolete, addressing hydration errors, and implementing a new compiler for enhanced performance with minimal effort. The React ecosystem continues to evolve rapidly, highlighted by the TanStack team's development of TanStack Start, which aims to compete with Next.js as a meta-framework for developers not ready for a server-first approach.
This week in React#221📝Article

2025/02/05

From Rust to TypeScript: A New Chapter for Prisma ORM
Prisma ORM is transitioning its core logic from Rust to TypeScript to simplify contributions and enhance community involvement, addressing deployment complexities and compatibility issues. The new architecture will execute queries entirely in TypeScript, improving performance and compatibility with JavaScript database drivers while eliminating the need for external binaries.
This week in React#220📝Article
How to build a library in React
The library, named React Context Selector, enhances React's context by adding selectors, allowing for more efficient state management and re-renders only for components that consume specific state values. It supports custom comparators, debug mode, and utilizes the React hook useSyncExternalStore to manage external data subscriptions effectively.
This week in React#220📝Article
The React data-table I always wanted
New features added to data-table-filter including improved keyboard navigation, customizable filters, and various hotkeys for enhanced user experience. Performance has been optimized by moving state management to a dedicated context, reducing unnecessary re-renders and improving overall efficiency.
This week in React#220📝Article
Load Dynamic Stylesheets in React Router
Details on how to dynamically load stylesheets in React Router based on user preferences or organizational settings, enhancing the user experience. Create a route to serve dynamically generated CSS based on user authentication and preferences, ensuring personalized styling.
This week in React#220📝Article
An ast-grep rule to ban bad HTML nesting in React
Creation of a custom ast-grep rule to automatically flag instances of nested links in a codebase, enhancing code quality.
This week in React#220📝Article
Persisting Form Data in React: A Modern Approach with Nuqs
Nuqs offers a modern solution for persisting form data in React applications, allowing for automatic saving of form states in the URL without the need for backend infrastructure. Nuqs provides built-in type safety, easy data validation, shareable form states, and seamless integration with React routers, enhancing user experience and developer efficiency.
This week in React#220📝Article
Single Responsibility Principle in React: The Art of Component Focus
SRP states that a class or component should have only one reason to change, promoting better software architecture. Focus on separating data and presentation, creating focused components, using composition, and extracting reusable logic into custom hooks. Adhering to SRP leads to more maintainable, testable, and flexible applications, emphasizing the importance of having a single reason for change.
This week in React#220📝Article

2025/01

2025/01/29

JavaScript Temporal is coming
Discussion on the upcoming JavaScript Temporal object, which will provide a modern and improved way to handle dates, times, and calendars in JavaScript. Temporal addresses many issues with the existing Date object, such as lack of time zone support and unreliable parsing behavior.
This week in React#219📝Article
TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums
TypeScript 5.8 introduces a new flag called --erasableSyntaxOnly that disables non-erasable syntax like enums, namespaces, and class parameter properties. This is likely a step towards a future where JavaScript supports types as comments, which would require all syntax to be erasable. The goal is to make TypeScript more compatible with potential future JavaScript type systems.
This week in React#219📝Article
Why are React Server Components actually beneficial? (full history)
RSC represent a paradigm shift in how React applications are built, allowing for a mix of server-rendered and client-rendered components to optimize performance and reduce JavaScript payloads. RSCs improve user experience by sending HTML directly to the client, reducing the need for extensive JavaScript downloads, and allowing for faster initial page loads and better SEO. The RSC payload consists of instructions that dictate how components are rendered, including module references and placeholders for client components, enabling a more efficient hydration process.
This week in React#219📝Article
Server-side React that renders as png, pdf, or interactive webapp
When loaded in a browser, the app is fully interactive, allowing users to click buttons and refresh data seamlessly using React Query. This approach utilizes TanStack Router for SSR, enabling the server to render UI in memory and return pre-loaded HTML with initial data. By appending ?=png or ?=pdf to the URL, the server generates a PNG or PDF of the initial app state, respectively, using Puppeteer for accurate rendering.
This week in React#219📝Article
UX++ and DX++ with Sync Engines
Discussion on how sync engines, specifically Replicache, can improve the UX and DX of web applications by eliminating the need for network roundtrips and providing a local cache of data. Replicache allows developers to subscribe to and mutate local data, leading to instant UI updates, offline capability, and reduced bandwidth usage.
This week in React#219📝Article
Why I Won’t Use JSDOM
JSDOM is a polyfill library that aims to execute browser-oriented code in Node.js, but it has significant limitations and issues that make it a poor choice for modern front-end testing. The author recommends using Vitest Browser Mode instead with Playwright, which allows testing components in the actual browser using familiar testing patterns. This represents a paradigm shift towards more reliable and valuable integration tests.
This week in React#219📝Article
Next.js: an honest review
Review of Next.js 14, highlighting both the pros and cons of the framework. It praises Next.js for being fast by default, having a great ecosystem, and the ease of use with Vercel as the hosting platform, but also criticizes the complexity introduced by the App Router, security concerns with Server Actions, and other caveats.
This week in React#219📝Article
DexieJs: Reactive local state in React
Dexie.js simplifies state management in React applications by utilizing live queries and the new useActionState hook, eliminating the need for complex libraries like useState or useReducer by storing states in an IndexedDB. Combining useDexieQuery and useCustomAction enables real-time updates to the UI, preserving state changes across page reloads and ensuring data consistency.
This week in React#219📝Article
Tailwind CSS v4.0
Tailwind CSS v4.0 is a major new version of the popular CSS framework, featuring a ground-up rewrite for improved performance, support for modern CSS features, simplified installation, and a new CSS-first configuration system. The update includes a high-performance engine, automatic content detection, built-in import support, dynamic utility values and variants, a modernized color palette, and a range of new utilities and variants. Overall, Tailwind CSS v4.0 aims to provide a more powerful, flexible, and streamlined developer experience.
Other📝Article

2025/01/22

TypeScript enums: use cases and alternatives
Discussion on TypeScript enums, their use cases, and alternatives. Covers how enums define both an object and a type, and how they can be used as namespaces for constants, custom types with unique values, and namespaces for constants with object values. Recommendations on when to use enums versus alternative patterns like object literals or string literal unions.
This week in React#218📝Article
Preserve state during DOM mutations with moveBefore()
The new moveBefore() DOM API in Chrome 133 allows developers to move elements around in the DOM without losing state, which was previously a problem with methods like appendChild(). This enables better preservation of state for dynamic user experiences, such as keeping video playback, input focus, and animations intact during DOM mutations. The Chrome team is working to introduce this API to the broader web platform to address a long-standing gap.
This week in React#218📝Article
The XSS dangers in interpolating styled-components
There are XSS dangers when interpolating styled-components in React applications. Malicious code can be injected through CSS properties, leading to security risks. There are safe alternatives, such as sanitizing inputs and limiting interpolations to predefined values.
This week in React#218📝Article
Formity: The Ultimate Tool For Multi-Step Forms In React
Formity is a library designed to simplify the creation of multi-step forms in React, providing advanced logic, integration with other form libraries, and strong TypeScript support. It addresses the limitations of existing form libraries by offering features like conditions, loops, and variables to build dynamic and scalable forms.
This week in React#218📝Article
Next.js 🤝 EAS Hosting
EAS Hosting is a new end-to-end deployment solution for universal app development, allowing users to self-host static websites easily. Deploying a static website using Next.js involves exporting assets with next build and using the eas deploy command to upload them to EAS Hosting. EAS Hosting supports custom domains on paid plans.
This week in React#218📝Article
Do JavaScript frameworks still need portals?
JavaScript frameworks utilize portals to render components outside their parent DOM hierarchy, allowing for better positioning of elements like modals and tooltips. Modern HTML elements like <dialog> and CSS features such as popover attributes and anchor positioning provide simpler alternatives to JavaScript portals, effectively managing element visibility and positioning without complex workarounds.
This week in React#218📝Article
Why Server Functions Matter In A Server Component World
Server functions in Tanstack Start are designed for data retrieval, not components, distinguishing them from RSC and server actions, which are focused on data mutation. Choosing between server functions and server components involves trade-offs between bundle size and payload size, impacting the performance and interactivity of applications.
This week in React#218📝Article
Roadmap 2025 and Biome 2.0
In 2024, Biome released four minor versions (1.6 to 1.9), introduced new commands, expanded support for CSS, GraphQL, and various frameworks, and improved IDE integrations. Biome 2.0 will introduce plugins for custom lint rules, domain-specific configurations, improved monorepo support, and multi-file analysis capabilities. The 2025 roadmap includes plans for HTML support, embedded languages, type inference, .d.ts generation, JSDoc support, and enhanced plugin capabilities.
This week in React#218📝Article

2025/01/15

ECMAScript feature: import attributes
The ES feature named Import Attributes allows importing non-JS artifacts like JSON, CSS, and WebAssembly as if they were JS modules. It provides a new syntax using the with keyword to specify the type of the imported artifact. This feature lays the foundation for upcoming features that make use of import attributes, such as JSON modules, CSS modules, and WebAssembly imports.
This week in React#217📝Article
Everything You Need to Know About Node.js Type Stripping
Node.js introduced "Type Stripping" to enable running TypeScript files without configuration. It strips type annotations instead of performing full transpilation, avoiding the complexity and instability of embedding the TypeScript compiler. This approach uses a custom version of the swc transpiler to preserve the original code structure. However, it limits support for some advanced TypeScript features that require code generation or transformation.
This week in React#217📝Article
Become expert in React Query
Key concepts of React Query like stale data, caching, invalidation, and query keys, with tips on using React Query effectively, such as leveraging the dev tools and using React Query as a state manager. It also addresses common questions around optimistic updates, infinite scrolling, and controlling when queries run.
This week in React#217📝Article
Make FormData and input names type-safe in React
Discussion on how to implement type safety for FormData and input names in React using the new useActionState hook, which simplifies state management in forms. A typed utility function is created to safely retrieve values from FormData, linking input names with their corresponding types to prevent typos and errors.
This week in React#217📝Article
Bloated React code? Try component hooks
React components can become overly complex as new features are added, leading to a lack of separation between UI and application logic. By extracting logic into a custom hook, developers can keep components focused on rendering, improving readability and maintainability. Using component hooks reduces cognitive load, enhances testability, and allows for easier adjustments to logic and presentation without affecting each other.
This week in React#217📝Article
Accessibility essentials every front-end developer should know
Using the correct HTML5 elements, such as button and a, is crucial for accessibility and SEO, as they provide built-in support for assistive technologies. Ensure users can navigate using the keyboard with logical tab orders and focus indicators, which are essential for users relying on keyboard navigation. When implementing modals, focus management is critical; use the dialog element when possible and ensure users can close modals with the Escape key.
This week in React#217📝Article
Understanding React Server Components
RSCs can improve perceived performance by allowing HTML to be rendered quickly in the browser while also sending a payload for the Virtual DOM, enabling efficient updates without losing state. Developers must follow specific rules when interleaving Client and Server Components, such as allowing Client Components to be imported into Server Components but not vice versa, to maintain proper functionality. RSCs are best suited for applications with significant server-side logic or database interactions, but may not be ideal for content-heavy sites due to potential bandwidth increases from duplicated data.
This week in React#217📝Article
Revealed: React's experimental animations API
React is getting its first animations API called <ViewTransition />, which is based on the browser's new View Transition API and aims to address some of the limitations of that API. The <ViewTransition /> component can trigger animations as late as possible to avoid freezing the UI, and it works well with asynchronous updates like startTransition. While <ViewTransition /> is a powerful new tool, it doesn't solve all the drawbacks of the View Transition API, and layout animations from libraries like Motion may still be preferable for some use cases.
This week in React#217📝Article
Performance Monitoring Developers Will 
Sentry introduces its new APM features enabling to track performance issues, relate them to source code, draw the line from the frontend code to the backend and even to the database query.
This week in React#217📝Article

2025/01/08

Node’s new built-in support for TypeScript
Starting with v23.6.0, Node.js supports TypeScript without any flags, using a "type stripping" approach that removes all syntax related to types. This changes how TypeScript is used in Node.js, with limitations around non-JS language features, JSX, and future JS features, as well as changes to how imports and tsconfig.json are handled. The article also discusses upcoming features like TypeScript 5.8 warnings and the --experimental-transform-types flag.
This week in React#216📝Article
JavaScript Frameworks - Heading into 2025
The web development landscape is shifting back towards server-first approaches, with new meta-frameworks like SvelteKit and Astro gaining traction as developers seek better performance and simplicity. Despite advancements, the quest for simplicity in web development has not led to easier solutions; instead, the complexity of tools and problems has increased, making it challenging to measure success. AI tools are beginning to influence JavaScript frameworks, with early successes in creating prototypes and identifying performance issues, indicating a potential for more dynamic solutions in the future.
This week in React#216📝Article
How React's Render, Effects and Refs work under the hood
React's render cycle consists of two main phases: the Render phase, where the Virtual DOM is created and updated, and the Commit phase, where changes are applied to the actual DOM. The Virtual DOM is a JavaScript representation of the actual DOM, allowing React to efficiently batch updates and minimize direct DOM manipulations, which can be costly. Using useLayoutEffect or callback refs is recommended for immediate DOM measurements to avoid flickering and ensure accurate positioning.
This week in React#216📝Article
All kinds of state management in React
Summary of the four main types of state management in React: URL state, server state, form state, and client state. It provides guidance on when to use each approach, noting that React's built-in state management features may be sufficient in many cases without needing external libraries.
This week in React#216📝Article
Thoughts on State Management Libraries in the React Compiler Era
Thoughs on the impact of the React Compiler and RSCs on state management libraries like Zustand, Jotai, and Valtio. The React Compiler may address the limitations of React Context that these libraries were designed to solve, potentially reducing their necessity. However, these libraries still offer value in organizing state, composing states, and connecting to external services, and enabling seamless integration of client-side and server-side state could be a promising direction.
This week in React#216📝Article