Stable effect dependenciesStable effect dependencies

Listener churn on every render

Dispatch. Both should log the current count.

function useWindowEvent(event, handler) {
  const onEvent = useEffectEvent(handler) // React 19.2+: always the latest handler
  useEffect(() => {
    const listener = (e) => onEvent(e)
    window.addEventListener(event, listener)
    return () => window.removeEventListener(event, listener)
  }, [event]) // not onEvent: it is a new function every render
}

// Older React: the same idea with a ref
function useWindowEvent(event, handler) {
  const handlerRef = useRef(handler)
  useEffect(() => { handlerRef.current = handler }, [handler])
  useEffect(() => {
    const listener = (e) => handlerRef.current(e)
    window.addEventListener(event, listener)
    return () => window.removeEventListener(event, listener)
  }, [event])
}

Which edit reconnects?

Edit the name, re-render, then switch user.

function Presence({ user }) {
  useEffect(() => {
    const channel = connect(user.id)
    return () => channel.close()
  }, [user.id]) // a new object with the same id is not a new user
}

App init: once per load

Remount a few times, with and without Strict Mode.

let didInit = false // module scope: one per page load

function App() {
  useEffect(() => {
    if (didInit) return
    didInit = true
    loadFromStorage()
    checkAuthToken()
  }, [])
}

// Or run it in the entry module, before anything renders:
if (typeof window !== 'undefined') {
  loadFromStorage()
  checkAuthToken()
}

Why it matters, pros and cons