RD#488 How to avoid issues with custom Hooks

Custom Hooks possible issues: how to avoid them
20 minutes by Iasmim Cristina

We know custom Hooks are useful in React, but using them carelessly can lead to many problems. Let's find out how to prevent that. This article discusses potential pitfalls and best practices when using custom Hooks in React applications. Iasmim explains that custom Hooks don't share state between different components by default and demonstrates solutions using Context API.

Tests are dead. Meticulous AI is here.
sponsored by Meticulous

Meticulous AI is a tool which automatically creates and maintains a continuously evolving e2e UI test suite that covers every corner of your application – with no developer intervention required whatsoever. Backed by CTO of GitHub, Guillermo Rauch (next.js author), yc and others, it's built from the Chromium level up with a deterministic scheduling engine – making it the only testing tool that eliminates flakes.

How React's Render, Effects and Refs work under the hood
10 minutes by Tiger Abrodi

Understanding the entire render cycle of React and how it works with the browser isn't easy. In this article Tiger breaks down how React processes updates through render and commit phases, clarifies that Virtual DOM's main purpose is platform independence and update batching, and explains the differences between useRef, callback refs, and when to use useEffect vs useLayoutEffect for DOM measurements.

Composable Caching with Next.js
7 minutes by Lee Robinson

Learn more about the API design and benefits of 'use cache'. This article discusses Next.js's new 'use cache' directive, which aims to simplify and enhance caching in applications. The directive automatically determines cache dependencies and handles both serializable and non-serializable values, making it more reliable than traditional cache functions.

The Mental Model of Server Components
13 minutes by Daniel Saewitz

The article explains React Server Components (RSCs) and their advantages in modern web development. Daniel discusses how RSCs solve the costly problem of universal hydration by allowing components to render exclusively on the server, while enabling seamless composition with interactive client components. RSCs provide a balanced solution that combines the benefits of server-side rendering with the compositional power of React, resulting in better performance and developer experience.

React Router 7 Tutorial
14 minutes by Robin Wieruch

In this article, Robin provides a comprehensive guide to React Router 7. It covers essential concepts like basic routing with Link and Route components, layout routes using Outlet, dynamic and nested routes, as well as how to set up navigation, handle 404 pages, create active links, manage search parameters, and implement both declarative and programmatic navigation. The guide also includes practical examples showing how to structure a React application with client-side routing without making server requests.

webdev

javascript

newsletters

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