DEV Community

Sai Chandu
Sai Chandu

Posted on

React: Hooks

Welcome all for another topic in React is Hooks.

What are Hooks?
React Hooks are like JavaScript functions that we can use to isolate the reusable part from a functional component.

Hooks can be stateful and can manage side-effects.

Image description
Hooks are like different coffee cups that are used for different purposes. Just like different hooks use for differnt purpose in React.

The Different types of Hooks are:

  1. UseState()
  2. UseEffect()
  3. UseReducer()
  4. UseContext()
  5. UseRef()

Now, we will see how these hooks works in different cases.

  1. UseState(): It allows to add state to functional components.

Image description

2.UseEffect(): It allows to perform side effects in your components. Side Effects like: fetching data,directly updating the DOM, and timers.

Image description
3.UseReducer():It is similar to useState Hook.It is mainly used to handle complex state updates. It means if there are two state updates of similar type with slight change, we can combine them to single state known as useReducer().

Image description
4.UseContext: The main reason for using this UseContext is to centralize the state. It avoids props drilling.

Image description
5.UseRef: It allows you to access the elements and its inner values mainly for inputs and manipulate them.

Image description

Hope you guys enjoy learning about Hooks.
Meet u with more topics🤠

Top comments (0)