Hoistable SVG Defs, Take Two: Impersonating the DOM
Deduplicating SVG definitions in React by portaling them into a plain object that impersonates a DOM node, the trick behind React Aria's Collections.
JulesBlom.com
Jules Blom’s Web Home. My personal website and dev blog, mostly on React & web development
Latest posts
Hoistable SVG Defs in React
Colocating SVG definitions with the components that use them, using portals and context. An overengineered but instructive exercise.
Parents & Owners in React: Context Providers
Understanding how parent and owner components affect context updates can help you write more performant context providers
More Than You Need to Know About ReactDOM.flushSync
An in-depth look at what ReactDOM.flushSync does and what it’s good for.
Parents & Owners in React: Rendering Performance
Being aware of the distinction between parent and owner components can help you isolate updates and improve rendering performance.
Parents & Owners in React: Data Flow
There are two, similar but different component trees in React. Being aware of this difference can help you better structure your React application.
Running Promises In Parallel: A Visual Guide
A visual guide to dealing with multiple promises efficiently using the Promise concurrency methods.
An Animated Guide to React’s Optional Parameters
React’s API includes several optional and alternative parameters which provide additional behavior like optimization or other extras that occasionally can come in useful. Let’s look at those as animated diagrams.
Map of React v18 API
My visual, spatial overview of the React v18 API.
useSyncExternalStore First Look
A first look at the useSyncExternalStore React hook, its rationale, its caveats and its non-library purposes.
React ref Callback Use Cases
A ref callback is a little known feature in React, it's a function to perform an action when React attaches or detaches a reference to a DOM element. It has a few use cases, let's look at some.
HTML Elements Visualized
An explorable visualization of the modern HTML elements.
Timeline of a React Component With Hooks
An interactive timeline showing how a React component with hooks runs including a quiz of React Riddles to test your knowledge.
(Lazy) Components Maps
Cleaner conditional rendering in React by matching values using component maps, optionally, lazy-load components to make a “lazy component map”
Medium Reducers in React
useReducer is not just for complex state-updating logic, it can be used for commonplace state updates; state updates that are not complex, and not super simple either; medium, mundane reducers.
Avoid Anonymous Components With the displayName Property
There are a few cases where the React devtools can’t infer a name for a component, use the displayName property to avoid anonymous components in the devtools.
Actionless and Stateless Reducers in React
useReducer is not just for complex state-updating logic, it can be used for very simple state updates. One of the reducers two arguments can be ignored, making it either actionless or stateless.
Neat Little React Tricks
Some small React tricks you may or may not have seen before.
State Updater Module Functions
In React, you can reuse state updater functions by moving them to module scope.
Introduction to Typed Arrays and ArrayBuffers
An Observable notebook ‘explainable’ to learn what JavScript typed arrays are, how they work and when to use ’m.