DEV Community

loading...
Cover image for Hooks in React

Hooks in React

Mursal Furqan
A CS Engineering graduate with grave interest and knowledge in programming and logic building. An ML Engineer and DS with extensive hands-on experience contributing to several open-source cod
・Updated on ・2 min read

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.

Discussion (5)

Collapse
cariehl profile image
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.

Collapse
myogeshchavan97 profile image
Yogesh Chavan • Edited

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

Collapse
cariehl profile image
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?

Thread Thread
myogeshchavan97 profile image
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

Collapse
mursalfk profile image
Mursal Furqan Author

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