Let’s deep dive into React Hooks!

Why were these Hooks made?

You all heard about the class Component in React. In that component, we define the state, fetch API using componentDidMount, componentDidUpdate, and componentWillUnmountwhere we all write the complex class component for these things and that time Developers use the functional component very rarely but Hooks came in to the picture then the functional component demand is increasing. And this time functional component using with Hooks is very easy to use.

What is Hooks?

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. There are many hooks but we discuss the two or three hooks here.

• UseState
• UseEffect
• UseContext

When would I use a Hook?

If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.

What is State Hooks and How we define the State Hooks?

useState is a hook we call it inside a functional component where we defined the local state in it. React will preserve the state between re renders. useState returns a pair of current state value and function lets you update the current state. We define the state hook below:

What is Effect Hooks and How we define the Effect Hooks?

The Effect Hook, useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes, but unified into a single API. when you call useEffect then you have to tell the react to run your “effect” function after re-render. we define the effect hook below:

What is Context Hook and How we define the Context Hooks?

Accepts a context object and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree. we define the context hook below:

Rules for using Hooks

• Call Hooks in top level. Don’t call inside the loops, conditions, or nested functions.
• Only call Hooks from React functional components. Don’t call Hooks from regular Javascript function.

Conclusion

Using the React functional component with Hooks is very less than lines of code comparison to Class Component and Using hooks helped us in improving our design pattern of our code and performance of our app, and we encourage you to use it in your projects too. Kindly reach out to me for any queries.

Hope you find this article useful. Happy Learning!