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

2025/07

2025/07/09

Satisfies in TypeScript
The satisfies keyword in TypeScript allows developers to assert that a value meets a specific type without allowing TypeScript to infer a broader type, thus preventing unwanted type widening. In a real-world scenario, using satisfies helps ensure that an object conforms to the expected type while preventing the introduction of extraneous properties, enhancing type safety. Unlike type casting with as, which can allow incorrect type assignments, satisfies enforces stricter checks, ensuring that only valid properties are included in the type.
This week in React#242📝Article
Infinite Queries in React Query
Utilize the useInfiniteQuery hook in Tanstack Query to manage pagination automatically, simplifying the fetching of paginated data. The data returned is structured as an array of pages, allowing for easy flattening into a single array of posts for rendering. For APIs that use cursors instead of page numbers, adjust the getNextPageParam function to return the next cursor for fetching subsequent data.
This week in React#242📝Article
How to test React Server Component
Method to test React Server Components using a specific code snippet that utilizes React's internals to avoid warnings during testing. Users are instructed to create a new file in their project and fill it with the provided code, allowing them to call the renderServerComponent function to render their React Server Component. The author expresses hope for an official testing solution for React Server Components in the future, indicating that the current method is a workaround.
This week in React#242📝Article
The History of React Through Code
React introduced concepts such as virtual DOM, component-based architecture, and hooks, which have significantly influenced modern web development practices. The webpage explores the evolution of React, a popular JavaScript library for building user interfaces, highlighting its development milestones and key features.
This week in React#242📝Article

2025/07/02

What’s The Difference Between Ordinary Functions And Arrow Functions In JavaScript?
JavaScript supports three main function types: function declarations, function expressions, and arrow functions, each with unique characteristics and use cases. Arrow functions are concise, always anonymous, and do not bind their own 'this', making them unsuitable for methods or constructors. Function declarations are hoisted, allowing them to be called before their definition, while function expressions and arrow functions are not hoisted.
This week in React#241📝Article
CSS conditionals with the new  if() function
The new if() function in CSS, available from Chrome 137, allows for inline conditionals, enabling cleaner and more dynamic styling. if() supports three types of queries: style(), media(), and supports(), allowing immediate application of styles without relying on parent elements. Using if(), developers can style elements based on their state, such as progress cards, by directly referencing data attributes or custom properties.
This week in React#241📝Article
New to the web platform in June
Firefox 140 now supports the CSS Custom Highlight API, allowing developers to define and style text ranges in documents, enhancing text presentation. The Cookie Store API, introduced in Firefox 140, provides an asynchronous method for managing cookies, with basic support across all major browsers. Chrome 138 includes new built-in AI APIs for translation, language detection, and text summarization, all processed on-device for improved performance.
This week in React#241📝Article
Ecma International approves ECMAScript 2025: What’s new?
ECMAScript 2025 introduces several new features including import attributes for JSON modules, iterator helper methods, and new Set methods for advanced data manipulation. New iterator helper methods allow for filtering, mapping, and reducing across any iterable data structure, improving performance by avoiding intermediate arrays. The update includes inline flags for regular expressions, duplicate named capture groups, and a new method RegExp.escape() for escaping text in regex patterns.
This week in React#241📝Article
The accessibility pipeline for frontend teams
Storybook 9 integrates accessibility checks throughout the development lifecycle, providing fast feedback and high coverage from local development to CI. Storybook runs accessibility checks in CI on every pull request, acting as a safety net to catch issues before they reach the main branch. Chromatic's Accessibility Regression Testing helps teams track and manage accessibility debt by flagging only new or changed violations, making it easier to prioritize fixes.
This week in React#241📝Article
Next.js Promise Racing
The Next.js demo illustrates how to use React Server Components to manage promise resolution, displaying a loading spinner if the promise takes longer than a specified time. The provided code snippet demonstrates fetching user data asynchronously, racing the promise against a timeout, and utilizing the Suspense component for loading states. This approach allows for improved performance by minimizing wait times; if the promise resolves quickly, the loading UI is never sent to the client.
This week in React#241📝Article
The time is right for a DOM templating API
The creator of Lit proposes adding a declarative templating API to the web platform to enhance DOM manipulation, addressing a significant gap in current web development practices. The absence of a native templating solution leads to longer app download times, increased rendering overhead, and security vulnerabilities, forcing developers to rely on external libraries. Declarative templating improves ergonomics, enhances security against XSS attacks, boosts performance, and simplifies static analysis, making it a foundational feature for modern web frameworks.
This week in React#241📝Article
Remixing Shopify's Admin: How We Made It 30% Faster and AI-Ready
Shopify's Admin has been revamped to be 30% faster, enhancing the user experience for merchants managing their businesses. The architecture was transformed using Remix, focusing on web standards and predictable data flow, which streamlined the codebase and improved loading consistency. Introduced Remix loaders for a standardized loading experience, eliminating inconsistent loading patterns and enhancing the overall responsiveness of the Admin interface.
This week in React#241📝Article

2025/06

2025/06/25

