Hooks in React

Introduction

When it comes to web development, who doesn't love using one of the most awesome and lively featured Javascript library, React, often referred to as ReactJS. Today we are going to know about of the most awesome feature of ReactJS' version 16.8.
Cutting the chase, I was introduced to the awesome world of React by my mentors at my current workplace, and since then I am after React and learning it as much as I can in a befitting manner. And no doubt, one of the most fascinating features to me was React Hooks.

What are hooks in React?

Hooks were introduced in React Version 16.8. One of their most awesome and well knows feature is it that they let you use state and other React features in a Functional Component.
So Basically, Hooks are the functions which literally, Hook Into, React state, and lifecycle features from functional components.

How Hooks work?

Before we know how React hooks work, let us define what closure is. “Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.”

To make it a bit easy to understand, hooks let you use the functions instead of switching between HOCs, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one.

Always remember

• Hooks should always be called at the Top Level.

By following this rule, you are making sure that Hooks are always called in the same order as they were declared each time your component renders. (Remember that don't ever call the hooks inside the functions that are nested and also inside the loops.)

• Hooks should always be called from React Functions. Don't call Hooks from regular JavaScript functions. Instead, you can

1. Call Hooks from React Function components.
2. Call Hooks from custom Hooks.

Can't quench your thirst for learning more about hooks in react? Stay tuned for more articles on types, examples, usages, and other aspects of mastering the art of using hooks in React.

Comments

[Cooper Riehl]

Good article! I'm new to React, so I would love to see an actual code example of a Hook and how to use it.

[Mursal Furqan Kumbhar]

My next article would feature some real-life code examples. Hit the follow button to stay tuned :)

[Yogesh Chavan]

@cariehl check out this article for React Hooks with actual code examples

[Cooper Riehl]

Thanks for your article, @myogeshchavan97 ! This was a great explanation.

So from what I understand, React Hooks provide a way to do certain things in functional components, which were previously only possible in class components. Is that about right?

[Yogesh Chavan]

Thanks. With the addition of React Hooks, there is now no difference between class components and functional components.

You can do everything in the functional component that the class components offered.

The only difference between them is that there are no available hooks for getSnapshotBeforeUpdate, getDerivedStateFromError and componentDidCatch lifecycle method of class components.

So If you need to use these lifecycle methods, you need to use class components instead of functional components