Lifecycle

ComponentDidMount

function useMount(fn) {
  useEffect(() => fn(), [])
}

ComponentWillUnmount

function useUnmount(fn) {
  useEffect(() => fn, [])
}

ComponentDidUpdate

function useUpdate(effectCallback) {
  const mounting = useRef(true)

  useEffect(() => {
    // First get called for componentDidMount lifecycle,
    // so skip it.
    if (mounting.current)
      mounting.current = false
    else
      return effectCallback()
  })
}

function useUpdateDeps(effectCallback, deps) {
  const mounting = useRef(true)

  React.useEffect(() => {
    return () => {
      mounting.current = true
    }
  }, [])

  React.useEffect(() => {
    // Do not execute effectCallback for the first time.
    if (mounting.current)
      mounting.current = false
    else
      return effectCallback()
  }, deps)
}

Force Update

const useUpdate = () => useState(0)[1]

import { useState } from 'react'

interface VoidFunction {
  (): void
}

interface VoidFunctionCreator {
  (): VoidFunction
}

const max = 9007199254740990 // Number.MAX_SAFE_INTEGER - 1;

const useForceUpdate: VoidFunctionCreator = (): VoidFunction => {
  const [, setState] = useState(0)
  const forceUpdate: VoidFunction = (): void => {
    setState((state: number) => (state + 1) % max)
  }
  return forceUpdate
}

export default useForceUpdate

Mounted

function useIsMounted() {
  const [isMount, setIsMount] = useState(false)

  useEffect(() => {
    if (!isMount) {
      setIsMount(true)
    }

    return () => setIsMount(false)
  }, [])

  return isMount
}

Previous

export default function Counter() {
  const [count, setCount] = useState(0)
  const prevCount = usePrevious(count)
  return (
    <h1>
      Now:
      {' '}
      {count}
      , before:
      {' '}
      {prevCount}
    </h1>
  )
}

function usePrevious(value) {
  const ref = useRef()
  useEffect(() => {
    ref.current = value
  })
  return ref.current
}