A quick overview of the new TanStack Start, a meta framework based on React, with server actions, suspense, router, and more. Currently in alpha, but i already feel this will be my next preferred toolkit for 2025.
How to make beautiful animated sidebars using Framer Motion.
Great interview of Tanner Linsley about Tanstack start, its new framework and its previsions for it. Followed by a presentation from Tanner himself about the Tanstack Start. I can't wait for it to get released in 1.0..
Atomic is not only for design system but also for data management. Discover how to use Jotai, an atomic state management.
Great article about how separation of concerns works in React.
Learn how to use url to manage states and components by making it the single source of truth.
Modern frameworks advices to use formData to manage your forms. What is it and how to use it with zod for typesafe forms ? Description in this article.
Shadcn CLI can now provide not only atomic components but also organisms with their new block system. You can easily import a fully designed and functional component. Moreover, it is compatible with Vercel's v0. I still don’t quite know how to process this, my mind is torn between fascination and rejection..
Great article about how to use infinite queries with tanstack query.
Interesting interview about the pragmatic drag and drop lib created by Alex Reardon from Atlassian
Discover what are pure functions, why and how to keep your code pure. Save yourself headaches, just do it.
Always interesting to have qualitative feedbacks.. Is tanstack router as good as everyone says ?
I've always loved swipe actions, but it's really not the easiest to build. Learn how to use framer motion to build your own swipe behaviors.
Great explanation on the new react 19 pattern "render on fetch" vs the actual "fetch on render".
Because the abstractions used by a backend are not always (often?) the best ones for frontend, it can be a good practice to map the DTOs to frontend oriented data.
Google released Gemini natively in chrome browser. This new API is already compatible with React, and with few lines of code, we can already build an assistant using local chrome browser. Check how to do that in this quick demo.
Want to create a framework from scratch to learn how server component work ? If you have the time, this tutorial is exactly what you need.
Presentation and demonstration of React Aria focused on 5 points : accessibility, user experience, styling, internationalisation and customisation.
I hope you are not expecting react 19 to be released pretty soon. Although it is in release candidate state, some malfunctions are still discovered when tested by library developers. Here is a resume of how a small update about suspenses triggers data being fetched in waterfall instead of being parallelized.
Great tutorial to learn the new form hooks from React 19. useActionState, useFormStatus, but also useTransition to manage your form with actions.
How to store datas in astro ? By using React Query and Nanostores ! Little demo on how to implement this tools in Astro and and improve your islands.
A great demo about why and how to make server components in javascript. In a 30 min live coding during the React conf, Dan Abramov just explains the needs behind server components. No react, no framework, just pure javascript. A great react from Theo is also available to helps us understand what going on.
Every time i see a post about rsc and sql requests inside a component, i always looks at the comments, to always see a lots of people choked by this new RSC pattern. Very often, people don't know that even inside a react component, this code only runs on server. Theo explains very precisely how it works, why it is secure, but also why it is only a pattern for prototyping and other patterns are preferable for production.
A great theoretical article about transpilers, compilers, optimizers. What they are how they work, and mostly how React Compiler works.
Another article to discover the new useFormStatus hook in React 19, and how to use it to improve your UX with transitions.
Learn how optimistic updates will work in React 19. With a very simple todo app, Jack Herrington live code different ways to implement optimistic updates with the new hook useOptimistic, transitions, tanstack query or even zustand.
Great introduction on how to install and use Playwright to your E2E tests. Artem explain all the setup, the use of Mock Service Workers to mock api calls, but also guide you through the building of your different tests.
As soon as it got available in HTML, React just implemented this new API into the react-dom package. No need anymore to install 3rd party library to manager popover in our applications.
Small article based on a single exemple to show how to use the prefetching functionality in tanstack query to improve performances.
Benefits from Argos experience in their quest to find to best behavior library for them. They moved away from Radix to React-aria in search of better UX and standard compliances and explain in this article theirs reasons and challenges.
Remix is one of the major react meta framework and is based and focused on react-router. Because the last few years they worked so much in improving react-router (by themselves or in concert with the react team), most of their features got implemented directly and react-router. So much that it makes sense for them to just merge with react router so all the react community could profit from their work. Thanks to the remix team for all their implication, they definitely improved the way we are using react now.
A deep dive into RSC in this article, to understand the needs below merging CSR and SSR, and how to mix both paradigms to build better applications.
Learn how to use tanstack query with your RSC components and how the tool is still pertinent after switching from a CSR to a SSR paradigm.
Learn how to use server actions with tRPC.
A very detailed tutorial to implement the payment system Stripe into your react application. From initialization to configuration and implementation both in your stripe account, your server and your client.
Another great article from Dominik, the main developer of the tanstack query, about how to manage our cache, and mostly, how and when to invalidate query to refresh datas.
A good explanation of the hook useDeferredValue and how to use it in a concrete exemple. This hook defer a value, allowing to manage priorities in the rendering of a component.
This article not just only cover the use of suspense with tanstack query, but mostly how to use suspense efficiently and not displaying data loader for every data refresh. A must read to improve the UX of your data management in react.
Jotai is a primitive and flexible state management solution for React. Learn how to use it in this tutorial.
3 hours of tutorial on what is probably one of the best JS stack in 2024, and for once, including the production and hosting part on Vercel.
A first beta for the next react version, but aimed at library developers for them to study and adopt the new features. It includes RSC, servers actions, new refs, context, document metadata, async scripts, prefetching, better error reporting.. The list of new features and upgrades is is pretty impressive.
Seems like every month we have a HTMX comparison, it shows how much the framework brings in the JS ecosystem. As always with Theo, this video is a well of knowledge about how to place HTMX in the ecosystem and when to use it.
How to manage our stores in a react app ? globally or locally ? what is better for DX and performances ? Dominik shares his views on mixing zustand and contexts to reference store globally but store values locally to avoid unnecessary rerenders.
(re)Discover how to manage your forms without client-side JavaScript. The 90s are back!
Description of layouts and comparison of their usage under react-router, Next.js & Astro.
Criticism of some choices made by Next.js that degrade the development experience on the framework. Apart from the examples mentioned, it is important to note that Next.js is based on still experimental principles.
Why have we reached React Server Components (RSC) in React 19? It starts with a reminder of the concepts of SSG / SSR / CSR / SPA to explain the need for RSC.
Why install tanstack query, tanstack router, tanstack form, tanstack table, tanstack graph.. when you can directly install the tanstack framework? Just released and it is already the framework to follow in 2024.
Because we haven't talked about tests yet today, here's a tutorial on setting up and using Vitest to test custom hooks.
When and how to use (or not) the React useEffect hook. Inspired by the React guide "You might not need an effect".
Explanation of optimistic updates and the new useOptimistic hook in Next.js to update our data as soon as a form is submitted.
Why and how to use your URLs as state managers.
Have you always wanted to understand how state management libraries work? Here's a tutorial on useSyncExternalStore, the hook that allows external stores.
Conform is a new form management library with Progressive enhancement first APIs, Type-safe field inference, Fine-grained subscription, Built-in accessibility helpers, and Automatic type coercion with Zod. It is compatible with Next / Remix as it supports server Actions. According to early feedback, this library is still experimental but seems quite promising.
Which tool to choose between React and HTMX, and especially in which cases? History of front-end technologies, presentation of the 2 tools, comparison (with code please), and suggestion according to use cases.
Meta has announced the upcoming version of React with numerous features: On the agenda: React compiler, Server components, Actions, Asset loading, Document metadata
Currently in development, Meta has announced React Strict DOM whose goal is to standardize browser APIs for use in both web and mobile. This would allow having the same codebase for all platforms
His predictions for the React ecosystem this year. Guest stars: Astro, Biome, Trpc & Tanstack router. It could be summarized in one word: Typescript
Quite detailed presentation of Tanstackquery router (released in v1 in December 2023). Explanations and examples about suspense, type safety, lazy loading, file-based structure, search params, state management, preloading cache data..