Prettier 3.6: Experimental fast CLI and new OXC and Hermes plugins!
Prettier 3.6 introduces an experimental high-performance CLI that can be activated with the --experimental-cli flag, enhancing formatting speed and efficiency. TypeScript now supports the import type attribute in TSImportType, enhancing type handling in code.
This week in React#240📝Article
Frontend test coverage with Storybook 9
Frontend testing is crucial to ensure that UI behaves as users expect, with coverage analysis revealing untested states and conditions. Storybook 9 allows for automatic testing of UI components across interaction, accessibility, and visual dimensions, enhancing coverage and feedback loops. AI tools can assist in generating stories from component code, helping to fill coverage gaps, although they may require refinement.
This week in React#240📝Article
How to take screenshots of your statically exported Next.js site in GitHub Actions workflow
The GitHub Actions workflow automates the process of taking screenshots of a statically exported Next.js site on every pull request, allowing for visual previews before merging. A custom script using Puppeteer captures screenshots of all HTML pages in the Next.js export directory, ensuring lazy-loaded images are fully rendered. Screenshots are uploaded as artifacts in the GitHub Actions UI, making them easily accessible for review after the workflow completes.
This week in React#240📝Article
Connect any React application to an MCP server in three lines of code
The use-mcp React library allows developers to connect any React application to a remote Model Context Protocol (MCP) server in just three lines of code, simplifying the process of building MCP clients. use-mcp manages connection states and retries automatically, ensuring a seamless user experience even during network issues. When connected to an MCP server, use-mcp automatically fetches available tools, allowing applications to adapt to new capabilities without code changes.
This week in React#240📝Article
Next.js 15.1+ is unusable outside of Vercel
Metadata streaming in Next.js now requires JavaScript execution for metadata tags, which search engines and static builds struggle with unless special crawler detection is implemented. Non-Vercel platforms face major compatibility issues, and sticking to older versions to avoid these problems exposes projects to critical security vulnerabilities.
This week in React#240📝Article
Towards React Server Components in Clojure, Part 3
React Server Components in UIx now support declarative form mutations without page reloads, secure partial application of server functions, and co-located data fetching with batching and request-scoped caching to optimize database queries. Prefetching for routes is now tunable by priority, and error boundaries with stack traces are integrated for better debugging and production safety.
This week in React#240📝Article
i18n-check: Validating your Next.js internationalization
The tool supports popular i18n libraries like next-intl and next-i18next, helping teams catch untranslated or out-of-sync messages before runtime issues occur. Setup involves installing the package, configuring scripts, and running checks locally or in CI to ensure translation consistency and completeness.
This week in React#240📝Article
Linking and Navigating
Next.js uses server rendering by default, generating pages either statically at build time or dynamically at request time. It speeds up navigation by prefetching static routes, streaming dynamic content with loading skeletons, and using client-side transitions to avoid full page reloads. For best performance, dynamic routes should include a loading UI, and prefetching can be fine-tuned or disabled as needed to balance resource use and user experience.
This week in React#240📝Article
Generating Playwright Tests With AI: Let's Try the New Playwright MCP Server!
In this video, Stefan (Playwright Ambassador) dives into the integration of AI with the Playwright MCP server to automate end-to-end test generation. Talks about MCP, browser automation and how to combine everything to generate Playwright tests. He explores AI capabilities and limits and discuss best practices for generating accurate and reliable Playwright tests.
Node Weekly#583📹Video
Vite 7.0 is out!
Vite 7 introduces Rolldown, a Rust-based bundler that aims to reduce build times, especially for larger projects, and will become the default bundler in the future. Vite 7 requires Node.js version 20.19+ or 22.12+, dropping support for Node.js 18, which reached its end of life in April 2025.
Node Weekly#583📝Article

2025/06/18

