DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Hooks in React
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on • Updated on

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.

Top comments (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 on

@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 Kumbhar Author

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

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!