React Hooks

What are React Hooks?

Components can have state which is an object that determine how a component renders and behaves.

React Hooks are a new feature in React 16.8.

They let us hook into the React state and life cycle methods from functional components.

Some commons Hooks are:

  • useState: return a value using a function to update it
  • useEffect: performs side effects. Eg: fetching API.
  • useRef
  • useCallback
  • useMemo
  • Custom Hooks


  • React Hooks start with keyword use
  • The component where we invoke Hooks must be named uppercase
  • We can only use Hooks inside a React Functional component, not a Class Component
  • Only call Hooks at the top level. Don’t call them inside loops, conditions or nested functions