#503 – April 27, 2025
components that span both the server and client
Impossible components
15 minutes by Dan Abramov
Dan explains how to create components that span both the server and client sides using React Server Components. These "impossible components" encapsulate both data loading logic that runs on the server and interactive state logic that runs in the browser. Dan provides examples like a greeting component that combines server-side file reading with client-side state management, and a sortable, filterable blog post list where each preview can expand interactively.
KendoReact Free is Here, Npm-install available!
sponsored by Progress Telerik
50+ robust KendoReact components, including React Data Grid, DatePicker and DropDownList. No sign-ups, trials, or licenses required - you can use KendoReact Free in production, to experiment, or to quickly see what it's all about!
Simplify TanStack React Query state handling with pattern matching
7 minutes by Gabriel Pichot
Gabriel discusses how pattern matching can simplify handling different states in TanStack React Query. Instead of using nested conditional statements for loading, error, success, and empty states he proposes a `matchQueryStatus` utility function. This function transforms verbose conditional rendering into a clean, declarative pattern where each state maps to specific UI components. The approach follows an "hourglass pattern" by narrowing complex query results into simple states before expanding back to UI components, providing improved readability, maintainability, and type safety.
React Compiler Release Candidate
5 minutes by Lauren Tan, Mofei Zhang
The React team has released RC of the compiler, a near-final version that optimizes React apps through automatic memoization, which is now safe for production use. Key updates include merging eslint-plugin-react-compiler into eslint-plugin-react-hooks, adding support for swc and working with oxc for Babel-free builds, and expanding compiler optimizations to support optional chains and array indices as dependencies.
Full-Stack React Chat with AI SDK
2 minutes by Robin Wieruch
In this post Robin summarizes how the AI SDK simplifies building streaming chat interfaces compared to using the raw OpenAI API. He explains that the SDK provides abstraction layers that eliminate boilerplate code, with the server-side component handling streaming responses automatically and the React integration offering a useChat hook that manages message state and UI updates. The result is dramatically reduced code that maintains full functionality while improving maintainability and readability.
Memoizing components in React: a case for useMemo
8 minutes by Gabriel Pichot
React.memo is often used to optimize component rendering, but useMemo offers more control and transparency. In this article Gabriel explains why useMemo could be a solution too to memoize components in React applications until the React Compiler take care of it for us.
And the most popular article from the last issue was: