useSignalEffect + React = cycle

[jamesarosen]

I have a hook that sets up some state and tears it down. I tried using useSignalEffect to do this, but I ran into a problem.

If I set theSignal.value = null in my cleanup function, it triggers an infinite cycle because Preact detects a change, reruns my useSignalEffect hook, and reinitializes the state.

But if I don't set theSignal.value = null in my cleanup function, the hook remembers the signal state after cleanup and doesn't reinitialize on the re-render. This is particularly noticeable with React's <StrictMode>, but it also happens if something external to the hook passes in a new value that should cause the hook to tear down the old state and initialize new state.

An example broken hook:

function useBrokenHook(): ReadonlySignal<string> {
  const timer = useSignal<number | null>(null)
  const time = useSignal<Date>(new Date())

  const formatter = useSignal<Intl.DateTimeFormat>(
    new Intl.DateTimeFormat("en-US", {
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
      hour12: false,
    })
  )

  useSignalEffect(() => {
    if (timer.value == null) {
      timer.value = setInterval(() => {
        time.value = new Date()
      }, 1000)
    }

    return () => {
      clearInterval(timer.value)

      // With this line, there will be an infinite cycle.
      // Without it, using the hook with strict-mode will cause
      // the timer to start and stop, then never restart.
      timer.value = null
    }
  })

  return computed(() => formatter.value.format(time.value))
}

A version that works using React's useEffect plus Preact's effect:

function useFixedHook(): ReadonlySignal<string> {
  const timer = useSignal<number | null>(null)
  const time = useSignal<Date>(new Date())

  const formatter = useSignal<Intl.DateTimeFormat>(
    new Intl.DateTimeFormat("en-US", {
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
      hour12: false,
    })
  )

  React.useEffect(() => {
    const preactCleanup = effect(() => {
      if (timer.value == null) {
        timer.value = setInterval(() => {
          time.value = new Date()
        }, 1000)
      }
    })

    return () => {
      clearInterval(timer.value)
      timer.value = null
      // Moving the Preact cleanup to after our own cleanup fixes
      // the problem.
      preactCleanup()
    }
  })

  return computed(() => formatter.value.format(time.value))
}

Demo: https://stackblitz.com/edit/react-signal-effect-cycle?file=App.tsx

[jamesarosen]

I can move the cleanup into useEffect and use useSignalEffect for everything else:

useSignalEffect(() => {
  if (timer.value == null) {
    timer.value = setInterval(() => {
      time.value = new Date()
    }, 1000)
  }
})

useEffect(() => {
  return () => {
    clearInterval(timer.value)
    timer.value = null
  }
}, [timer])

That works fine. I don't know that it reads better or worse.