#​367 — December 20, 2023

Read on the Web

🎄 Before we take a week off for Christmas, we usually do a 'best of 2023' issue to revisit the most popular items of the year. This year, we're doing things a little differently and splitting up the roundup between this issue and next :-) We'll be back on January 3 and wish you a happy holiday season!
__
Peter Cooper and the Cooperpress team

Together with  Frontend Masters logo
React Status

v0: The AI-Powered Component Creator Opens Up — I thought the generative AI powered v0 looked fascinating on its release, but like many of you, I was stuck in a waitlist to use it. Now Vercel has dropped the waitlist, making it available to all users. It works well, though we might not be using it for the React Status signup form just yet.. 😆 (see above)

Vercel Labs

New TypeScript Courses: Take the Learning Path — Join Mike North (Tech Lead at Stripe) for this series of brand new TypeScript courses. You'll get hands-on practice covering both the fundamentals and advanced features like utility types and advanced generics. Learn best practices to configure and evolve your TS codebase!

Frontend Masters sponsor

TS Docs: Reference Type Documentation for npm Packages — Browse reference TypeScript documentation for any package or version of a library. For example, take a package like Redux or Three.js, then you can use the menus on the left to navigate the various type aliases, functions, classes, and more.

Shubham Kanodia

Tearable Dots: A State Tearing Demo — An interesting live demo of ‘state tearing’ (explained more here), a problem that can be solved in a few ways in React, with several such strategies on display here.

Colin Campbell

IN BRIEF:

Puck: A Self-Hosted Drag-and-Drop Editor for React — Sitting somewhere between an old-school WYSIWYG-powered CMS and a headless one, Puck enables content teams to author content using real React components. Want to see a demo? Of course.

Measured

You Don't Need Storybook to Make a Component Playground“By combining React Live and some string concatenation, you can create a solution that you have full control over.”

Marcus Haaland

React Fights You Can Have with Your Team — See if you and your fellow developers are on the same page when it comes to a few React related opinions – that's the Christmas spirit!

Caroline Odden

Blog Post: Fetch Waterfall in React — How not to make the biggest data fetching mistake that every beginner makes in React. Read our best practices.

Sentry sponsor

React Native Push Notifications with Firebase Cloud Messaging
Diego Oliveira and Frida Casas

RELEASES:

🏆 Top React Articles of 2023

1: React Libraries for 2023 — The React ecosystem is so large that there's often a problem of being spoiled for choice, so opinionated guides to different solutions tend to do well, like this annual list from Robin Wieruch. Fingers crossed we get a 2024 edition soon? 😉

Robin Wieruch

2: Rethinking React Best Practices — From a late 2023 perspective, it's clear 'React' has evolved from being a library to representing a broader ecosystem of ideas and frameworks, so best practices have changed too. The shift towards a hybrid client-server approach is explored here, along with how Relay and Server Components can address scaling challenges.

Rem (Frontend Mastery)

3: Using TypeScript with React — People were starting to comment that the official React docs didn't provide any information on using React with TypeScript, so earlier this year Mark Erikson filed an issue, and, thanks to Orta Therox, these docs appeared.

React.js Docs

📰 Classifieds

💪 Feel the power of more than 420,000 teammates and work #LikeABosch. It’s our people who make us remarkable. Let’s celebrate together. Learn more.


💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

4: Things You Forgot (or Never Knew) Because of React — Easily one of the 'classics' of the year and it provoked such a huge array of responses, too.

Josh Collinsworth

5: What is Vite and Why Use It Over Create React App?Create React App was long considered 'the' way to create new React apps, but Vite has continued to swell in popularity in 2023 due to its ease of use and performance. This helpful post only sped up that process.

Luke Twomey

6: How React 18 Improves Application Performance — If you’ve not kept up with how things have developed in React with regards to concurrent rendering, transitions, Suspense, or React Server Components, this remains a good primer to get up to speed on how they can improve performance, though it may well begin to age soon.

Lydia Hallie (Vercel)

7: Dan Abramov's Deep Dive into React Server Components — Having faced a barrage of questions about Server Components in early 2023, Dan set out to teach everything from the ground up by reimplementing a basic form of RSC from scratch. It’s not aimed at day-to-day React developers, but those who want to get under the hood of the model behind RSCs.

Dan Abramov

8: The Interactive Guide to Rendering in React — This interactive guide explores why, when, and how React renders, and illustrates it with a series of short and well thought out video animations that remain just as relevant today.

Tyler McGinnis

We'll see you again in two weeks on January 3! 👋