React Hooks in TypeScript

useDebounce.ts

import { useEffect, useState } from 'react'

export function useDebounce<T>(value: T, delay: number) {
  // State and setters for debounced value
  const [debouncedValue, setDebouncedValue] = useState<T | undefined>()

  useEffect(
    () => {
      // Update debounced value after delay
      const handler = setTimeout(() => {
        setDebouncedValue(value)
      }, delay)

      // Cancel the timeout if value changes (also on delay change or unmount)
      // This is how we prevent debounced value from updating if value is changed ...
      // .. within the delay period. Timeout gets cleared and restarted.
      return () => {
        clearTimeout(handler)
      }
    },
    [value, delay], // Only re-call effect if value or delay changes
  )

  return debouncedValue
}

useObservable.ts

import { useState, useEffect } from 'react'
import { Observable } from 'rxjs'

export const useObservable = <T extends any>(
  observable: Observable<T>,
  initializer: T,
) => {
  const state = useState(initializer)

  useEffect(() => {
    const subscription = observable.subscribe(state[1])
    return () => {
      subscription.unsubscribe()
    }
  }, [state[0]])
  
  return state[0]
}

useSwitch.ts

import { useState } from 'react'

export const useSwitch = <T extends string>(...states: T[]) => {
  const [index, setIndex] = useState(0)

  return [
    states[index],
    () => {
      setIndex(index === states.length - 1 ? 0 : index + 1)
    },
  ] as const
}