React Digest - RD#483 A Perfect Modal Dialog

Existential React questions and a perfect Modal Dialog
21 minutes by Nadia Makarevich

A step-by-step process for implementing a new feature from an idea to a production-ready solution using Modal Dialog as an example.

Implement policy-driven RBAC and ABAC in React
sponsored by Cerbos

Fine-grained access controls are challenging. We put together a demo on using Cerbos to implement a scalable and maintainable authorization framework, featuring examples and best practices. If you’re looking to simplify your authorization processes while maintaining high security standards, you will find this piece helpful.

The anatomy of a React Island
6 minutes by Swizec Teller

React Islands is a technique for integrating React components into traditionally rendered web projects, allowing developers to modernize legacy codebases incrementally without requiring a complete rewrite. The approach involves rendering React components into designated div elements within existing HTML pages, with each "island" functioning as a self-contained React application that can handle its own data fetching and state management.

Loading Data with TanStack Router
14 minutes by Adam Rackis

We’ll cover the built-in hooks TanStack Router ships with to load and invalidate data. Then we’ll cover how easily TanStack Query (also known as react-query) integrates and see what the tradeoffs of each are.

The AutoScrollList Component
9 minutes by Nikhil Snayak

Nikhil presents three iterations: starting with a basic useRef and useEffect implementation, progressing to a callback ref approach with user interaction handling, and finally settling on a vanilla DOM-based solution that offers better performance, mobile support, and simpler code structure. The final version eliminates React-specific state management and uses native DOM events to create a robust, cross-device compatible auto-scrolling behavior.

Feature-based React Architecture
7 minutes by Robin Wieruch

The article discusses creating a feature-based architecture in React applications using Server Components and Server Actions. It demonstrates how to decouple features by splitting components and data fetching functions into focused, domain-specific units.

Introducing <Waitlist /> mode - a virtual queue for your app
sponsored by Clerk

Waitlist is a new sign-up mode and component that lets users register interest and join a waitlist for early access to your product. Manage user access and onboarding all within your Clerk Dashboard. Read our changelog announcement for more details.

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.