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