Using await at the top level in ES modules
Introduced in ES2022, top-level await allows the use of the await keyword directly at the module level, simplifying asynchronous code without needing async IIFEs. Common applications include fetching remote configurations, dynamic imports, and initializing WebAssembly modules, all without boilerplate code. When using top-level await, module execution is paused for any importing modules until the awaited code completes, which can lead to hidden load-order dependencies.
This week in React#239📝Article
Suppressions of Suppressions
Build failures can arise from syntax errors or module issues, but it's crucial to also consider failing builds for linting errors to prevent deploying bad code. While suppressions can be useful for handling false positives in linting rules, overusing them can lead to significant issues, including site crashes or performance drops. Introducing a new lint rule to flag suppressions of critical rules can help maintain code quality, similar to practices used at Facebook and in the open-source community.
This week in React#239📝Article
A new way to style gaps in CSS
CSS gap decorations are a new way to style gaps in flex, grid, and multi-column layouts, now available for trial in Chrome and Edge 139. This feature allows for cleaner markup, no layout impact, and enhanced customizability with properties like rule-break and gap-rule-paint-order. .
This week in React#239📝Article
TanStack Start: the Future of React Frameworks?
Start offers enhanced server functions that allow for customizable HTTP methods, validation with Zod, and access to full HTTP requests, providing a more robust solution than NextJS. TanStack Start includes DevTools for debugging routes and loader data, which significantly enhances the development experience compared to existing frameworks. Deploying a TanStack Start application is straightforward, with support for major hosting providers like Vercel and Netlify, making it accessible for developers.
This week in React#239📝Article
Zero is Not Local-First. It's Better.
Zero employs a 'partial sync first' model, allowing developers to sync only the necessary data instead of everything, enhancing performance and control over local storage. The preload API enables developers to prepare data ahead of time, reducing loading states and improving user experience by ensuring data is ready for display when needed. Zero supports isomorphic mutators for mutations, allowing local updates to occur immediately while syncing with the server, simplifying the implementation of optimistic UI without race conditions.
This week in React#239📝Article
Real-Time Gesture Recognition in Videoconferencing
Gesture recognition technology identifies hand gestures in real-time, enhancing user engagement in videoconferencing applications. The implementation utilizes MediaPipe for hand landmark detection, Smelter for video compositing, and Fishjam for low-latency communication via WebRTC. Real-time gesture recognition is complex due to the need for computer vision, low-latency streaming, and resource-intensive processing in the browser.
This week in React#239📝Article
Composable streaming with Suspense
React's <Suspense> allows for composable streaming of data-fetching components, enhancing user experience by displaying fallback UIs while data loads. By wrapping components in <Suspense>, developers can easily implement streaming without needing to overhaul existing code or architecture, making it a powerful tool for enhancing applications. Using <Suspense> requires no additional configuration or special server setup, making it accessible for developers to integrate into their applications.
This week in React#239📝Article
Bringing React's <ViewTransition> to vanilla JS
View transitions allow for smooth animations between state changes in supported browsers like Chrome, Edge, and Safari, enhancing user experience by visually connecting changes. The author explores implementing view transitions in vanilla JavaScript, providing code examples that demonstrate how to create animations without relying on frameworks like React. .
This week in React#239📝Article
Biome v2—codename: Biotype
Biome v2, is officially released as the first JavaScript and TypeScript linter offering type-aware linting without needing the TypeScript compiler. New features include multi-file analysis, improved monorepo support with nested configuration files, and a revamped import organizer that enhances import sorting and merging. The new HTML formatter is in experimental stage, focusing on .html files, and can be enabled in the configuration file, although it is disabled by default.
Other📝Article

2025/06/11

Use Async Local Storage to prevent props drilling in Next.js Route handlers
AsyncLocalStorage lets you store and access data (such as the authenticated user) throughout a request’s lifecycle in Next.js route handlers, eliminating the need to pass it manually through every function. By wrapping logic in a context block, any nested function can retrieve the user object directly from the store, simplifying code and reducing errors. However, there’s no compile-time check to ensure all functions are properly wrapped in the context.
This week in React#238📝Article
Beware The URL Type-Safety Iceberg
Type-safety in URL state management is crucial, but it is just the beginning; there are deeper issues to address for effective state management. Achieving read type-safety is straightforward with validation libraries, but writing complex state requires serialization to ensure bijectivity, which nuqs facilitates with built-in parsers. Once shared, URLs become immutable snapshots of state; handling changes requires migrations to adapt old URLs to new application schemas.
This week in React#238📝Article
useState should require a dependency array
The current implementation of useState in React allows for un-reactive code by creating a snapshot of a prop’s initial value, ignoring subsequent changes. This can lead to bugs and is not ideal for handling mutable derived state. A better approach would be to require a dependency array for useState, similar to useMemo and useEffect, to ensure state is re-computed when dependencies change.
This week in React#238📝Article
Using MCP Sampling in VSCode (Insiders)
VS Code Insiders now fully supports the Model Context Protocol (MCP) spec, enabling users to utilize tools, prompts, and sampling features in their projects. A practical example of MCP is demonstrated through a journaling app where the LLM can automatically generate tags for entries, enhancing user experience. When creating a journal entry, a sampling request is made to generate tags in the background, allowing for instant entry creation without waiting for tag generation. .
Other📝Article
Reactivity is easy
The author addresses common misunderstandings of reactivity in React, emphasizing the importance of fine-grained selector-based reactivity for better performance and maintainability. A solution is provided in under 35 lines of code, utilizing a custom Store class that allows components to subscribe to specific state changes, thus preventing unnecessary re-renders. .
This week in React#238📝Article
How Imports Work in RSC
The JavaScript module system, utilizing import and export, ensures that modules behave like singletons, preventing code duplication and allowing for efficient memory management. When sharing code between frontend and backend, developers must be cautious of environment-specific code, as improper imports can lead to build failures or security risks, such as exposing server-only secrets to the frontend. The introduction of server-only and client-only markers helps prevent inappropriate code from being included in the wrong environment, ensuring that build errors occur when incompatible code is imported.
This week in React#238📝Article
React Router Open Governance
React Router has introduced a new Open Governance Model to allow community involvement in its development, moving away from a founder-led approach. The project aims to simplify its API surface, focusing on core functionalities while ensuring smooth migration paths for developers during major updates. New features in development include a hook for consolidating router state, a type-safe alternative to existing data loaders, and enhancements for route pattern matching.
This week in React#238📝Article
What engineers get wrong about communication
Engineers should prioritize user issues in their communication, focusing on feature requests and customer problems, as this leads to better product outcomes. Avoid hoarding information; instead, share knowledge openly to prevent bottlenecks and duplication of effort, fostering a culture of trust and collaboration. Ensure that all communication is actionable by clearly defining next steps, owners, and deadlines to facilitate progress and accountability.
This week in React#238📝Article

