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.
Another article to discover the new useFormStatus hook in React 19, and how to use it to improve your UX with transitions.
A great theoretical article about transpilers, compilers, optimizers. What they are how they work, and mostly how React Compiler works.
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 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.
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.
Great tutorial to learn the new form hooks from React 19. useActionState, useFormStatus, but also useTransition to manage your form with actions.
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.
Presentation and demonstration of React Aria focused on 5 points : accessibility, user experience, styling, internationalisation and customisation.
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.
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.
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 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.
Learn how to use server actions with tRPC.
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.
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.
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.
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.
Small article based on a single exemple to show how to use the prefetching functionality in tanstack query to improve performances.
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.
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.
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.
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.
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.
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.
Jotai is a primitive and flexible state management solution for React. Learn how to use it in this tutorial.
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.
Have you always wanted to understand how state management libraries work? Here's a tutorial on useSyncExternalStore, the hook that allows external stores.
Why and how to use your URLs as state managers.
Explanation of optimistic updates and the new useOptimistic hook in Next.js to update our data as soon as a form is submitted.
When and how to use (or not) the React useEffect hook. Inspired by the React guide "You might not need an effect".
Because we haven't talked about tests yet today, here's a tutorial on setting up and using Vitest to test custom hooks.
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.
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.
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.
Description of layouts and comparison of their usage under react-router, Next.js & Astro.
(re)Discover how to manage your forms without client-side JavaScript. The 90s are back!
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..
His predictions for the React ecosystem this year. Guest stars: Astro, Biome, Trpc & Tanstack router. It could be summarized in one word: Typescript
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
Meta has announced the upcoming version of React with numerous features: On the agenda: React compiler, Server components, Actions, Asset loading, Document metadata
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.
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.