--- title: "Component composition is great" publication: "React Status" issue: 401 published_at: "2024-09-25" canonical_url: "https://react.statuscode.com/issues/401" --- Plus a tour of Vim for React developers, a React game goes 1.0, and Storybook's testing gets even faster. | #​401 — September 25, 2024 [Read on the Web](https://react.statuscode.com/issues/401) Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://go.clerk.com/15jx7qH) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/gcitkppplxqs0srikg2o.jpg)](https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/) [How Josh W. Comeau Rebuilt His Blog, App Router Style](https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/) — Like many folks, we’re huge fans of Josh’s blog (particularly its [wealth of React articles](https://www.joshwcomeau.com/react/)). He’s just rebuilt the entire site using Next.js, MDX, Sandpack, and an array of other technologies, and goes into fantastic depth about everything involved. A good look behind the scenes of a modern React-driven project. Josh W Comeau [How to Fetch Data in React (2024 Edition)](https://www.robinwieruch.de/react-fetching-data/) — An updated look at the multitude of ways to fetch data from a remote API in React. Note that Redux-based approaches aren’t covered, this is all about general, broad approaches. Robin Wieruch [![\](https://copm.s3.amazonaws.com/d4d8e4a7.png)](https://go.clerk.com/15jx7qH) [Amplify the Benefits of JWTs and Session Tokens](https://go.clerk.com/15jx7qH) — Learn how leveraging the benefits of both session token authentication and JWTs results in the best of both approaches. Clerk sponsor [Component Composition is Great, BTW](https://tkdodo.eu/blog/component-composition-is-great-btw) — A well-regarded author writes about using component composition to avoid conditional rendering for mutually exclusive states (and explains why we should all be doing the same). Dominik Dorfmeister (AKA TkDodo) **IN BRIEF:** - [Storybook 8.3 has been released.](https://storybook.js.org/blog/storybook-8-3/) The popular frontend component workshop has partnered with the Vite-native [Vitest](https://vitest.dev/) testing framework to rapidly speed up its component testing features. - 🕹️ Christoph Nakazawa has been working on a React-based game called [Athena Crisis](https://athenacrisis.com/) (for which [he open sourced the code](https://cpojer.net/posts/athena-crisis-open-source) earlier this year) and it's just reached version 1.0. - 📊 A major survey in the _Ruby on Rails_ world shows that [React has slipped from first place in JavaScript frameworks,](https://railsdeveloper.com/survey/2024/#what-javascript-libraries-are-you-using-alongside-rails) to be replaced by 37signals' [Stimulus.js.](https://stimulus.hotwired.dev/) [Vim for React Developers](https://vimforreactdevs.com/) — While VS Code is the ‘go to’ editor for most these days, Vim, and its various spinoffs, has a lot to offer those prepared to learn its many commands. Lee has put together [a simple ‘course’](https://github.com/leerob/vim-for-react-devs/blob/main/public/course.tsx) (which runs directly in Vim) to teach you what Vim’s commands can bring to editing React code. Lee Robinson [Testing a React App in Chrome with Heroku CI](https://blog.heroku.com/testing-react-app-chrome-heroku-ci) — An introduction to doing end-to-end testing of a React app as part of a CI pipeline (Heroku’s, in this case). Julián Duque (Heroku) 📄 [Instrumenting a React App Using OpenTelemetry](https://thenewstack.io/instrumenting-a-react-app-using-opentelemetry/) Joaquín Díaz (The New Stack) 📄 [The Unspoken Rules of React Hooks](https://macwright.com/2024/09/19/the-extra-rules-of-hooks) Tom MacWright 📄 [Working with QR Codes in Remix](https://andrelandgraf.dev/blog/2024-09-22_working-with-qr-codes-in-remix) Andre Landgraf 📰 Classifieds ⚙️ [Create entire web apps with Reactile](https://www.reactile.net/?utm_source=reactstatus) and let it handle your widgets and windows within a single browser tab. 1-month free trial. [Try it now](https://www.reactile.net/?utm_source=reactstatus). --- 🛠️ [NewDevTools](https://newdevtools.com/) is a simple, daily update of new developer tools and services. 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ounliu1mlu8mtpfwdjv3.jpg)](https://react-chrono.prabhumurthy.com/) [React Chrono: Dynamic, Interactive Timeline Component](https://react-chrono.prabhumurthy.com/) — Supports horizontal, vertical, and vertical alternating timelines, complete with keyboard accessibility, support for nested timelines, auto-playing timelines slideshow-style, and more. Prabhu Murthy et al. [React Snap Carousel: DOM-First, Headless Carousel](https://github.com/richardscarrott/react-snap-carousel) — Uses native browser scrolling and CSS scroll snap points for performance. Try out some of its features [in its Storybook](https://richardscarrott.github.io/react-snap-carousel/?path=/story/carousel--default). The latest version adds support for [infinite carousels.](https://richardscarrott.github.io/react-snap-carousel/?path=/story/infinite-carousel--variable-width) Richard Scarrott [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jpfnh6txkk9qalgwfnlc.jpg)](https://github.com/dvtng/react-loading-skeleton) [React Loading Skeleton: Skeleton Screens that Adapt to Your App](https://github.com/dvtng/react-loading-skeleton) — Use the ‘skeleton’ component directly in your components in place of content that is still loading and it’ll adapt to the right size while the real data is on the way. David Tang [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/xi4dbfd4pksfqwv1elh5.jpg)](https://mielo-ui.github.io/) [Mielo React: Components and Wrappers around Mielo.css](https://mielo-ui.github.io/) — Inspired by GNOME’s Gtk4 look and [LibAdwaita](https://gitlab.gnome.org/GNOME/libadwaita), this set of components and CSS variable driven styling is aimed at Electron/Tauri use cases when creating apps to look good on Linux. [GitHub repo.](https://github.com/mielo-ui/mielo-react) Anton Shramko - 🖐️ [React Native Gesture Handler 2.20](https://github.com/software-mansion/react-native-gesture-handler) – Exposes platform native touch APIs. Now with React Native 0.76 support. - 🗓️ [Schedule-X 2.1](https://github.com/schedule-x/schedule-x) – Material Design event calendar and date picker. - [Framer Motion 11.6](https://github.com/framer/motion) – Powerful animation and motion library for React. - [Jotai 2.10](https://github.com/pmndrs/jotai/releases/tag/v2.10.0) – Simple, flexible state management for React. - [json-viewer v4.0](https://viewer.textea.io/) – Display JSON in a user-friendly format. - [MUI X 7.18](https://github.com/mui/mui-x/releases/tag/v7.18.0) – Popular React component suite. - [Vaul 0.9.6](https://github.com/emilkowalski/vaul) – Unstyled drawer component. ([Demo](https://vaul.emilkowal.ski/).) - [Redwood 8.3](https://github.com/redwoodjs/redwood/releases/tag/v8.3.0) – Popular app framework. - [esbuild 0.24](https://github.com/evanw/esbuild/releases/tag/v0.24.0) Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom