The Most Common React Design Patterns

The Most Common React Design Patterns
9 minutes by Mensur Durakovic

Have you ever played the League of Legends? If you have, you know that playing with its character Caitlyn is simple to start but complex to master. Same with coding in React. In this article Mensur discusses five key React design patterns and examines each pattern's benefits and drawbacks.

Build a Next.js sign-up form with React Hook Form
sponsored by Clerk

Learn how to build a fully-functional and secure user registration form with React Hook Form and server actions - featuring progressive enhancement, dynamic validation, and secure password handling with Argon2.

How to Load Dynamic Stylesheets in React Router
3 minutes by Sergio Xalambrí

In this article Sergio explains different approaches to dynamically loading CSS styles in a web application using Remix framework. It covers three main methods: generating CSS on-demand based on user data, loading predefined static CSS files conditionally, and creating user-specific CSS files with dynamic URLs. Each approach involves creating specific routes, implementing loader functions, and configuring the application to serve the appropriate stylesheets based on user preferences or organizational settings.

How to build a library in React
9 minutes by Tiger Abrodi

Tiger describes the creation of React Context Selector, a library that adds selector functionality to React's context system. The library leverages React's useSyncExternalStore hook to efficiently manage state updates and re-renders, allowing components to subscribe only to specific parts of the context state they need. Tiger details the implementation process, including the use of tsup for building, the core architecture of the library, and provides a comprehensive guide on publishing the package to npm.

Persisting Form Data in React: A Modern Approach with Nuqs
4 minutes by Armand Sallé

Discover how to persist and share form data in React using Nuqs, a modern type-safe URL state manager. Move beyond localStorage limitations to create shareable, type-safe forms with zero backend requirements. In this article Armand demonstrates how to implement form persistence using Nuqs alongside React Hook Form and Zod, highlighting its integration with React routers and features like browser history navigation and default value handling.

Single Responsibility Principle in React: The Art of Component Focus
4 minutes by Christian Ekrem

In this article Christian discusses the Single Responsibility Principle (SRP), one of the SOLID principles in software architecture. He demonstrates how to refactor a React component that violates SRP by handling multiple responsibilities into separate, focused components. He also shows how to split the functionality into a custom hook for data fetching, a presentation component, and a container component, emphasizing that components should have only one reason to change to improve maintainability, testability, and flexibility.

webdev

javascript

And the most popular article from the last issue: