~reactstatus | Bookmarks (143)

Use useId() Instead of Hand-Making IDs — Why to use useId instead of hand-made IDs to link two DOM nodes for accessibility.

DRY – A Common Source of Bad Abstractions — The pursuit of avoiding repetition at all costs can sometimes result in crude, hard to maintain code. Think about the actual concerns involved and you might find a better way to break things down.

🗺️  GeoStyler 15.0: UI Components for Map Styling — Build flexible user interfaces for map styling in the browser.

How to Choose the Best Rendering Strategy for Your App — Get a feel for the differences between Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and Partial Prerendering (PPR).

📅  React DayPicker: A Component to Create Date Picker Controls — There are a lot of date selection components out there, but not many are ten years old with 6000 GitHub stars. DayPicker focuses on providing the basics for you to then style and customize as you wish - it complies with modern accessibility requirements too. GitHub repo.

React Native Filament: A 3D Rendering Engine for React Native — It’s fast, native 3D rendering with a React touch. Rendering takes place on a separate thread for efficiency, and on iOS, Filament uses the efficient native Metal API. GitHub repo and some pretty good docs, too.

The Results of State of React 2023 — The State of React 2023 survey ran last December but the results from over 13,000 respondents have finally landed. It’s packed with interesting tidbits, but we learn:

Build a Waitlist with Clerk User Metadata — Discover how to implement a waitlist in your app using Clerk's user metadata, including setting up an admin dashboard for efficient user access management. This guide simplifies controlling user entry and enhances your app's onboarding workflow.

How Airbnb Smoothly Upgrades React — Airbnb has recently completed an upgrade of all its Web-facing sites from React 16 to React 18. Few of us get to work on such large systems, but Airbnb’s strategies and processes could provide some inspiration for your own upgrades.

React CodeMirror: A CodeMirror Editor Component — CodeMirror is a popular JavaScript code editor component – this makes it easier to use from React apps. The homepage has a complete and customizable demo showing off the potential. GitHub repo.

What React Devs Need to Know About React Native — While React and React Native share many similarities, they’re pretty different under the hood. Here’s some of what you need to know to either make the transition, or at least be more informed on where React Native and Expo fit into the big picture.

▶  Why Use Redux Today? — The maintainer of the popular Redux state management library gave a talk at React Summit 2024 giving a thorough introduction to the history of Redux, how it grew, and the benefits it continues to provide. There are detailed slides if you’d prefer not to watch a video.

Level Up Your Next.js Skills — Join Scott Moss for this detailed video course on intermediate Next.js. Learn how to build production-ready apps by diving into concepts such as server actions, data fetching, protected routes, form authentication, performance caching, and more.

▶  Migrating Coinbase's 56 Million Users to React Native — An interview with Nick Cherry, a React Native developer at Coinbase, about the company’s efforts in transitioning their apps from native to React Native. (43 minutes.)

How to Deploy Your React App Using Container Registry — DigitalOcean’s commercial alternative to deploying React apps by creating a Docker image, pushing it to their Container Registry and then deploying it using one of their 'droplet' VMs.

xr 6.0: Make React Three Fiber Apps into Immersive Experiences — React Three Fiber is a React renderer for Three.js that makes it easy to create 3D experiences with React. xr takes it a step further into the world of VR and augmented reality. GitHub repo.

InfiniteGrid 4.12: Arrange Card Elements Infinitely in a Grid Layout — A mature and established way to create grids formed of card elements of varying sizes. Happy on both desktop and mobile and has integrations for React, Vue, Angular, Svelte, and others. GitHub repo.

MDXEditor 3.8: A Rich Markdown Editor Component — A Lexical-powered Markdown editor for React apps. The live demo shows off what you need to see.

React Flow 12: Build Node-Based Editors and Interactive Diagrams — Now more broadly known as xyflow, this mature library makes it easy to create ‘node-based UIs’ where you want to have numerous interactive components wired together however you choose. Version 12 introduces server side rendering support, dark mode, more hooks and helpers, and better DX via TSDoc.

TinyBase 5.0: A Reactive Data Store for Local-First Apps — A data store that can act as a reactive backend to your apps. If you want less headache with the backend of your app, this is for you, and includes bindings to React and pre-built reactive components. v5.0 includes a new mergeableStore type that can wrap your data as a Conflict-Free Replicated Data Type...

▶  useCallback versus useMemo — While superficially they may seem similar, in just 11 minutes we learn the differences and why referential equality is such an essential concept to grok. Even more fantastic given it’s his first YouTube video!

▶  Using React 19 with Both Vite and Then Next.js — The VP of Product at Vercel starts with a client-only React app using Vite and looks at how React 19 can make life better, before moving on to a Next.js example. (32 minutes.)

Learn Suspense by Building a Suspense-Enabled Library — What better way to learn than to get your hands dirty? Especially when it comes to a topic that’s a little awkwardly documented.

Sneaky React Memory Leaks: How the React Compiler Won’t Save You — Closures can lead to memory leaks in React and while the new and exciting React Compiler can tackle a lot of issues and make most codebases more performant, it pays to be aware of the tricky edge cases.