2025/06/04

Directive prologues and JavaScript dark matter
JSX pragmas like /** @jsx h */ control how TypeScript transpiles JSX syntax, converting it into function calls. They must be C-style comments at the start of the file to be effective. Directive prologues, such as "use strict", are specified in the ECMAScript standard and affect how JavaScript code is executed, helping to enforce strict mode and prevent issues like accidental global variable creation.
This week in React#237📝Article
TC39 Advances Array.fromAsync, Error.isError, and Explicit Resource Management to Stage 4
At the 108th TC39 meeting, ‎Array.fromAsync, ‎Error.isError, and the new ‎using declaration for explicit resource management all advanced to Stage 4, meaning they are set to become part of the official JavaScript specification. These features will make handling async data, error detection, and resource cleanup more robust and ergonomic. Additionally, six other proposals progressed, including Immutable ArrayBuffer (Stage 3) and new math utilities like Math.clamp and Seeded Pseudo Random Numbers (Stage 2).
This week in React#237📝Article
useSyncExternalStore: Demystified for Practical React Development
The useSyncExternalStore hook is designed to integrate React components with external state management systems or browser APIs, preventing inconsistencies known as 'tearing' during concurrent rendering. The hook requires three arguments: subscribe (to set up data store subscriptions), getSnapshot (to retrieve the current data snapshot), and an optional getServerSnapshot for server-side rendering.
This week in React#237📝Article
The Power in Pragmatism
The core philosophy of TanStack tools emphasizes pragmatism over purity, focusing on building flexible, framework-agnostic solutions that adapt to evolving web technologies. TanStack Start and Router are designed to be independent of any specific framework, allowing developers to use them with various UI frameworks like React, Solid, or Vue. TanStack tools prioritize composability, enabling developers to use only the components they need and to replace or extend functionalities as their projects grow.
This week in React#237📝Article
Search Params Are State
Search parameters should be treated as first-class state in applications, allowing for better validation, type safety, and coordination within routing. TanStack Router integrates search parameter schemas directly into route definitions, ensuring a single source of truth for validation and type inference, preventing schema fragmentation. By embedding validation and typing within the router, TanStack Router eliminates the need for developers to follow conventions, reducing duplication and potential bugs.
This week in React#237📝Article
Why Does RSC Integrate with a Bundler?
RSC integrates with bundlers like Parcel and Webpack to efficiently serialize and deserialize React components, allowing for optimized code delivery to the client. RSC serializes React components by referencing their code as static assets rather than embedding code directly into JSON, which enhances performance and reduces redundancy. On the client side, RSC utilizes bundler-specific functions to load modules, ensuring that the necessary code is fetched efficiently without creating a waterfall effect.
This week in React#237📝Article
RSC for LISP Developers
LISP emphasizes the idea that code is data and data is code, allowing for quoting, which prevents immediate evaluation of code. RSC introduces a client-server programming paradigm where server code can reference client code without executing it, using the 'use client' directive. Unlike LISP's quoting, RSC provides an opaque reference to client code, which is resolved at compile time, allowing modular composition of server and client behaviors. The server can wrap client code, ensuring that all server operations occur within a single request/response roundtrip, enhancing efficiency and organization.
This week in React#237📝Article
One Roundtrip Per Navigation
Traditional HTML apps fetch all necessary data in one roundtrip, while client-side applications often require multiple fetches for different resources, leading to potential performance issues. Using server loaders can optimize data fetching by allowing all necessary data to be loaded in one request, reducing client/server waterfalls and improving performance. RSC provide a way to fetch data efficiently while maintaining the modularity of components, ensuring that data arrives in a single roundtrip without client/server waterfalls.
This week in React#237📝Article
Progressive JSON
Progressive JSON aims to improve data transfer by allowing clients to start processing JSON data before the entire object is fully loaded, similar to how Progressive JPEGs work. By sending data in a breadth-first manner with placeholders for incomplete data, clients can progressively handle and display information as it arrives, represented as Promises. React Server Components utilize this progressive streaming method, allowing for a seamless user experience where loading states can be intentionally designed using <Suspense>.
This week in React#237📝Article
Storybook 9
Storybook 9 introduces enhanced component testing capabilities, allowing users to run interaction, accessibility, and visual tests across all stories with a single click. The new version is 48% leaner, features automatic story generation, tag-based organization for better filtering, and story globals for context settings. Storybook 9 has partnered with Vitest for fast test running and Playwright for high-fidelity browser testing, making it a robust tool for UI development.
This week in React#237📝Article
Resilient Import Maps - Better Theme Development and Beyond
Initial limitations of import maps included restrictions on loading order and the requirement for a single import map, which hindered their adoption in complex applications like Shopify themes. Shopify collaborated with web platform experts to implement a reconciliation mechanism that allows multiple import maps and modules to load in any order, enhancing flexibility and performance. .
This week in React#237📝Article

