React Hooks — Complete Guide 2025

React Hooks provide a powerful way to use state and other React features in functional components.

React Hooks — Complete Guide 2025
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useTransition
useDeferredValue
useLayoutEffect
useDebugValue
FAQ

useState

Manage component state:

const [count, setCount] = useState(0)
const [name, setName] = useState('John')
const [isOpen, setIsOpen] = useState(false)

function handleIncrement() {
  setCount(prev => prev + 1)
}

useEffect

Handle side effects:

useEffect(() => {
  console.log('Component mounted')
  return () => console.log('Component unmounted')
}, [])

useEffect(() => {
  const subscription = subscribe()
  return () => subscription.unsubscribe()
}, [])

useContext

Access context:

const theme = useContext(ThemeContext)
const user = useContext(UserContext)

useReducer

Manage complex state:

const [state, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 }
    case 'DECREMENT':
      return { count: state.count - 1 }
    default:
      return state
  }
}, { count: 0 })

useCallback

Memoize functions:

const memoizedCallback = useCallback(() => {
  handleClick(a, b)
}, [a, b])

useMemo

Memoize values:

const memoizedValue = useMemo(() => {
  return expensiveCalculation(a, b)
}, [a, b])

useRef

Direct DOM access:

const inputRef = useRef(null)

function handleClick() {
  inputRef.current.focus()
}

return <input ref={inputRef} />

useTransition

Track pending state:

const [isPending, startTransition] = useTransition()

function handleSearch(query) {
  startTransition(async () => {
    const results = await fetch(`/api/search?q=${query}`)
    setResults(results)
  })
}

useDeferredValue

Defer value updates:

const [input, setInput] = useState('')
const deferredValue = useDeferredValue(input)

return (
  <>
    <input onChange={(e) => setInput(e.target.value)} />
    <SearchResults query={deferredValue} />
  </>
)

useLayoutEffect

Synchronous effect:

useLayoutEffect(() => {
  // Runs synchronously after DOM mutations
  // Use for measurements or DOM updates
}, [])

useDebugValue

Debug custom hooks:

function useCustomHook() {
  const [value, setValue] = useState()
  useDebugValue(value)
  return [value, setValue]
}

FAQ

Q: Which hook should I use for data fetching? A: useEffect or a custom hook wrapping useEffect.

Q: When do I need useCallback? A: Only when passing callbacks to memoized children.

Q: What's the difference between useEffect and useLayoutEffect? A: useLayoutEffect runs before paint; useEffect after. Use useEffect by default.

Master hooks for powerful functional React development.