rci — A clever React Component for One-Time Passwords (OTP)

rci is a React component that ask for a one time password, in a pretty clever way. rci uses a single DOM input element, overlayed on top of plain divs for styling. Most other implementations of this pattern are based on multiple inputs. Using multiple inputs gives out-of-the-box style consistency, but comes with the disadvantage …

Migrate a Client-Side Application to React 18 Beta (Video Course)

Up on Egghead you there’s a free video course on how to migrate to React 18. Host Michael Chan walks us through it all in about 15 minutes. In this new course, Michael guides you through incrementally migrating a legacy application that uses the legacy ReactDOM.render() API to the new ReactDOM.createRoot() API. Along the way, …

React Conf 2021

Last week React Conf 2021 took place, focussing on the upcoming React 18 release. I especially liked these talks, all before the 2:00:00 mark: 15:00 — React 18 Keynote 48:55 — React 18 for app developers (useDeferredValue 🔥) 1:08:03 — Streaming Server Rendering with Suspense 1:26:40 — React Developer Tooling 1:54:12 — React without memo …

tldraw — A tiny little drawing app

The past few weeks/months Steve Ruiz has been teasing a lot of the work he has been doing on tldraw, an app to draw diagrams. never too late for a second pass on the UI — Steve Ruiz (@steveruizok) November 2, 2021 About two weeks ago he released it, and also made the source code …

Radix UI

Unstyled, accessible components for building high‑quality design systems and web apps in React. Comes with components such as Dialog, Popover, Dropdown Menu, Toggle, … import * as Popover from '@radix-ui/react-popover'; function App() { return ( <Popover.Root> <Popover.Trigger>…</Popover.Trigger> <Popover.Content>…</Popover.Content> </Popover.Root> ); } Installation per NPM: npm install @radix-ui/react-popover Radix UI → Related: Headless UI — Completely …

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 …