Aleksei

I'm attending React Advanced 2025 - get your free remote ticket and join me there with 5k other engineers and 50+ great speakers
gitnation.com/badges/react...

Tried many, including Obsidian and Notion.
Finally found Reflect, which is perfect for me. But it's paid.

But I've learned. React Compiler deoptimizes first (unwraps useMemo useCallback) and then optimizes on its own, but more precisely.

The code becomes
console.log('heavy fn');
x = a + 1;
b = memoizedHeavyFn(x);

so I get console log on each rerender, but heavyFn isn't called until x is changed

Just been confused for 30min how React Compiler rewrites

b = useMemo(() => {
console.log('heavy fn');
return heavyFn(a + 1);
}, [a])

because I started seeing this console log every time the component renders 😅

#react

Anchoreum A game for learning CSS anchor positioning

CSS anchor positioning is amazing #css
Just played with it in an interactive game anchoreum.com

Weirdly, calling bind() on a function makes it "native".

While bind doesn't change the function body, it technically creates a new function, yet still preserves the name property... kinda... by adding a "bound" prefix. #javascript

structuredClone facts (5/6)

Functions aren't cloneable, but you can manually clone them using fn.toString() & new Function() #javascript

No guarantees cloned fn will work, as it may depend on closures or globals. Native functions can't be cloned this way, as toString returns "{ [native code] }"

structuredClone facts (4/6)

`window.postMessage` uses the structuredClone algorithm to transfer data, and IndexedDB uses it to store data #javascript

structuredClone facts (3/6)

It doesn't preserve prototype chain for non-builtin object types. #javascript

A Map remains a Map, but MyClass becomes a plain JavaScript object. Null prototype is not preserved too (Object.create(null)).

Be aware of XSS, custom elements, <base href>, and CSS when appending to a document. AFAIK DOMParser.parseFromString itself doesn't cause XSS until the DOM is attached to the live document."

structuredClone facts (6/6)

While DOM nodes aren't cloneable by structuredClone, you can postMessage them between documents by using el.outerHTML to serialize and DOMParser.parseFromString to deserialize
(I have no idea why you'd want to do that) #javascript

StructuredClone Facts (2/6)

Unlike JSON.stringify & parse:
- It raises exception if any deep prop is non-cloneable (e.g., function or dom node)
- It doesn't offer useful replacer/reviver callbacks

To safely handle arbitrary data, you have to manually traverse it first.

structuredClone facts (1/6)

It can handle circular references #javascript

JavaScript REPL & Playground Quickly test and share your code snippets. Ideal for learning and prototyping.

A JavaScript REPL & Playground.
Expression results are displayed in real time.
jsrepl.io
#javascript #typescript #webdev #frontend