2025/05

2025/05/28

ESLint v9.0.0: A retrospective
The major highlight of v9.0.0 is the new configuration system, which received mixed reviews, with many users initially feeling it was unready and disruptive. Initial sentiment was largely negative, with users reporting issues that led to some delaying upgrades or considering alternative tools. Key takeaways include the need for smaller, more frequent releases, improved tooling to assist users, and better ecosystem outreach to facilitate smoother upgrades.
This week in React#236📝Article
Announcing TypeScript Native Previews
TypeScript Native Previews are now available, offering a 10x speed-up for most projects. A preview version of the TypeScript (Native Preview) extension for Visual Studio Code is available. The native port now includes fuller type-checking support, including JSX and JavaScript+JSDoc, significantly improving performance and error detection. Current limitations include missing command-line functionalities like --build, declaration emit, and certain editor features such as auto-imports and find-all-references. The TypeScript Native Previews will evolve into TypeScript 7, with nightly updates and plans to include major features like --build and enhanced language service functionalities by the end of the year.
This week in React#236📝Article
SolidJS for React Developers
SolidJS does not use a virtual DOM; instead, it employs fine-grained reactivity, updating only specific DOM nodes that need changes, which enhances performance. Avoid using conditionals directly in components, async code inside createEffect, and destructuring props or stores to maintain reactivity. SolidJS uses signals (getters and setters) for state management, differing from React's useState, and automatically tracks dependencies without a dependency array.
This week in React#236📝Article
Building with React Server Components and Client Components in RedwoodSDK
RedwoodSDK utilizes RSC to fetch data on the server, enhancing performance and reducing client-side complexity. By returning a promise to client components, React can pause rendering until data is ready, effectively utilizing Suspense and streaming capabilities. The method offers faster Time To First Byte (TTFB), less JavaScript sent to the browser, and easier component testing and maintenance.
This week in React#236📝Article
Your React Meta-Framework Feels Broken, Here's Why
RedwoodSDK aims to simplify full-stack app development by eliminating unnecessary abstractions and allowing developers to work directly with JavaScript, TypeScript, and React without hidden complexities. RedwoodSDK emphasizes zero magic, direct use of web APIs, and a seamless local-to-production experience, making it easy for developers to deploy applications with one command.
This week in React#236📝Article
Next.js Server Actions are public-facing API endpoints
Next.js provides built-in security features, including secure action IDs that are encrypted and periodically recalculated, and dead code elimination to prevent unused Server Actions from being exposed. Server Actions are invoked using POST requests with a Next-Action header, and can accept serializable arguments in the payload, which must be formatted as JSON. Developers must implement authorization checks within Server Actions to prevent unauthorized access, as action IDs can be discovered in the client bundle.
This week in React#236📝Article
Why React Error Boundaries Aren't Just Try/Catch for Components
React error boundaries provide a declarative way to catch errors in the component tree, displaying fallback UI instead of crashing the app. Error boundaries only catch errors during rendering, lifecycle methods, and constructors, but not in event handlers or async code. For async errors, developers must manually surface the error to React using libraries like react-error-boundary, which provides a user-friendly API.
This week in React#236📝Article
Composing Server and Client Components: The Modern React's Superpower
This new model reduces JavaScript load by sending only interactive components to the client, resulting in faster page loads and improved performance. With RSC, data can be fetched directly where it's needed, eliminating the need for prop drilling and making the codebase more robust. React's streaming and Suspense features allow for loading states and incremental UI updates, enhancing user experience during data fetching.
This week in React#236📝Article
The Beauty of TanStack Router
TanStack Router is designed with TypeScript in mind, offering fully inferred type safety for routing parameters, which eliminates the need for manual type assertions. The router allows for validation of search parameters directly on route definitions, ensuring that user input is validated and type-safe. TanStack Router provides selectors for hooks like useParams and useSearch, allowing components to subscribe only to the parts of the state they need, reducing unnecessary re-renders.
This week in React#236📝Article
Wake up, Remix!
Remix is being revitalized with a new version, Remix v3, focusing on simplicity, clarity, and performance, while moving away from dependencies like React. Remix v2 has been merged into React Router v7, enhancing its capabilities and providing a stable platform for developers transitioning from previous versions. Remix v3 aims to redefine web frameworks by creating a modular toolkit that prioritizes a lightweight and efficient development experience.
This week in React#236📝Article

2025/05/21

