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 …
Tag Archives: react
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” …
Continue reading “Headless UI — Completely Unstyled, Fully Accessible UI Components”
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 …
React Flow – Library for Building Interactive Node-based UIs, Editors, Flow Charts and Diagrams
React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls. React Flow →
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 …
Continue reading “SWR — React Hooks library for data fetching”
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 …
Continue reading “Remotion – Create videos programmatically in React”