useUnmountSignal() — A React Hook to cancel promises when a component is unmounted

A React Hook that wraps around the almighty AbortController. It will automatically call abort() on the created AbortSignal instance when the component unmounts. import useUnmountSignal from 'use-unmount-signal'; function Example() { const unmountSignal = useUnmountSignal(); return ( <button onClick={() => fetch('https://ping.example.com', { signal: unmountSignal }) }> Ping </button> ); } Installation per NPM: npm i use-unmount-signal …

What’s new in React 18

About a month ago React 18 got announced, with these new features: Automatic batching — React will now better batch state updates no matter what the context. If you do want to force an update, wrap your state change inside ReactDOM.flushSync() Transitions — A new hook named useTransition() to tell your app which updates are …

Demystifying styled-components

Josh W. Comeau lays out the details how styled-components works internally. For so many React devs, styled-components seems kinda magical. It isn’t at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we’ll learn exactly how styled-components works by …

How to Clean up Async Effects in React

Dmitri Pavlutin walks us through properly cleaning up side-effects in React: From time to time you might have difficulties at the intersection of component lifecycle (initial render, mount, update, unmount) and the side-effect lifecycle (start, in progress, complete). Tackled are fetch requests, timers like setTimeout(), debounce or throttle functions, etc. With the techniques applied, you …

Headless UI — Completely Unstyled, Fully Accessible UI Components

Headless UI provides a nice set of bare bones React/Vue components — Menu (Dropdown), Listbox (Select), Switch (Toggle), Dialog (Modal), etc. — for us to use in our UIs. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. In case you’re no fan of Tailwind, don’t let the “with Tailwind CSS” …

Remix v1 Beta Launch Video

Michael Jackson and Ryan Florence recently launched the v1 beta of the aforementioned Remix. Through lots of live code, Ryan and Michael will tell you all about where Remix started, where it’s at now, and what this v1 Beta launch means for one of the most exciting web frameworks today. If you’re into React, be …

SWR — React Hooks library for data fetching

From the Next.js folks comes SWR, a React Hooks library for data fetching built on Suspense: The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. It …

Before You React.memo()

Dan Abramov shares 2 techniques to try before resorting to optimize with React.memo() In this post, I want to share two different techniques. They’re surprisingly basic, which is why people rarely realize they improve rendering performance. These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good …

Remotion – Create videos programmatically in React

Remotion is a suite of libraries building a fundament for creating videos programmatically using React. Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc. Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem Also comes with a handy player …