I think the ergonomics of generators is growing on me
JavaScript generators provide a more ergonomic way to work with iterators and iterables compared to manual implementations. Generators can help reduce tight coupling between components, avoid "annoying" practices like callbacks and recursion, and make exhaustive pagination more efficient.
This week in React#235📝Article
JavaScript's New Superpower: Explicit Resource Management
The Explicit Resource Management proposal introduces using and await using declarations for automatic resource disposal, along with [Symbol.dispose]() and [Symbol.asyncDispose]() for cleanup operations. New global objects DisposableStack and AsyncDisposableStack allow developers to manage multiple disposable resources efficiently, ensuring they are disposed of in the correct order. .
This week in React#235📝Article
The Past and Future of Render Optimization with React Context
Discussion on the evolution of state management and render optimization in React, from using useState and useContext to more advanced solutions like useContextSelector and useSyncExternalStore. It also mentions a potential new API called use(store) that the React team is exploring.
This week in React#235📝Article
Just F*cking Use React
Using modern frameworks like React is essential for building complex, interactive applications, as they provide tools for state management, reusable components, and efficient UI updates. You should use React or similar frameworks when managing non-trivial client-side state, needing reusable UI components, or developing applications that require complex interactions.
This week in React#235📝Article
Concurrent Rendering
The introduction of Concurrent Rendering allows React to prioritize high-priority tasks, improving app responsiveness and performance. The useDeferredValue and startTransition APIs help manage rendering priorities, allowing developers to defer updates and maintain UI responsiveness. The full potential of concurrent features will be further explored in React v19, expected to clarify their practical applications.
This week in React#235📝Article
React Router RSC Preview
React Router now offers preview support for RSC, allowing for incremental adoption in existing applications. New 'Server Component Routes' can be created, which do not bundle code for the client, optimizing performance by only sending necessary client components. A stable release is pending due to RSC support in Vite, with ongoing efforts to enhance compatibility and optimize revalidation processes.
This week in React#235📝Article
Announcing Appwrite Sites: The open source Vercel alternative
Appwrite has introduced 'Appwrite Sites', an open-source alternative to Vercel, allowing users to deploy and host websites directly within the Appwrite platform. Appwrite Sites includes static hosting, server-side rendering support for popular frameworks, Git integrations for automatic deployments, deployment previews, a global CDN, and built-in DDoS protection. Appwrite Sites is available for both cloud and self-hosted deployments, allowing users to manage their hosting environment according to their preferences.
This week in React#235📝Article

2025/05/14

shape(): A New Powerful Drawing Syntax in CSS
The shape() function is a new addition to CSS, allowing for more complex and responsive shapes in properties like clip-path, enhancing design capabilities. shape() is more versatile than existing functions like path(), as it allows for responsive design, making it easier to create intricate shapes without relying on SVG or JavaScript. The shape() function includes commands such as line, arc, curve, and smooth, enabling detailed shape creation with sub-syntax for precision.
This week in React#234📝Article
How to Build a Custom React Renderer?
Developers can choose between implementing a new React renderer for JavaScript environments or creating a new target platform for React Native, depending on their specific needs. The article details how to implement the react-reconciler API, emphasizing the need to create a HostConfig object and the differences between Mutation and Persistence modes. While React offers a robust ecosystem, it has limitations for non-UI use cases, particularly regarding update order and network reliability when rendering occurs on a server.
This week in React#234📝Article
The Limits of RSC: A Practitioner's Journey
The author faced significant limitations when implementing features like infinite scrolling, which required maintaining state across multiple data fetches, revealing inefficiencies in the RSC model. After struggling with RSC for data management, the author transitioned to using @tanstack/react-query for better control over query state and client-side data management. RSC is still beneficial for initial data-fetching with SSR, rendering static content, and optimizing non-interactive UI elements, but should not be relied upon as the primary data layer.
This week in React#234📝Article
No, react context is not causing too many renders
Many developers believe that React context causes excessive re-renders, leading them to prefer state management tools like Redux or Zustand. For optimal performance, avoid combining unrelated state in a single context provider; consider using multiple providers for distinct data. The author highlights that controlled components can lead to more frequent re-renders, making them a greater performance concern than context.
This week in React#234📝Article
Dependency Inversion in React: Building Truly Testable Components
React components often suffer from tight coupling to their dependencies, making them hard to test and maintain. This leads to challenges in changing data sources and testing loading states. The Dependency Inversion Principle suggests that high-level modules should not depend on low-level modules, but rather both should depend on abstractions, allowing for more flexible and testable components. Key best practices include defining clear interfaces, injecting dependencies, and ensuring components are testable in isolation, which enhances maintainability and reusability.
This week in React#234📝Article
React Hook Factory
Custom hooks in React allow developers to encapsulate reusable reactive logic, enhancing code efficiency and maintainability. The Hook Factory pattern enables the creation of hooks programmatically, reducing redundancy and promoting code reuse, particularly for similar hooks. A factory function can be created to generate context hooks that ensure the context provider is present, preventing runtime errors.
This week in React#234📝Article
Static as a Server
Hybrid frameworks allow developers to choose between static and server rendering on a per-route basis, enhancing flexibility and reducing tooling fragmentation. The static hosting plan from Cloudflare is free, resulting in zero hosting costs for the author. The React Server Component runs at build time during deployment, allowing for static site generation by fetching data and saving responses to disk.
This week in React#234📝Article

2025/05/07

