React useDerivedState hook

useDerivedState.ts

import React from 'react'

const useDerivedState = <T>(derive: () => T, deps: any[]): T => {
  const [value, setValue] = React.useState<T>(derive)
  React.useEffect(() => {
    setValue(derive())
  }, deps)
  return value
}

export default useDerivedState

Usage:

import React from 'react'
import useDerivedState from './useDerivedState'

const Demo: React.SFC = () => {
  const [value, setValue] = React.useState('Hello, World!')
  const upper = useDerivedState(() => value.toUpperCase(), [value])

  return (
    <div>
      <input value={value} onChange={e => setValue(e.target.value)} />
      {upper}
    </div>
  )
}

export default Demo