Custom Hooks

A custom hook is just a JavaScript function wrapping a hook.

  • separate files with custom Hooks outside of components
  • fucntional componenets will stay really clean
  • can make usePokemonState hook to hold all pokemon states
  • primary purpose is to extract component logic into reusable functions
  • name of custom hooks must start with the word use
  • use to manage state and logic
  • provide better way for dividing our code into smaller modular parts
function useDocumentTitle(message) {
  useEffect(() => {
    document.title = message
  }, [message])
}

Example custom useField hook

import { useState } from 'react'
export const useField = (type) => {
  const [value, setValue] = useState('')
  const onChange = (event) => {
    setValue(event.target.value)
  }
  const reset = () => {
    setValue('')
  }
  return {
    type,
    value,
    onChange,
    reset
  }
}

To Review