RSC for Astro Developers
Astro Components, with a .astro extension, execute on the server and can access server-side resources, while Client Islands are interactive components from frameworks like React and Vue that run on the client side. RSC uses regular JavaScript functions for Server Components, while Astro Components are defined in .astro files. The use client directive in RSC marks the transition from server to client code. In RSC, components can easily switch roles between server and client without needing to convert or duplicate code, enhancing flexibility in development.
This week in React#233📝Article
Functional HTML
Server Tags allow developers to define custom HTML elements that are processed on the server, enabling dynamic content generation before the HTML is sent to the client. Client References provide a way to link server-side functions to client-side events, allowing for a more seamless interaction between server and client code. The framework supports asynchronous data fetching, enabling components to load data from external sources without blocking the rendering process.
This week in React#233📝Article
When You Might Need to Override the Defaults in TanStack Query
By default, queries retry failed requests three times with exponential backoff. It's advisable to disable retries in unit tests to speed up the feedback loop, especially for handling HTTP errors. You can use a callback function to selectively retry queries based on error status codes, such as disabling retries for '404 Not Found' and '403 Forbidden' errors. Queries are aggressive in refetching cached data by default. You can configure cache lifetime settings to prevent unnecessary requests, especially when dealing with static data or external APIs with rate limits.
This week in React#233📝Article
Server Components Give You Optionality
RSCs provide developers with the flexibility to choose where and when their code runs—on the server, client, or both—enhancing user experience and performance. RSCs grant developers the autonomy to navigate between different rendering environments, promoting a more modular and efficient approach to web development. .
This week in React#233📝Article
Frontends are hard
Modern frontends like Next.js and Svelte are complex to deploy due to the need for various infrastructures such as serverless functions, databases, and CDNs, making traditional cloud provider support inadequate. There are over a dozen competing frameworks, each with unique features, which complicates support from major cloud providers like AWS and GCP, leading many developers to rely on specialized services like Netlify and Vercel. .
This week in React#233📝Article
The future of AI interaction: Beyond just text
Users desire a seamless interface that allows them to express their needs without navigating multiple websites, preferring a single platform for interaction. Effective user interactions with AI should include dynamic UI elements, such as maps or buttons, rather than relying solely on text responses for tasks like finding directions. Despite concerns about AI replacing UI developers, the need for visual and interactive experiences will persist, as users will continue to prefer engaging with various UI elements.
This week in React#233📝Article

2025/04

2025/04/30

What Does "use client" Do?
'use client' and 'use server' are two pivotal directives in React Server Components that facilitate communication between client and server, allowing developers to treat them as a single program across different environments. 'use server' allows backend functions to be called from the frontend, automating HTTP endpoint creation and enabling a more direct connection between client and server code. 'use client' enables backend code to reference frontend components directly, allowing for seamless data passing and rendering without the need for manual script tags. These directives create a syntactic connection between client and server, enhancing type safety, code organization, and the ability to create reusable abstractions that encapsulate both sides of the application.
This week in React#232📝Article
Categorize Your Dependencies
PNPM Catalogs allow for centralized management of dependency versions across monorepos, enabling better categorization and version control through catalog fields in the pnpm-workspace.yaml file. New tooling, such as the PNPM Catalog Lens extension, enhances the developer experience by displaying resolved versions inline in package.json, improving visibility and management of dependencies. As categorization practices gain traction, they could lead to improved dependency optimization and error prevention in build tools, enhancing overall project maintainability.
This week in React#232📝Article
React-admin With Shadcn UI
React-admin is a design-agnostic SPA framework for B2B applications, allowing integration with various design systems, including Shadcn UI. You can easily change the look of your react-admin app by adjusting the theme and darkTheme props, with built-in themes like B&W inspired by Shadcn UI. .
This week in React#232📝Article
Parents & Owners in React: Context Providers
The article discusses the importance of separating context providers from state management logic to optimize component re-renders in React applications. Understanding the distinction between parent and owner components is crucial for improving data flow and performance in React apps. Components in React re-render due to self-updates, context updates, or owner updates, which can lead to unnecessary re-renders if not managed properly.
This week in React#232📝Article
Concurrent Optimistic Updates in React Query
Optimistic updates enhance user experience by allowing immediate UI changes before server confirmation, but they require careful handling of server logic on the client side. Handling concurrent optimistic updates can lead to inconsistencies if multiple mutations occur simultaneously, necessitating strategies like query cancellation and conditional invalidation. Query cancellation prevents UI inconsistencies by aborting ongoing queries that could conflict with optimistic updates, ensuring a smoother user experience.
This week in React#232📝Article
React Internals: Which useEffect runs first?
In React, when multiple components are involved, child components' effects are committed before their parent components, which can lead to unexpected behavior. React's component lifecycle consists of three main phases: Trigger, Render, and Commit, each playing a crucial role in how components are updated and effects are executed. React's traversal algorithm steps through each fiber node twice during the render and commit phases, which is key to understanding the order of effect execution.
This week in React#232📝Article
You can serialize a promise in React
React allows promises to be serialized and shared between server and client using a stream format, enabling seamless data transfer. Streams provide a way to represent promises at different lifecycle stages, making them readable while pending and after resolution. The ability to serialize data is a key feature of React Server Components, allowing for efficient data sharing between server-rendered and client-rendered components.
This week in React#232📝Article

2025/04/23

Impossible Components
Article emphasizeing a top-down data flow where the backend serves as the source of truth, passing data to the frontend, allowing for self-contained components that manage their own state. The article showcases how to create interactive components, such as a sortable and filterable list of posts, that maintain local state while fetching data from the backend.
This week in React#231📝Article
Guide to fast websites with Next.js: Tips for maximizing server speeds and minimizing client burden
Evaluate server response time, page render time, and user interaction time to measure website speed effectively. Utilize Next.js features like full pre-rendering and Partial Prerendering to enhance server response times by serving pages from a CDN. Reduce JavaScript bundle sizes and limit the use of client components to improve page rendering speed and decrease browser workload.
This week in React#231📝Article
An Introduction to JavaScript Bundler Rspack
Rspack is a high-performance JavaScript bundler written in Rust, offering fast builds, hot module replacement, and production bundling. It is framework-agnostic, compatible with various technologies, and provides features like bundle analysis, tree shaking, and source maps. Rspack is well-suited for large-scale projects, improving development experience with faster build times and an efficient development server.
This week in React#231📝Article
Simplify TanStack React Query State Handling with Pattern Matching
The article introduces a pattern matching utility function, matchQueryStatus, to simplify handling different states (loading, error, success, empty) in TanStack React Query, enhancing code readability and maintainability. It provides a clear code example demonstrating how to implement the matchQueryStatus function, which consolidates complex conditional logic into a single, declarative structure.
This week in React#231📝Article
React Compiler RC
The React Compiler RC is now available as a stable and near-final version, ready for production use. Users should migrate from eslint-plugin-react-compiler to eslint-plugin-react-hooks@6.0.0-rc.1. The React Compiler is compatible with React 17 and up, and users can specify a minimum target in their compiler config if not on React 19.
This week in React#231📝Article
React Labs: View Transitions, Activity, and more
React has introduced two new experimental features: View Transitions and Activity, which are now available for testing in the experimental version of React. The View Transitions feature allows developers to easily add animations to UI transitions using the <ViewTransition> component, which can be triggered by various actions like state changes or navigation. The <Activity> component helps manage UI state by allowing parts of the UI to be visually hidden while preserving their state, improving user experience when navigating between pages.
This week in React#231📝Article

2025/04/16

Custom CSS Functions in the Browser
CSS will soon allow developers to create custom functions, enabling reusable logic directly in stylesheets without third-party tools. Functions can accept parameters, allowing for local custom properties, and can also have default values for optional parameters to streamline code.
This week in React#230📝Article
Building Reusable Components with React 19 Actions
React 19 Actions streamline the management of pending states, errors, optimistic updates, and sequential requests, enhancing user experience during transitions. Using the useOptimistic() hook, the component can reflect changes immediately in the UI, improving user interaction by showing the new value before the transition completes. Important concepts include the significance of naming actions for clarity, the use of useTransition() for tracking state, and the ability to maintain reusability while allowing custom logic in parent components.
This week in React#230📝Article
The new Cookie Store API
Article on the new Cookie Store API, which provides a more performant and standardized way to programmatically access and manage cookies in browsers compared to the traditional document.cookie API. The author highlights the benefits of the Cookie Store API, including improved performance, better state management, and potential for standardization across applications. The article also provides code examples and guidance on how to adopt the Cookie Store API today, even in browsers that don't yet fully support it.
This week in React#230📝Article
Avoid the State Synchronization Trap
This post discusses a common issue in state management - the state synchronization trap. It presents an evolving example of an orders table, demonstrating different approaches to synchronizing state, including direct setters, gate setters, effects, and selectors. The author recommends the selector approach as the most maintainable solution, avoiding UI glitches and unnecessary data fetching.
This week in React#230📝Article
Memoizing components in React: a case for useMemo
Discussion about memoization in React, comparing the use of React.memo and useMemo. It argues that useMemo offers more control, visibility, and maintainability than React.memo in most scenarios, with explicit dependency tracking and local optimization. The article also mentions the upcoming React Compiler, which will automatically apply memoization optimizations similar to useMemo.
This week in React#230📝Article
Toast messages in React Server Components
The article describes how to add toast messages to a Next.js application using RSC, including creating and displaying the toast messages thanks to cookies, removing them, and using the Sonner library to style the toasts. It also discusses using the useOptimistic hook to provide instant feedback when dismissing a toast. The overall goal is to create a robust toast messaging system that works well across redirects, new tabs, and page reloads.
This week in React#230📝Article
JSX Over The Wire
Very nice post by Dan Abramov exploring an approach to building web applications where the backend provides a "Backend for Frontend" (BFF) layer that translates the frontend's data requirements into efficient server-side data fetching, using composable ViewModel functions that mirror the structure of the frontend components and can be customized for each screen's needs - a modern take on older web development techniques like Server-Side Includes and Common Gateway Interface. This explains how we naturally came to RSC.
This week in React#230📝Article