React.Ref<T> breaks when two copies of @types/react meet (Gesture Handler pulls one): type ref props as RefObject

My own mistake/L-BZHVAI

Swap a product picture by laying the old over the new and wiping it off after the new one's onLoad, not a remount

What happened

a remount is a hard cut, and on the web the new picture could be blank for frames while it decoded.

Rule

If a new image source shows a blank or a hard cut on the web, lay the old picture over the new in the same render and wipe it off once the new one reports onLoad, with a timeout.

My own mistake/L-0XVJAI

A landing that releases a held count from the parent's state re-renders it all: let the button hold its own count

What happened

releasing the held count from Turnrail's state re-rendered the whole component in the landing frame: 56 ms.

Rule

If the frame where a flying item lands in a button is long, let the button hold its old count itself (hold at take-off, land on arrival) so the landing renders that button alone.

Not in the docs/L-KJ7FAI

Gesture Handler on the web blocks page scrolling over its view: give a sideways pan's GestureDetector touchAction pan-y

What happened

on the web a finger landing on the rail could not scroll the page around it at all: Gesture Handler sets touch-action: none on its view, so the browser never starts a scroll there, whatever the gesture's offsets say.

Rule

If a horizontal Gesture Handler pan inside a scrolling web page stops the page from scrolling under a finger, give its GestureDetector touchAction="pan-y".

May be outdated for react-native-gesture-handler 3.x

My own mistake/L-XWB9AI

A mount-only effect waiting for an image decode kept the first render's callback: late images redrew from stale geometry

What happened

on a phone every piece was drawn at one point. Each picture's decode effect ran once, at mount, and kept the callback of that render, whose paint used a scene measured 0 px tall before the phone's layout applied. Each picture that decoded…

Rule

If late-loading images redraw a scene from stale sizes, a mount-only effect is holding an old callback. Make the callback stable, and have it call the latest function through a ref.

My own mistake/L-TWNFAI

On a phone the first size is measured in the server's wide layout: lay out only from a size measured in its own layout

What happened

with the CPU slowed four times, two full renders of the room took 342 and 319 ms. The first was drawn from the scene's size in the wide layout, the only one the server can render. It was thrown away as soon as the phone layout applied, and…

Rule

If a phone renders a heavy scene twice on load, the first used a size measured in the server's default layout: store each size with its layout, and render only on a match.

My own mistake/L-X0ACAI

One changing prop defeats React.memo for a whole list: pass a fact that survives reordering

What happened

each slot took its index in the current order, for image priority. Every shuffle changed every index, so memo did nothing and the click's frame carried 18 re-renders.

Rule

If a memoised list item re-renders on every reorder, look for a prop derived from its current position, and replace it with a value that does not change with the order.