In this blog, we are going to learn the introduction of Hooks in React JS and also discussing the rules of using hooks in React JS.


  • Class based components
  • Life Cycle Methods
  • Function based components
  • State
  • Props
  • Arrow Function
  • Event Handling
  • Basics Of React JS


  • It allows you to use state and other React features without writing a class.
  • Hooks allow function components to have access to state and other React features like life cycle methods.
  • Because of this, class components are generally no longer needed.
  • Hooks were added to React in version 16.8 (February 16, 2019)
  • React release date: May 29, 2013
  • Although Hooks generally replace class components, there are no plans to remove classes from React.
  • Hooks are additional feature in react, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

What is a Hook In React?

  • Hooks are basically functions.
  • Hooks allow us to “hook” into React features such as state and lifecycle methods.

Rules Of Using Hooks

  • Hooks can only be called inside React function components.
  • Hooks can only be called at the top level of a component.
  • We should not call Hooks inside loops, conditions or nested functions.
  • Only call Hooks from React functions, we should not call Hooks from regular JavaScript functions.
  • Hooks cannot be conditional.
  • React relies on the order in which Hooks are called.
  • Hooks are not used for class based components.

Custom Hooks

If you have stateful logic that needs to be reused in several components, you can build your own custom Hooks.

When to use React Hooks?

  • If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class.
  • But, now you can do it by using a Hook inside the existing function component.

Hooks Available In React JS

There are lots of built in Hooks are available.

  • useState
  • useEffect
  • useContext
  • useRef
  • useReducer
  • useCallback
  • useMemo
  • Custom Hooks

Click Below Link to Download Notes & Source Code Of This Blog

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *