React Tricks: Fast, Fit and Fun

Wouter: a micro router

Component composition with React.cloneElement

cloneElement(<img />, { src: "keyboard-cat.webp" }) 
// <img src="keyboard-cat.webp" />

cloneElement(<Alert critical />, { color: undefined }) 
// <Alert />

cloneElement(<></>, { why: "?" }) 
// <React.Fragment why="?" />

// <a href="/">Hi!</a>
<Link to="/">Hi!</Link> 

// ⛔️ <a href="/"><a /></a>
<Link to="/"><StyledLink /></Link>

// 👍 <a href="/" />
<Link to="/" asChild><StyledLink /></Link>

const Link = ({ asChild, children, href }) => {
  if (asChild && isValidElement(children)) {
    return React.cloneElement(children, { href })
  }
	
	return <a href={href}>{children}</a>
}

const RenderIsExpensive = ({ children }) => {
  const targetRef = useRef(null)

	const emitParticles = () => {
    // some magic over `targetRef.current` 
 	}

	useEffect(() => {
	  emitParticles()
	}) // no deps, fires after every render

  return cloneElement(children, { ref: targetRef })
}

// usage:
<RenderIsExpensive>
  <Button>Counter: {counter}</Button>
</RenderIsExpensive> 

React Performance 101

1. Components in React are not pure by default

2. To make them pure, wrap the component in React.memo

3. Be mindful of non-primitive values, avoid unnecessary reference changes.

const Fast = React.memo(SlowComponent) 

// Whoops, we messed up 
<Fast onDone={()=> { ... }} />
<Fast severity={["warning", "error"]} />

• useMemo: construct “computed” values based on the list of dependencies. It is not guaranteed to be recomputed though, see React docs.

• Move static functions, objects, array to global namespace.

• useRef, useState and useEvent. See below.

useState that never updates: running component initialisers

const [value] = useState(() => { /* initializer */ })

const useWindowTitle = (title) => {
   const [prevTitle] = useState(() => document.title)

   useEffect(() => {
			document.title = title
			return () => document.title = prevTitle

      // prev title isn't actually needed here, but linter will complain
      // wouter actually supresses these warnings to reduce checks and 
      // keep the size small
   }, [title, prevTitle]) 
}

// Method (A)
// inits on app startup, not exactly what we want
let client = new Multiplayer()
const useMultiplayer = () => client

// Method (B)
// better, lazy initialization
let client

const useMultiplayer = () => 
  (client ||= new Multiplayer())

// Method (C)
// By the way, if, for some reason, you prefer not to declare 
// a global variable, here is a more exotic way: using a context 
// with a default empty object that can act as a cache.

const CacheCtx = createContext({})

const useMultiplayer = () =>
  (useContext(CacheCtx).v ||= useMultiplayer())

// Let's use the hook in your app
const App = () => {
  const client = useMultiplayer()
  return <Provider value={client} children={...} />
}

const useMultiplayer = () => {
  const [client] = useState(() => new Multiplayer())
  return client
}

Update. After making some experiments, I discovered that in Strict mode, React will call your initializer function twice in order to "help you find accidental impurities". While this behavior only happens during development and does not affect production, it can be potentially dangerous. To fix this, we can use useRef to properly cache the initialized value. However, this is not critical when the resource has no side-effects, as it works perfectly fine in wouter.

Stable callbacks with useEvent

const [x, y] = useMousePosition(canvasRef)

const leaveComment = useCallback((text) => {
  ...
}, [x, y])

import useEvent from "react-use-event-hook" // user-land shim

const [x, y] = useMousePosition(canvasRef)
                     
const leaveComment = useEvent((text) => {
  ...
}) // no deps!

Using useSyncExternalStore to safely subscribe to external state changes

multiplayer.name // => "@molefrog"

const unsub = multiplayer.on("rename", () => ...) 
unsub()

const useUserName = () => {
  const [name, setName] = useState(client.user)

  useEffect(() => {
    return client.on("rename", (newName) => setName(newName))
  }, [multiplayer])
}

const [subscribeToRename] = useState(
  () => cb => client.on("rename", cb)
)

useSyncExternalStore(subscribeToRename, () => client.name)

// Nice!
let fn=c=>e(t,(()=>c.name)) // 28B
let fn=c=>{let[r,m]=a((()=>c.name));return n((()=>t((()=>m(c.name)))),[c]),r} // 78B

Advanced: On syncExternalStore and hashchange event

• There are sync and async browser events. Sync events are triggered with dispatchEvent. hashchange in WebKit is an async event (however popstate isn’t, which is non-standard behaviour and was probably done for compatibility purposes, see this comment in WebKit’s source).

• React probably schedules a micro-task for rendering when callback is called. This causes micro-tasks execute in between event listener invocations.

• If this event was synchronous, then updates would have been batched until all listeners were invoked.

• Solution → subscribe to hashchange once and then fire a sync event, so that all uSES callbacks are invoked within the same task.

Closing thoughts

If you enjoyed this article, you can show your support by giving wouter a star on GitHub or subscribing to @mlfrg. You can go even further by adding it to your project and providing feedback as a developer.