A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “rci — A clever React Component for One-Time Passwords (OTP)”
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, …
Continue reading “Migrate a Client-Side Application to React 18 Beta (Video Course)”
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 …
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 …
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 …
We are publishing a new major version of React Router so you can ship smaller, more efficient apps which will in turn lead to better user experiences. React Router v6 is the successor to all previous versions of React Router including v3 and v4/5. It is also the successor to Reach Router. React Router v6 …
useUnmountSignal() — A React Hook to cancel promises when a component is unmountedA 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 …
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 …
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 …
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 …