Tag: react
All the articles with the tag "react".
My posts
Responsive Images: a quick example with react
Published: at 03:00 PMOptimizing web performance is a priority for any developer. One key aspect to consider is how images are handled across different devices. In this article, we will explore how to create responsive images with React. The goal is to display different images based on the screen size.
Example of Using useSyncExternalStore with LocalStorage
Published: at 06:26 PMLearn how to efficiently synchronize application state with external data sources like LocalStorage using React's useSyncExternalStore hook, with a practical example and detailed explanation.
Tech Watch Posts
The magic of keeping one level of abstraction per function
Published: at 03:33 PMThis article explains the importance of maintaining a single abstraction level within functions, a technique that enhances readability and simplifies debugging. By keeping each function focused on a single level of detail, developers can create cleaner, more maintainable code. The post provides examples to illustrate this concept, highlighting its role in writing effective, understandable functions.
The styling dilemma in React
Published: at 03:18 PMThis article discusses various styling methods available in React, such as CSS modules, styled-components, and Tailwind CSS, each offering unique advantages and challenges. It guides developers through key considerations when selecting a styling approach, focusing on factors like scalability, performance, and maintainability to help make informed decisions.
TIL: inline event handlers still fire when passed to React's dangerouslySetInnerHTML
Published: at 03:10 PMThis article explores best practices for handling dangerouslySetInnerHTML in React, a method used to insert HTML directly into components. While it's powerful, improper use can lead to security vulnerabilities like XSS attacks. The post highlights ways to improve security when using this feature, ensuring safer HTML handling in React applications.
Guide to Error & Exception Handling in React
Published: at 01:04 PMThis guide provides best practices for handling errors and exceptions in React applications. It covers techniques for error boundaries, logging, and monitoring to improve debugging and deliver a smoother user experience.
Handling Form Validation Errors and Resets with useActionState
Published: at 03:21 PMThis article covers using React 19's useActionState hook for form handling, including validation and error management. It shows how to manage form submissions, server-side validation, and state updates while maintaining form data on errors. The post also highlights how to handle form resets and the advantages of progressive enhancement, allowing the form to work even without JavaScript. Alternatives like Reach Hook Form are also mentioned for managing form state.
How to control a React component with the URL
Published: at 01:45 PMThe article on Build UI explains how to sync React components with URL query parameters, focusing on keeping the state consistent between UI elements and the URL. It demonstrates practical steps for using hooks like useSearchParams and useRouter to manage the search input in a React app. By hoisting state into the URL, developers can enable features like back-and-forth navigation, refreshing, and shareable URLs without introducing bugs caused by duplicated states.
Next.js SaaS Starter
Published: at 10:43 AMThe Next.js SaaS Starter offers a comprehensive template for building SaaS applications using Next.js, Postgres, Stripe, and shadcn/ui. It includes features like authentication, subscription management, and CRUD operations for user management. With built-in support for Stripe payments, role-based access control, and a customizable dashboard, the starter is optimized for quick deployment and scalability. It's designed to simplify common tasks such as database integration and form management, making it ideal for developers looking to launch a SaaS product.
Introducing TanStack Router
Published: at 10:34 AMTanStack Router is a powerful and flexible router designed for frameworks like React, Solid, and Vue. It emphasizes performance, modularity, and ease of use, enabling developers to handle complex routing scenarios with minimal boilerplate. The router supports features like route matching, async data loading, and nested layouts, while being framework-agnostic. It’s built to integrate seamlessly with TanStack Query, providing an efficient way to manage both routing and data fetching in modern web applications.
How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
Published: at 08:53 AMWant to build a Chrome extension using the latest tech stack? This guide walks you through creating a Chrome extension with React, TypeScript, TailwindCSS, and Vite.
You Might Not Need an Effect
Published: at 03:24 PMThe article from the React documentation explains when it is unnecessary to use the useEffect hook. It provides common scenarios where developers mistakenly rely on effects and offers alternative ways to handle logic that don't involve useEffect, such as computing derived state or managing non-reactive values. The article emphasizes cleaner code and avoiding performance issues by using simpler React features instead of overcomplicating state management with effects.