Tag: react
All the articles with the tag "react".
Tech Watch Posts
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.
How to Use React Compiler – A Complete Guide
Published: at 10:13 AMThis article discusses the React 19 compiler, which automates optimization tasks previously handled by hooks like useMemo() and useCallback(). While React's memoization techniques are valuable, over-optimization can hinder performance. With React 19, new features like Server Components, Server Actions, enhanced hooks, improved asset loading, and smoother Web Component integration aim to improve performance. The introduction of the compiler allows developers to focus more on writing efficient code without manually handling optimizations.
Component testing in Storybook
Published: at 10:13 AMThe blog post on Storybook discusses how component testing integrates with Storybook. It covers the importance of testing UI components in isolation, using Storybook to document and visually test components, and combining it with popular testing frameworks like Jest and Testing Library. This allows for better debugging and ensuring that individual components behave as expected before integrating them into larger applications.
Never Call new Date() Inside Your Components
Published: at 04:34 PMThe article explains why CSS-in-JS can be slow, primarily due to how it handles style generation and rendering. Traditional CSS is parsed directly by the browser, but CSS-in-JS solutions often require JavaScript to generate styles, leading to delays in rendering as the browser must parse and execute JavaScript before applying styles. Some modern tools like PandaCSS or Vanilla Extract mitigate this by compiling CSS ahead of time, reducing performance issues. The article also highlights the trade-offs between different CSS-in-JS approaches.