DEV Community

Cover image for React Hooks
akanoob
akanoob

Posted on

React Hooks

Image description
Hooks are functions that start with the name use (e.g., useState, useEffect).
They allow functional components to:

  1. useState: Allows functional components to manage state.
  2. useEffect: Performs side effects in function components, similar to lifecycle methods in class components.
  3. useContext: Provides a way to access the context in functional components.
  4. useReducer: Alternative to useState. It's usually preferred for managing more complex state logic.
  5. useCallback: Returns a memoized callback function.
  6. useMemo: Returns a memoized value.
  7. useRef: Returns a mutable ref object.
  8. useImperativeHandle: Customizes the instance value that is exposed when using ref.
  9. useLayoutEffect: Similar to useEffect, but fires synchronously after all DOM mutations.
  10. useDebugValue: Used for displaying custom hook labels in React DevTools.

Rules for Using Hooks:

  • hooks can be only used in the react component
  • It can be only used in top-level( it must be not called in nested code statements)

Top comments (0)