Skip to main content

Hooks

React Hooks allow you to use state and other React features in functional components.

Intrinsic Hooks​

  • State - useState for component state
  • Reducer - useReducer for complex state
  • Memo - useMemo for memoized values
  • Callback - useCallback for memoized callbacks
  • Ref - useRef for refs
  • Context - useContext for global state

Effect Hooks​

  • Effects - useEffect, useLayoutEffect, useInsertionEffect

Concurrent Features​

Server Interaction​

  • Servers - UseOptimistic, useActionState, useFormStatus

Utility Hooks​

  • Utility - useId, useEvent, useImperativeHandle, useDebugValue

Custom Hooks​

  • Lifecycle - componentDidMount, componentWillUnmount, componentDidUpdate, forceUpdate, isMounted
  • Event - useInterval, useDebounce for event handling
  • Form - useForm with state and ref implementations for form management
  • Media - useMedia for responsive design, useLockedBody for scroll control
  • Router - useStateParams, useRouter, useHistory for routing and navigation
  • Resource - useScript, useCookie, useLocalStorage for external resource management
  • Data - useAsyncData for API calls, useRealTimeQuery for Firebase integration
  • Store - Simple and complex store patterns, Recoil, Atom, Zustand implementations

Best Practices​

Internals​