Issue #22 - Mastering useDeferredValue, React 19, and More
This edition covers advice on optimizing React state updates, an overview of HTML attributes vs. DOM properties, and introductions to helpful design and recording apps.
Tip of the day
In your state setters, prefer function updaters to avoid unnecessary dependencies in your handler functions!
// naw naw naw, this is recreated every time it's called
const handleClick = React.useCallback(() => {
setIsOpen(!isOpen)
}, [isOpen])
// yas yas yas, never needs to be recreated
const handleClick = React.useCallback(() => {
setIsOpen(currentIsOpen => !currentIsOpen)
}, [])
Articles
HTML attributes vs DOM properties
Learn the fundamental differences between HTML attributes and DOM properties, including how they are serialized, their value types, and case sensitivity. It also covers how frameworks like Preact, Vue.js, and React handle the distinction between attributes and properties.
by Jake Archibald
React 19 lets you write impossible components
What can you do with Server Components and Actions in React 19? Let’s talk about how React 19’s features are a big deal, even for a simple marketing site.
by Darius Cepulis
Tools
This tool is a handy extension for developers and designers alike, allowing for quick and easy extraction of SVG files from a webpage.
by NGTI
A Lightweight and powerful open source alternative to Loom, that let’s you record and share in seconds.
by Cap Software
Tech Talks
https://www.youtube.com/live/T8TZQ6k4SLE?t=18825&si=r_7tzeKfkrqFrwaU
In this talk Dan takes helps you rethink how rendering a webpage is a single program that is split between two computers, the client and the server, and how React server components help you build versatile apps around this mental modela
by Dan Abramov
Quiz
What is wrong? (React)
function App() {
const [query, setQuery] = React.useState("");
const deferredQuery = React.useDeferredValue(query);
return (
<>
<input type="text" value={query} onChange={(e) => setQuery(e.target.value)} />
<ExpensiveComponent query={deferredQuery} />
</>
);
}
function ExpensiveComponent({ query }) {
// A component that has some heavy computation
// and takes a long time to render
}
This week in GIF
When I explain to the salesperson why the deadline they promised is unachievable
Liked this issue? Share on Twitter or read previous issues.