Tag: react
All the articles with the tag "react".
My posts
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
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.
Why You Should Start Using Zod
Published: at 08:01 AMThe article explains why Zod is a valuable tool for developers, especially when working with TypeScript. Zod simplifies validation, improves type safety, and reduces boilerplate code. It allows developers to define schemas and infer TypeScript types from them, making code easier to maintain and more reliable. The article also shows how Zod enhances developer productivity in scenarios like form validation and contract sharing between frontend and backend.
Replacing React code with CSS :has selector
Published: at 07:25 AMThe article explores how the new CSS :has selector can simplify React code by eliminating the need for complex JavaScript logic. It allows for targeting parent elements and handling UI interactions like focus states, form element conditions, and dynamic styling without relying on React's state or re-renders. The post provides examples where using :has improves accessibility, reduces unnecessary React components, and enhances performance.
What’s new in React 19
Published: at 07:17 AMThe article highlights new features in React 19, such as improved server components, better support for streaming, and enhancements to the transitions API. It also discusses changes aimed at simplifying state management and improving performance, like the new useEvent hook. Additionally, React 19 introduces experimental features like the useCache hook for handling asynchronous data more effectively. These updates focus on enhancing the developer experience while pushing performance optimizations for modern web applications.
React and FormData
Published: at 07:12 AMThe article explores how React developers can use FormData, a JavaScript standard, to handle form data in both controlled and uncontrolled components. It covers how to avoid using refs and directly extract form values, while discussing challenges with TypeScript compatibility. The piece also introduces tools like Zod for schema validation and highlights how modern React APIs, especially in version 19, integrate with FormData, with examples from frameworks like Remix.
A beginners guide to using Vite with React
Published: at 01:45 PMA beginner's guide to using Vite with React. Covers setting up a new project, explaining Vite's benefits like fast server start and hot module replacement, project structure overview, working with assets, and basic troubleshooting. Highlights Vite as a modern, efficient alternative to traditional bundlers for React development.
The Complete Developer Guide to React 19, Part 1: Async Handling
Published: at 12:20 PMThe guide to React 19 focuses on async handling improvements, including new hooks like useTransition and useActionState. These enhance handling of asynchronous tasks, error management, and optimistic updates. Key features include smoother state transitions without UI blocking, better form state management, and support for server actions and server components. The introduction of hooks like useOptimistic and useFormStatus makes React apps more responsive and dynamic while simplifying async operations.