#​368 — January 3, 2024

Read on the Web

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
React Status

React Aria 1.0: 40+ Accessible Components, Your Way — Anyone who follows Devon Govett (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.

Adobe

Advance Your React/Next.js Skills: Take the Learning Path — 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 — 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 and is part of their commercial Tailwind UI offering for now.

Adam Wathan

React Server Components: The Good, The Bad, and The Ugly“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, powered with the latest React goodness, Next.js, server components, and even the aforementioned Catalyst.

  • Popular component suite shadcn/ui got a big December update including a few new components, such as a carousel, drawer, and paginator.

  • The Mantine suite has had a big update too, in the shape of version 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, 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 by trying some of the features set to land by default in 8.0.

RELEASES:

More Than You Need to Know About ReactDOM.flushSync — An in-depth look at what ReactDOM.flushSync does and what it’s good for.

Jules Blom

Next.js 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
Akshay Kaushik

🏆 Top React Tools and Libraries of 2023

In the previous issue, 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 — 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' by Prabashwara Seneviratne was another, more basic, roundup that did well this year.

StyleX: Meta's Web Styling System — Launched just last month, Meta's “CSS-in-JS” library clearly caught people's imaginations. Jack Herrington has ▶️ a handy 13 minute screencast looking at how it works in practice.

Goel and Gallagher (Meta)

Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS — Segun Adebayo of Chakra UI 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 will change the way you think about pair programming. Try it with your team free for 14 days, no card required.


🗓️ An Intro to Debugging Next.js with Sentry — 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 — 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 — 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 — We featured this in the last issue, so we won't dwell on it again yet, but here's a full introduction. We expect to see more projects like this in 2024.

Vercel Labs

The Epic Stack: An Entire Opinionated Stack in One — 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 but the ideas behind his Remix, Prisma, Tailwind, Fly, and SQLite powered stack (GitHub repo) all got baked into his new EpicWeb course.

Kent C. Dodds

 React Chrono 2: A Flexible Timeline Component — 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 — 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, treemaps, and correlograms – there’s a lot to enjoy.

Yan Holtz

We hope you had a great holiday season. We're back to usual service next week 👋