Cheat Sheet about React

Here are some handy React tricks:

Log all clicks

export default function LogClicks ({ children }) {
  const onClick = useCallback((event) => {
    // Log click handler here. Child click handlers fire after this global handler.
  }, [])
  return <div onClickCapture={onClick}>{children}</div>
}

Play sound

import useSound from 'use-sound'

import alert from './sounds/alert.mp3'

const AlertButton = () => {
  const [ play ] = useSound(alert)

  return <button type="button" onClick={play}>Call the police!</button>
}