counter-goal

counter-goal

Hooks API Reference

useState

const App = () => {
  const [text, setText] = useState('init')

  return <div>{text}</div> // text = 'init'
}

const App = (props: AppProps) => {
  const [text, setText] = useState(() => `Hello ${props.text}`) // props.text = 'World'

  return <div>{text}</div> // text = 'Hello World'
}

useEffect

const App = () => {
  const [text, setText] = useState('init')
  useEffect(() => setText('update'), []) // like componentDidMount

  return <div>{text}</div> // text = 'update'
}

useCallback

Returns a memoized callback.

const App = () => {
  const [text, setText] = useState('init')
  const handler = useCallback(() => setText(text), [text])

  return (
    <div>{text}</div> // text = 'init'
    <button onClick={handler}>button</button>
  )
}

useMemo

Returns a memoized value. useMemo is like memoize of reselect

const App = () => {
  const [text, setText] = useState('init')
  useMemo(() => text, [text])

  return <div>{text}</div> // text = 'init'
}