--- title: "What powers a modern React-based blog in 2024" publication: "React Status" issue: 368 published_at: "2024-01-03" canonical_url: "https://react.statuscode.com/issues/368" --- Plus the top code and tools items of 2023. | #​368 — January 3, 2024 [Read on the Web](https://react.statuscode.com/issues/368) We're back, and ready for 2024. Things are _slightly_ different this week as we conclude our 2023 roundup with a look back at the most popular code and tools related items from last year, but we have a few new bits and pieces up top too :-) __ _Peter Cooper and the Cooperpress team_ Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/learn/react/?utm_source=email&utm_medium=reactstatus&utm_content=reactlearningpath) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/f7cthir5qwyng8htb3z3.jpg)](https://react-spectrum.adobe.com/react-aria/index.html) [React Aria 1.0: 40+ Accessible Components, Your Way](https://react-spectrum.adobe.com/react-aria/index.html) — Anyone who follows [Devon Govett](https://twitter.com/devongovett) (also of _Parcel_ fame) on social media will know just how hard he's worked on this suite of components at Adobe, and finally v1.0 is here. If you’re building your own UI components and you want to get accessibility right, this could be a life saver. Devon [explains a little more here.](https://twitter.com/devongovett/status/1737516074663362843) Adobe [![\](https://copm.s3.amazonaws.com/aadd7852.png)](https://frontendmasters.com/learn/react/?utm_source=email&utm_medium=reactstatus&utm_content=reactlearningpath) [Advance Your React/Next.js Skills: Take the Learning Path](https://frontendmasters.com/learn/react/?utm_source=email&utm_medium=reactstatus&utm_content=reactlearningpath) — Join Brian Holt, Steve Kinney, Lydia Hallie, Scott Moss and others in this collection of React video courses. You'll gain experience building, testing, and maintaining high-performance client and server-side React apps. Frontend Masters sponsor [Catalyst: A Preview of a New, Modern UI Kit for React](https://tailwindcss.com/blog/introducing-catalyst) — Not content with placing us all under their class-based styling spell, the Tailwind CSS folks have unveiled a new component-based ‘batteries-included’ app UI kit for React. It builds upon earlier work done with [Headless UI](https://headlessui.com/) and is **part of their commercial _Tailwind UI_ offering for now.** Adam Wathan [React Server Components: The Good, The Bad, and The Ugly](https://www.mayank.co/blog/react-server-components/) — _“I’d argue that adding server capabilities to React is much less important than fixing its many existing issues.”_ Mayank **IN BRIEF:** - ⭐️ Chris Nicholas shows off [his new blog for 2024](https://chrisnicholas.dev/blog/a-new-blog-for-2024), powered with the latest React goodness, Next.js, server components, and even the aforementioned Catalyst. - Popular component suite [shadcn/ui](https://ui.shadcn.com/) got [a big December update](https://ui.shadcn.com/docs/changelog#december-2023---new-components-cli-and-more) including a few new components, such as a carousel, drawer, and paginator. - The [Mantine](https://mantine.dev/) suite has had a big update too, in the shape of [version 7.4.0.](https://github.com/mantinedev/mantine/releases/tag/7.4.0) It includes a new set of _chart_ components, covering area charts, line charts, sparklines, and bar charts. OKLCH color support has also been added. - The _Storybook_ folks have [written about the future of Storybook in 2024](https://storybook.js.org/blog/future-of-storybook-2024/), touching not just on the future but the big Storybook news from 2023 too. Storybook 8.0 is teased for 'early 2024' and promises server components support. - In other Storybook news, you can [make Storybook 7.6 2-4x faster already](https://storybook.js.org/blog/optimize-storybook-7-6/) by trying some of the features set to land by default in 8.0. **RELEASES:** - [Sonner 1.3](https://sonner.emilkowal.ski/) – Toast notifications component. - [markdown-to-jsx 7.4](https://github.com/quantizor/markdown-to-jsx) – Lightweight Markdown component. - [React DayPicker 8.10](https://github.com/gpbl/react-day-picker) – Customizable date picker. - [react-timezone-select 3.1](https://github.com/ndom91/react-timezone-select) - [react-native-maps 1.9](https://github.com/react-native-maps/react-native-maps) [More Than You Need to Know About `ReactDOM.flushSync`](https://julesblom.com/writing/flushsync) — An in-depth look at what `ReactDOM.flushSync` does and what it’s good for. Jules Blom [Next.js 14 Intercepting Routes](https://www.builder.io/blog/nextjs-14-intercepting-routes) — Use intercepting routes to display parts of your app on any page, without changing context for your users. Vishwas Gopinath [Common Mistakes When Using the `useState` Hook](https://blog.akshaykaushik.eu.org/common-mistakes-when-using-react-usestate-hook) Akshay Kaushik 🏆 Top React Tools and Libraries of 2023 In the [previous issue](https://react.statuscode.com/issues/367), we did a round-up of the top React _articles_ of 2023, now we finish off with a tool and code-specific look back at the year that was! 🛠 [React Libraries for 2023](https://www.robinwieruch.de/react-libraries/) — It's no surprise that this roundup post took the top spot, given how popular the 2022 version was. This list remains a sound resource when selecting libraries for a new project and is the latest annual update of a popular list Robin maintains (our fingers are crossed for a 2024 edition!) Robin Wieruch 💡 ['A Summary of Libraries Commonly Used with React'](https://www.frontendundefined.com/posts/summaries/common-react-libraries/) by Prabashwara Seneviratne was another, more basic, roundup that did well this year. [StyleX: Meta's Web Styling System](https://stylexjs.com/blog/introducing-stylex/) — Launched just last month, Meta's “CSS-in-JS” library clearly caught people's imaginations. Jack Herrington has [▶️ a handy 13 minute screencast](https://www.youtube.com/watch?v=6ZDiGtg1jN4) looking at how it works in practice. Goel and Gallagher (Meta) [Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS](https://panda-css.com/) — Segun Adebayo of [Chakra UI](https://chakra-ui.com/) fame unveiled a new DX-focused CSS-in-JS approach in 2023, boasting build-time generated styles and type safety out of the box. It works with Remix, Vite, Next.js, Astro, and even server components. Segun Adebayo 📰 Classifieds 🍐 [Tuple](https://tuple.app?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=Q1_2024&utm_content=React+Status_Classified+Listing) will change the way you think about pair programming. [Try it with your team free for 14 days](https://tuple.app?utm_source=cooperpress&utm_medium=newsletter&utm_campaign=Q1_2024&utm_content=React+Status_Classified+Listing), no card required. --- 🗓️ [An Intro to Debugging Next.js with Sentry](https://sentry.io/resources/debugging-next-js/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-nextjsworkshop&utm_content=newsletter-nextjsworkshop-register) — Join our workshop to learn: Sentry basics, how to identify Next.js issues, and if an error occurred on the client or server side. [React Wrap Balancer: A Component for Better Title Displays](https://react-wrap-balancer.vercel.app/) — A simple component that improves the rendering of _titles_ in your app by avoiding single overhanging words. Shu Ding [Million: A Perf-Focused VDOM Replacement for React](https://million.dev/) — Don't feel bad if you don't initially understand this project – it's a complicated idea, packaged up well. Million started life as a small, library-agnostic virtual DOM implementation, but pushed hard in 2023 into being a performance enhancement for React components: _“Imagine React components running at the speed of raw JavaScript.”_ Aiden Bai 🤖 [v0: Vercel's AI-Powered Component Creator](https://v0.dev/) — We featured this in the last issue, so we won't dwell on it again yet, but [here's a full introduction.](https://vercel.com/blog/announcing-v0-generative-ui) We expect to see more projects like this in 2024. Vercel Labs [The Epic Stack: An Entire Opinionated Stack in One](https://www.epicweb.dev/epic-stack) — An opinionated ‘project starter’ and stack to help leapfrog analysis paralysis when figuring out what tools and libraries to use in your next, fresh project. Kent [left Remix in late 2023](https://kentcdodds.com/blog/a-review-of-my-time-at-remix) but the ideas behind his Remix, Prisma, Tailwind, Fly, and SQLite powered stack ([GitHub repo](https://github.com/epicweb-dev/epic-stack)) all got baked into his new [EpicWeb course.](https://www.epicweb.dev/) Kent C. Dodds ⏱ [React Chrono 2: A Flexible Timeline Component](https://github.com/prabhuignoto/react-chrono) — 2023 saw a complete overhaul of this popular library. You can render themeable timelines in vertical, horizontal, or vertical alternating orientations. It includes keyboard navigation support, auto advancement, and, with v2, support for nested timelines. Prabhu Murthy 📊 [The React Graph Gallery](https://www.react-graph-gallery.com/) — This may have been my personal favorite _React Status_ link of 2023. It's a site packed with demonstrations of an array of different chart types rendered with React and D3.js, complete with explanations and code you can take away to reproduce them. Examples include [Sankey diagrams](https://www.react-graph-gallery.com/sankey-diagram), [treemaps](https://www.react-graph-gallery.com/treemap), and [correlograms](https://www.react-graph-gallery.com/correlogram) – there’s a lot to enjoy. Yan Holtz We hope you had a great holiday season. We're back to usual service next week 👋 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