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

2024/12

2024/12/18

The Mental Model of Server Components
RSCs are designed to render only on the server, eliminating unnecessary hydration and resulting in smaller bundle sizes and faster time-to-interactivity. RSCs allow for a composable architecture where most of the UI can be rendered on the server, with interactivity added selectively, enhancing both user experience and developer experience.
This week in React#214📝Article
React Tech Stack [2025]
Recommandée stack: Next.js for full-stack applications, Tailwind CSS for styling, and TypeScript for improved code maintainability. Supabase is suggested as a database service, while Lucia is recommended for authentication, despite its deprecation, due to its educational value in understanding authentication concepts. A combination of React Testing Library and Cypress/Playwright is advised for testing, alongside ESLint and Prettier for tooling, ensuring code quality and consistency.
This week in React#214📝Article
5 tips to effectively optimize INP in React
It is recommended to keep the DOM size under 2,500 elements for optimal performance, with strategies like lazy loading for non-essential components to improve rendering speed. The <Suspense> tag in React can enhance performance by allowing selective rendering of components, but should be used carefully to avoid hydration errors and ensure quick user interactions. Developers should be cautious of hydration errors that can occur when server-rendered HTML does not match client expectations, which can degrade performance and affect Core Web Vitals.
This week in React#214📝Article
Rails + Stimulus + React
Stimulus is a lightweight JavaScript framework designed to enhance static HTML by connecting JavaScript controllers to HTML elements, making it easy to add interactivity without a full SPA architecture. This integration allows React to be loaded only when necessary, improving performance by not overwhelming the Rails application with unnecessary JavaScript on pages that do not require it.
This week in React#214📝Article
How to validate your React i18next application
Validating translation files is crucial to ensure they are up-to-date and free from outdated or broken keys, which can degrade user experience. The ˋi18n-check` tool automates the process of identifying unused, untranslated, or invalid translation messages, streamlining the validation process.
This week in React#214📝Article
React 19 introduces full support for custom elements
The new version allows developers to use Web Components without needing special wrappers, simplifying integration and enhancing compatibility. React 19 resolves previous issues by allowing direct property assignment for custom elements and supporting Custom Events with a familiar event listener syntax.
This week in React#214📝Article
React 19 and Web Component Examples
React 19 now supports Web Components, allowing for better integration and rendering of custom elements within React applications. React 19 allows passing complex objects to Web Components, a feature that was not possible in React 18 and earlier versions. React's onClick can be directly used on Web Components, but passing functions requires dispatching events with the correct naming convention due to JSX limitations.
This week in React#214📝Article
10 new Git commands you should start using today
10 new Git commands that can improve developer's workflow. These commands include git switch for safer branch changes, git restore for undoing changes, git maintenance for repository optimization, and git sparse-checkout for handling large repositories. The article also covers commands for better understanding merges, ignoring noisy commits, comparing commit ranges, and streamlining the commit history cleanup process.
daily.dev📝Article

2024/12/11

React Router 7 Tutorial
Tutorial for building an address book app using React Router. It covers various features of React Router, including client-side routing, nested routes, data loading, mutations, and server-side rendering. The tutorial guides the user through setting up the app, creating routes, handling data, and implementing features like creating, updating, and deleting contacts. The tutorial also discusses best practices and techniques for building a responsive and user-friendly web application with React Router.
This week in React#213📝Article
Updates from the 105th TC39 meeting
The Intl.DurationFormat feature has reached Stage 4, allowing for locale-sensitive formatting of durations, such as '1 hour, 30 minutes'. The Error.isError method has been introduced to check if a value is an instance of the Error object, enhancing error handling in JavaScript. The ESM Phase Imports proposal aims to improve ECMAScript Module imports, making inter-module dependency declarations more efficient.
This week in React#213📝Article
Building Scalable Micro-Frontends with Next.js Multi Zones
Next.js Multi Zones enables the creation of scalable micro-frontends, allowing multiple teams to work independently on different parts of a web application while maintaining a seamless user experience. To set up Multi Zones, create two Next.js applications, configure their respective next.config.js files for routing, and implement client-side navigation between them. Independent development and deployment of applications lead to faster cycles and reduced merge conflicts, enhancing overall productivity for development teams.
This week in React#213📝Article
Ref Callbacks, React 19 and the Compiler
React 19 introduces the ability for ref callbacks to return a cleanup function, allowing for better resource management when components unmount. Ref callbacks are preferred when direct access to the DOM node is needed, while useEffect is better for side effects that do not require node access. With the upcoming React Compiler, reliance on useCallback may complicate code maintenance, as it becomes unclear which instances can be safely removed without affecting functionality.
This week in React#213📝Article
How React Compiler Performs on Real Code
Initial load performance remains largely unaffected by the Compiler, with tests showing minimal to no negative impact on load times across various pages of a real application. The Compiler significantly improves interaction performance, with total blocking time dropping from 280ms to zero in some cases, although results vary depending on the complexity of the components. The Compiler does not catch all re-renders; some components may still experience unnecessary re-renders due to external dependencies or non-optimized code, necessitating manual memoization in certain scenarios. While the Compiler automates much of the memoization process, developers may still need to understand and implement manual memoization techniques for optimal performance in complex applications.
This week in React#213📹Video
React 19 is now stable!
React v19 was officially released and is now stable as of December 5, 2024. Key features in React 19 include support for async functions in transitions, new hooks like useActionState and useOptimistic, and improved handling of forms with <form> Actions. React 19 introduces Server Components, allowing components to be rendered ahead of time in a separate server environment, improving performance and flexibility. Enhanced error reporting in React 19 reduces duplication and provides clearer insights into errors caught by Error Boundaries. Full support for custom elements has been added, allowing for better integration and property handling in both client and server-side rendering.
This week in React#213📝Article
How did moveBefore() not exist before???
The browser finally has a way to move elements! moveBefore() is a very exciting new API that has a ton of potential use cases.
Other📹Video
Vite 6 is important, here's why
Vite has changed how we build web apps. It's a generational leap from Webpack. But it also was missing a lot of what we needed to build full stack frameworks. Key word "was". Vite 6 and the Environment API change everything.
Other📹Video

2024/12/04

The 70% problem: Hard truths about AI-assisted coding
Developers are categorized into 'Bootstrappers' who rapidly create MVPs using AI tools, and 'Iterators' who enhance daily coding workflows with AI assistance. Non-engineers often achieve 70% of their coding goals quickly with AI, but struggle with the final 30%, leading to a cycle of frustration and diminishing returns. AI tools benefit experienced developers more than beginners, as seniors can effectively guide AI outputs while juniors may accept flawed code without understanding.
Other📝Article
Component testing RSCs
The article introduces Storybook Component Testing for React Server Components (RSCs), which allows developers to write fast, flake-free integration tests that exercise both server and client code in the browser. It demonstrates how to use Storybook to mock complex app states like authentication and database access, and shows an example of testing a user workflow for adding a new note.
This week in React#212📝Article
Better Code Rendering Through Virtualization
The Sentry team rebuilt Codecov's code renderer using virtualization techniques, significantly reducing render blocking time and enabling the handling of large files, such as TypeScript's checker.ts with over 52k lines. Utilized the @tanstack/react-virtual library for virtualization, allowing only visible elements to be rendered, thus optimizing performance and reducing load times. One trick was to display a textarea with transparent color exactly above the virtual list to enable search.
This week in React#212📝Article
Try...Catch As Little As Possible
Minimize the use of 'try...catch' statements; they should only be used for unexpected exceptions or external API errors. Instead of using 'try...catch' as a band-aid, identify and address the root causes of errors to prevent future issues. If 'try...catch' must be used, limit its scope to only the specific code that is expected to throw an error, enhancing code clarity.
This week in React#212📝Article
Next-level frosted glass with 
Utilize the CSS property backdrop-filter: blur() to create a frosted glass effect, enhancing depth and realism in web design. Implement optimizations such as extending the backdrop element and using mask-image to include nearby pixels in the blur effect, resulting in a more realistic appearance.
This week in React#212📝Article
Thoughts on Tailwind 4
Discussion on the new Tailwind CSS v4.0 beta release. Highlights of both positive and negative aspects of the update, the CSS-first configuration, the use of CSS theme variables, and the addition of new variants like not- and in-. The author also raises longstanding concerns about the class naming conventions and the overuse of rem units in Tailwind's default theme.
This week in React#212📝Article
How To Improve INP: React
Interaction-to-Next-Paint (INP) is a crucial metric for user experience and is part of Google's Core Web Vitals, impacting search rankings. Utilizing startTransition() for hydration and Suspense for selective hydration can significantly enhance user feedback and reduce input delays. .
This week in React#212📝Article

2024/11

2024/11/27

Loading Data with TanStack Router: Getting Going
TanStack Router is a client-side application framework that supports advanced routing, nested layouts, and hooks for loading data. The article covers how to use TanStack Router's built-in data loading features, including the loader function and how to invalidate cached data. It also discusses the tradeoffs between TanStack Router's data loading capabilities and integrating with react-query.
This week in React#211📝Article
Feature-based React Architecture
Feature-based architecture in React promotes decoupling features to simplify maintenance and scalability in large applications. The concept of parallel data fetching using Promise.all enables to improve performance, allowing simultaneous requests. .
This week in React#211📝Article
Currency handling in React
Store currency values as integers in cents to avoid floating point issues, and use strings for percentages. Utilize built-in browser functionality for locale-specific currency formatting to ensure clarity across different currencies. Implement formatting on input blur rather than during typing to enhance user experience and avoid input masking issues.
This week in React#211📝Article
Tailwind CSS v4.0 Beta 1
The new engine offers full builds that are up to 5x faster and incremental builds that are over 100x faster, measured in microseconds. Tailwind CSS v4.0 features a CSS-first configuration approach, allowing developers to customize and extend the framework directly in CSS.
daily.dev📝Article
The `use cache` Directive Deep Dive in Next.js
The new use cache directive in Next.js allows developers to control caching for functions, components, and entire routes, enhancing performance significantly. use cache supports versatile caching of any serializable data, offers multiple caching levels (function, component, route), and enables automatic caching for all contents within a file. Developers can control cache duration and behavior using cache tags and cache life settings, with default cache duration set to 15 minutes.
This week in React#211📝Article
The AutoScrollList Component
The article describes the development of an AutoScrollList component in React, which automatically scrolls to the bottom of a list when the content changes, while also respecting user interactions. The final version of the component uses vanilla DOM APIs to control the scroll behavior, providing better performance, simplicity, and cross-device compatibility compared to the earlier versions that relied on React state and hooks.
This week in React#211📝Article
Thoughts on What RSC Means for SPAs
Even without a runtime server, RSC can help SPAs by allowing static rendering of components at build time, thus minimizing the need for large JS bundles and enabling on-demand fetching of RSC payloads. When paired with an API server, RSC can replace traditional JSON responses with RSC payloads, allowing for rendered components to be sent directly and enabling data streaming.
This week in React#211📝Article
Why TanStack Start is Ditching Adapters
TanStack Start is a new full-stack JavaScript framework designed to simplify deployment and hosting by eliminating the need for multiple adapters, focusing instead on a streamlined approach using Vinxi. By utilizing Vinxi, which is powered by Nitro and Vite, TanStack Start allows for easy deployment to platforms like Vercel with minimal configuration, enhancing developer experience.
This week in React#211📝Article
React Router v7
React Router v7 has been officially released, integrating features from Remix and enhancing the React ecosystem's transition from React 18 to 19. Users of React Router v6 can easily upgrade to v7, gaining access to new features like server rendering, bundle optimization, and improved type safety. When starting a new app, developers can choose to use React Router as a library or as a full framework, depending on their needs.
This week in React#211📝Article

2024/11/20

React Anti-Pattern: Stop Passing Setters Down the Components Tree
An abstraction leak occurs when a child component relies too heavily on the internal implementation of a parent component, leading to tight coupling and fragility. Instead of passing setter functions directly, use encapsulated callback functions to improve clarity, reusability, and maintainability of components.
This week in React#210📝Article
Skew Protection is now enabled by default for new projects
Skew Protection prevents version mistaches between server and client code that might occur when a new deployment is made, thus causing error. Only available on Vercel for Pro and Enterprise.
This week in React#210📝Article
What are React 
React Portals allows to render React components outside of the normal component hierarchy, which can be useful for managing UI elements like notifications, modals, and overlays. Portals provide better control over CSS, improved accessibility, simplified event handling, and flexibility in component design.
This week in React#210📝Article
5 differences between React server components and server-side rendering
This is sometimes difficult to explain the differences between RSC and Server-Rendering. This article explains 5 big differences between the two approaches.
This week in React#210📝Article
Essential Typescript for React
Quick TypeScript tips focused on React use cases, such as ComponentProps, difference between ReactElement and ReactNode, etc.
This week in React#210📝Article

2024/11/13

Managing Interactive Demos in MDX
The author is building a system to manage interactive demos in their Astro MDX-based blog. The system includes custom components and hooks to create and control the layout and behavior of the demos.
This week in React#209📝Article
Conditional Props in React Using Type Discrimination
While generics can be used to create conditional props, they often lead to complications in type narrowing. Type discrimination is presented as a more effective solution for ensuring that the correct props are passed based on the account type. Using type discrimination not only enhances type safety for the component author but also ensures that consumers of the component are required to pass the appropriate props, preventing runtime errors.
This week in React#209📝Article
Supporting Offline Mode in TanStack Query
Implementing offline support in TanStack Query can be complex, requiring careful management of cache invalidation and data transformations. Effect Schema allows for bi-directional parsing, simplifying the process of transforming data between API responses and application models without the need for multiple schemas.
This week in React#209📝Article
Dynamically Generating PWA App Icons in the Next.js App Router
Create an API route to dynamically generate the manifest.json of PWAs based on environment variables, allowing for different icons to be served based on the current environment.
This week in React#209📝Article
The magic of keeping one level of abstraction per function
Maintaining a single level of abstraction per function enhances code readability and maintainability, allowing developers to focus on high-level orchestration without getting bogged down by implementation details. Key benefits of this approach include easier isolated changes, reusable code, reduced cognitive load for developers, and a clear separation of concerns, which helps identify when refactoring is necessary.
This week in React#209📝Article
React is a programming language, and its rules are syntax
Explanation of why refs (references to DOM nodes) do not work in React Server Components, as the DOM does not exist on the server. It argues that React's constraints, while sometimes frustrating, are necessary to provide guarantees about UI behavior and composition.
This week in React#209📝Article
Uncontrolled or controlled: A matter of perspective
Discussion on the concepts of uncontrolled and controlled components in React, explaining that the distinction depends on the perspective of the component's usage rather than just its internal implementation.
This week in React#209📝Article

2024/11/06

Integrating Large Language Models into Frontends
Large Language Models (LLMs) can be integrated into user interfaces through APIs, enabling features like chatbots, content generation, and real-time data processing. This articles shows step-by-step how we can integrate a LLM to generate product descriptions based on a prompt and image. It explains how to require the response in a given JSON schema with zod, how to render a partial JSON object in React with MDX, etc.
This week in React#208📝Article
Upgrading React with micro-frontends
To upgrade micro-frontends from React 17 to React 18, the author’s team uses a bridge component, allowing for independent upgrades without affecting the shell application. The bridge component is created using the @module-federation/bridge-react package, which wraps the entry React component, enabling the micro-frontend to operate in a separate React tree.
This week in React#208📝Article
Storybook Test sneak peek
Storybook Test is a new tool from the Storybook team that aims to provide fast, reliable, and integrated UI testing capabilities directly within the Storybook development environment. The tool allows for simultaneous component, visual, and accessibility testing, with the ability to debug failures directly in the browser.
This week in React#208📝Article
Two ways to the two Reacts
The upcoming React 19 release and the introduction of full-stack React architecture represent major shifts in the React ecosystem. The article explores two distinct approaches to this new React architecture - the server-first Next.js App Router and the client-first TanStack Start framework.
This week in React#208📝Article
Managing Advanced Search Param Filtering in the Next.js App Router
Illustration of how to implement advanced search parameter filtering in a Next.js app, focusing on features like instant user feedback, pagination, and sorting. Using the nuqs library simplifies a lot the implementation.
This week in React#208📝Article
What's next for the React Compiler? - Sathya Gunasekaran
React Compiler is now in beta. It won’t be just an auto-memoizer but will serve to build more optimizations. The talk shows experimental features such as JSX Outlining: the compiler can extract subcomponents automatically to then optimize them independently.
This week in React#208📹Video

2024/10

2024/10/30

How to roll your own auth in JavaScript & TypeScript
Step-by-step guide on building a session-based authentication system using TypeScript, allowing to manage user sessions securely. Users' sessions are stored in a database with a unique session token set in cookies, ensuring that only authenticated users can access protected resources. .
This week in React#207📝Article
HTML Form Validation is heavily underused
HTML forms can utilize various validation techniques, including the required attribute, specific input types, and the powerful setCustomValidity method for custom validation logic. The setCustomValidity method's imperative nature leads to cumbersome code, making it less appealing for developers, which contributes to the underutilization of native form validation. Introducing a hypothetical custom-validity attribute could simplify validation in declarative frameworks, allowing for more cohesive and maintainable code.
This week in React#207📝Article
Conditional React hooks pattern
Discussion on a pattern for conditionally enabling React hooks, which is essential for managing component states like open or closed dialogs. Hooks can accept an enabled boolean parameter, allowing them to be activated or deactivated based on the component's state, thus optimizing performance.
This week in React#207📝Article
Live Streaming with React — More Rust in the JavaScript Ecosystem
The Live Compositor is a media server with a rendering engine written in Rust, providing a JavaScript SDK for controlling streams with React components. Rust offers type safety and performance advantages, making it suitable for real-time event processing required for live streaming at 60 fps. The SDK allows developers to create React components that send updates to the Live Compositor server, enabling dynamic stream composition.
This week in React#207📝Article
Next.js 15 + React 19
Guid on using the shadcn/ui library with Next.js 15 and React 19 RC, including instructions on how to resolve peer dependency issues when installing packages.
This week in React#207📝Article
Recap: Next.js Conf 2024
Next.js Conf 2024 highlighted key updates to the Next.js framework, including improvements to data fetching, rendering, and caching, as well as the stabilization of Turbopack for development. They also emphasized the importance of the Next.js community and their contributions to the framework's ongoing evolution.
This week in React#207📝Article

2024/10/23

New TC39 proposal! Does JavaScript require a compiler soon?
The TC39 proposal aims to address the risk of introducing security issues with new JavaScript features and suggests that some features should be left to build tools rather than implemented by browser engines. The proposal could potentially accelerate the handling of proposals and implementation of features, prevent language bloat, and extend TC39's influence into build tools, promoting common ground and easier tool switching.
This week in React#206📝Article
Creating a Keyboard Shortcut Hook in React (Deep Dive)
Great article showing how to create a hook handling simple keypress as well as modifiers and key sequences. Usage of a pattern with useLayoutEffect to create a ref to a useCallback function. .
This week in React#206📝Article
Perfectly Fitting Text to Container in React
The article discusses the challenge of perfectly fitting text to a container in a dashboard, specifically the Big Number widget, which needs to display metrics in a visually appealing and readable way. The author explores four viable approaches to solving the problem, including SVGs, CSS Transforms, Container Queries, JavaScript, and a bonus half approach using canvas. The chosen solution involves using JavaScript to iteratively update the font size of the element until it fits perfectly.
This week in React#206📝Article
How Vercel adopted microfrontends
Vercel adopted vertical micro-frontends to improve build times, developer velocity, and end-user performance, resulting in over a 40% improvement in preview build times and local development compilation. The article discusses the trade-offs between vertical and horizontal MFEs, highlighting the benefits and challenges of each approach.
This week in React#206📝Article
Server Side State management in NextJS: a deep dive into React Cache
Article showing how cache, unstable_cache and patched fetch can help handling “state” on the server, reduce prop-drilling and simplify server code.
This week in React#206📝Article
The Difference Between Clearing, Resetting, and Restoring Mocks
I always have to refer to the docs to remember the difference between those 3. Clear means clearing the calls to the mock, resetting means clearing the calls and removing the mock implementation, restoring means removing the mock and set the function back to its original implementation.
Other📝Article
Next.js 15
Next.js 15 is released, with no changes but fixes since RC2. Caching default disabled, React 19 RC, React Forget, Turbopack dev mode, ESLint 9 and a lot of improvements in terms of DX, security and performance.
This week in React#206📝Article

2024/10/16

Introducing Express v5: A New Era for Node.js Framework
Summary of the breaking changes in the new v5, reasons why it is still not tagged latest and details about the future of Express.
This week in React#205📝Article
How to Use Next-Safe-Action for Your Server Actions
Enhance Next Server Actions with Zod schema validation, middlewares for access control, error management and integration with TanStack Query promises.
This week in React#205📝Article
How to prevent re-render in React with Tailwind CSS
Great use case where adding a data-attribute to the DOM enables to prevent rerendering a component where a state and useEffect are used instead. It applies to Tailwind here but can be relevant for other cases.
This week in React#205📝Article
The Big "Server Waterfall Problem" with RSCs
KCD explains that with RSC we still have network waterfalls but they are less problematic server-side than client-side since we have control over the server.
This week in React#205📝Article
A Future for Web Components Without Shadow DOM
Discussion about the limitations and challenges of using Shadow DOM for web components, highlighting issues with encapsulation and control. With built-in elements, which allow attaching behaviors to existing HTML elements, we solve concerns related to layout, server-side rendering, and HTML outline issues. Frameworks need integration with Web Components, to pass non-string data as attributes for instance.
This week in React#205📝Article
Headless, boneless, skinless & lifeless UI
The author is trying to be more specific about libraries instead of just saying headless by giving examples for each category.
This week in React#205📝Article
The True Nature of useActionState
Great article showing how useActionState is close to useReducer. With interactive examples, the author refactor a TODO app using a persistent async storage, moving an existing reducer to the server woth React 19. He also uses useOptimistic to improve the UX.
This week in React#205📝Article
Next.js 15 RC 2
Big new RC introducing a lot of improvements such as: new codemods for upgrade, Turbopack perf improvements, Async Request API, enhanced Server Actions security, Typescript Next config, ESLint 9 support, build improvements, more control on headers for self-hosting, etc.
This week in React#205📝Article

2024/10/09

Increasing Vite's potential with the Environment API
The Environment API, a major feature introduced in Vite v6, enables support for different runtimes and multiple bundles, enhancing Vite's framework infrastructure tool aspect. It allows running on runtimes other than Node.js, bundling for those runtimes, and constructing environments for older versions of Node.js and other specialized runtimes such as Electron, Tauri, and React Native.
This week in React#204📝Article
Do not use secrets in environment variables and here's how to do it better
The article lists several reasons why storing secrets in environment variables is risky, including poor management, potential leaks, and lack of encryption. The author proposes a 3-fold principle for better secrets management, emphasizing the separation of application configuration from secrets and credentials, and suggests using secrets management services for production-grade applications.
This week in React#204📝Article
Handling Form Validation Errors and Resets with useActionState
Great article showing how to leverage the useActionState hook to validate form fields in a server function and how to handle errors and form resets on uncontrolled inputs on submit.
This week in React#204📝Article
React on the server is not PHP
The full-stack JavaScript frameworks are praised for enabling a unified language and toolset, allowing developers to handle everything from database queries to UI interactions seamlessly, leading to more cohesive products and efficient development. We have taken lessons of the past to keep the best of what can be done in the browser and on the server.
This week in React#204📝Article
Using Mitosis to build a Design System
Mitosis is an open-source tool that transforms JSX components into functional components for multiple frameworks like React, Vue, and Angular. Mitosis comes with challenges including a steep learning curve, strict coding rules, debugging difficulties, and lack of control over output.
This week in React#204📝Article
How Do Server Actions Work in NextJS?
Demystify what is going on under the hood when one calls Server Actions in Next.js, using snippets extracted from Next.js codebase. A reference is given to a function on the server and this one is being called through a POST call.
This week in React#204📝Article
Serverless servers and the challenge of new React architecture
With Serverless Servers, Functions can accept concurrent requests while idle, making it cheaper to use RSCs since the time for awaiting promises won’t be charged.
This week in React#204📝Article

2024/10/02

SSR-friendly Custom React Hook for Local Storage Read and Write
The useSyncExternalStore hook did not update the data value when using the setData function, leading to component rerendering issues. The issue was resolved by adding a custom event listener to trigger the useSyncExternalStore onChange function after storing the value in local storage.
This week in React#203📝Article
Server Functions
Server Functions is the new name of what was previously called Actions. Functions become Actions if used in form, useActionState or startTransition, but can also be used in other contexts. They can theoretically also be used for fetching data and not only with a POST, from React’s docs.
This week in React#203📝Article
Web Components Are Not the Future
Web Components is a standard, what libraries are not. The main concern we have with them is that we try to render Components as Elements but they are different things. This imposes a lot of trade-offs which make the author wonder about their interest for the future of the web.
This week in React#203📝Article
use() and data fetching
Moving the data fetching from client-side effect to a RSC allows streaming the promise and resolving it client-side with use() which has a lot of benefits for performance. .
This week in React#203📝Article
The unspoken rules of React hooks
We implicitly know that some methods from React are stable and do not need to be set as effect dependencies, like setState. But it is not well documented and third-party libs like Jotai can’t easily declare their methods as stable.
This week in React#203📝Article

2024/09

2024/09/25

Component Composition is great btw
Another great article by TkDodo redefining the separation of concerns, no longer by language but more by concept. Instead of having a lot of conditional rendering in the JSX which create a cognitive bias, it is a better approach to split “visual states” of a component into sub-components and render them with early returns instead. We can create a shared layout component and compose it with children. This improves the maintainability a lot.
This week in React#202📝Article
How I Built My Blog
Amazing article by Josh W. Comeau on his experience migrating his awesome Next blog from the Pages Router to the App Router. He is not convinced that it is better in terms of DevX but it might be related to tech choices (CSS modules, a lot of animations resulting in less Server components).
This week in React#202📝Article
How to reset the state of useActionState in React
Resetting the state of a form handled by useActionState is not straightforward, and the author proposes a solution using a wrapper around the server action that either calls the latter or return the initial state if called with a null payload.
This week in React#202📝Article
Efficient Refresh Token Implementation with React Query and Axios
Thanks to axios interceptors, leveraging the global onError callback to refresh the token, set an Authorization token and then retried failed queries/mutations.
This week in React#202📝Article
How to fetch data in React [2024]
Overview of the different data fetching approaches one can use: RSC, React Query, useEffect with states, use() hook and tRPC.
This week in React#202📝Article
How to control a React component with the URL
Interactive article illustrating bad and goods ways to handle search parameters and use it as single source of truth instead of trying to sync it with a state.
This week in React#202📝Article

2024/09/18

Clean React with TypeScript
Summary of common patterns to type React components, state, refs and events. Great reminder of how useful the ComponentProps type can be.
This week in React#201📝Article
Styles Isolation in microfrontends with React (including Material styles)
Style isolation is crucial in microfrontends to prevent conflicts between microfrontend styles, ensuring consistent design and predictable behavior. The Shadow DOM approach provides true encapsulation of styles and DOM, easier maintenance, and native browser support, but may have limitations in styling and complexity.
Other📝Article
SPA Lazy Loading Pitfalls
To avoid the network waterfall with React Router, it’s a best practice to avoid co-locating the loader and the component so that the loader function and the lazy import can be run in parallel.
This week in React#201📝Article
Using callbacks to achieve better component decoupling in React
Short article reminding the benefits of using callbacks to never pass setState down to children and keep the state updates in the component owning it.
This week in React#201📝Article
LLM and RSC: A match made in Heaven
Generative UI MVP implementation using OpenAI SDK. RSC make it easy to use Suspense fallbacks while waiting for the response of the LLM.
This week in React#201📝Article
React 19 Cheat Sheet
Great cheat sheet written by Kent C. Dodds regarding what has been added in React 19.
This week in React#201📚Docs
How Infinite Queries work
Explanation of how Infinite Queries work under the hood of TanStack Query. Details of the fix on a bug that has always been there related to retries.
This week in React#201📝Article
Introducing TanStack Router
Great overview of the client-side router that is behind the TanStack Start framework. Its strength comes from its type safety, especially when parsing path parameters, query strings, etc. .
This week in React#201📝Article

2024/09/11

Biome v1.9 Anniversary Release
Biome v1.9 has been released to celebrate the first anniversary of Biome, bringing new features and bug fixes. Biome v1.9 introduces stable CSS and GraphQL formatters and linters, a new search command using GritQL, support for .editorconfig, and updates to the JavaScript formatter and linter. Next version will be a major one.
Node Weekly#548📝Article
The State of ES5 on the Web
The default configurations of popular bundlers and build tools show that the vast majority no longer transpile to ES5 by default, indicating a shift away from ES5 support. Many popular JavaScript libraries are now publishing ES6+ syntax, challenging the historical need for transpiling to ES5. The article recommends that library authors target Baseline Widely Available features and that website developers process third-party libraries as part of their build to ensure cross-browser support.
This week in React#200📝Article
Version support policy and ESLint v8.x end of life
The support for the v8 ends in October 2024. Team should migrate to v9 with flat config. ESLint partners with HeroDevs to provide support on EOL versions.
This week in React#200📝Article