{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/react-hooks-guide/","result":{"data":{"markdownRemark":{"id":"65ad665b-2a44-53a9-a3d2-a562dc3cea50","excerpt":"Overview I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers…","html":"

Overview

\n

I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers only an introduction to React Hooks. React Hooks have been introduced in React function components as a way of utilising state and side effects.

\n

Have you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred?

\n

Chances are there if you are a react developer, Hopefully we can solve this using the Hooks.

\n

What are Hooks?

\n

Hooks are features that allow you to “hook into” the features of React state and lifecycle from function components. Hooks do not function inside classes. Without classes, they let you use React.

\n
\n

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

\n
\n

Dan Abramov has provided a well-rounded introduction to the API, and how and why the framework that many of us use has evolved to where it is now. You can read about it and watch his ReactConf 2018 keynote introducing the hooks proposal.

\n

The key takeaway maybe this:

\n
\n

If the React community embraces hooks, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.

\n
\n

Benefits of React Hooks

\n

React Hooks enables the functional components to attach the local state to it, so that you can use React functionality without using a class component.

\n

Advantages of react hooks:

\n\n

A Practical View

\n

As you all know there are two ways to create the React components, one is using the function and other is using the class, there is always a confusion between one v/s other.

\n

Let us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.

\n

Component without Hook: Class Component

\n
import React, { Component } from "react";\nclass Greeting extends Component {\n  state = {\n    text: "",\n  };\n  handleChange = (e) => {\n    this.setState({ text: e.target.value });\n  };\n  render() {\n    return <input value={this.state.text} onChange={this.handleChange} />;\n  }\n}\nexport default Greeting;
\n

Components with Hook:Functional Component:

\n
import React, { useState } from "react";\nexport default () => {\n  const [text, setText] = useState("");\n  return (\n    <input\n      value={text}\n      onChange={(e) => {\n        setText(e.target.value);\n      }}\n    />\n  );\n};
\n
\n

If you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind!

\n
\n

Basics Of React Hooks

\n

Let us understand some basic hooks with examples.

\n
    \n
  1. useState()
    2. \n
  2. useEffect()
    3. \n
\n

I will take one example and will explain all the hooks in that example using a various scenarios.

\n

useState()

\n
import React, { useState } from 'react';\n\nconst App = () => {\n  const [message, setMessage] = useState('Hi there, how are you?');\n\n  return <h1>{message}</h1>\n};\n\nexport default App;
\n

In this example variable message will save the value Hi there, how are you using the useState() hooks. It will be similar to this code we write in the constructor() of class component.

\n
this.state = {\n    message: "Hi there, how are you?"\n}
\n
\n

If you are wondering about the setMessage @line 3 then be calm, I will explain later in this tutorial

\n
\n

useEffect()

\n

React useEffect() function can be executed in 3 different React component life cycles that are

\n
    \n
  1. componentDidMount
    2. \n
  2. componentDidUpdate
    3. \n
  3. componentWillUnmount
    4. \n
\n

Let's understand the useEffect() hook by taking the above example. So let's say I want to change the message 1 second after the component is mounted.

\n
import React, { useState, useEffect } from "react";\n\nconst App = () => {\n  const [message, setMessage] = useState("Hi there, how are you?");\n\n  useEffect(() => {\n    console.log("trigger use effect hook");\n\n    setTimeout(() => {\n      setMessage("I'm fine, thanks for asking.");\n    }, 1000);\n  });\n\n  return <h1>{message}</h1>;\n};\n\nexport default App;
\n

As you can see, In this example we have used the useEffect hook to trigger the setMessage method the change the message variable after 1 second.

\n

But there is one problem, while executing this component you can see that the console.log will trigger twice. The reason is the useEffect hook will by default trigger on change of either state or props similar to the componentDidUpdate method in our class component.

\n

To overcome this kind of case we need to pass the Empty array ([]) as the second argument in the useEffect hooks. So updated code will look like this

\n
import React, { useState, useEffect } from 'react';\n\nconst App = () => {\n  const [message, setMessage] = useState('Hi there, how are you?');\n\n  useEffect(() => {\n    console.log('trigger use effect hook');\n\n    setTimeout(() => {\n      setMessage("I'm fine, thanks for asking.");\n    }, 1000)\n  }, []);\n\n  return <h1>{message}</h1>\n};\n\nexport default App;
\n

The above code means that hook will never be triggered as we have an empty array there, if we want to trigger the hook on a specific variable change of props or state we can add that variable in the array.

\n

For eg : [state.message] here hook will fire on the update of message variable only.

\n

I have covered the two basic and important hooks in this tutorial, there are many more types of hooks available in React, you can find the detailed explanation in the React docs.

\n

The Rules of Hooks

\n
    \n
  1. Hooks can only be called at the Top Level, it can't be called inside the loops or condition or nested functions.
    2. \n
  2. Hooks can only be called in the React Function or Custom Hooks, never use hooks in the regular javascript function.
    3. \n
\n
\n

We can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules.

\n
\n

Conclusion

\n

So, from multiple points of view, we have covered the power of Hooks and seen how we can use controlled state in our Components without utilizing classes.

\n

I hope you find this article useful, Happy Reading !!!

\n","headings":[{"value":"Overview","depth":2},{"value":"What are Hooks?","depth":2},{"value":"Benefits of React Hooks","depth":2},{"value":"A Practical View","depth":3},{"value":"Component without Hook: Class Component","depth":4},{"value":"Components with Hook:Functional Component:","depth":4},{"value":"Basics Of React Hooks","depth":2},{"value":"useState()","depth":3},{"value":"useEffect()","depth":3},{"value":"The Rules of Hooks","depth":3},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/react-hooks-guide/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"A walkthrough guide on React Hooks, what is React Hooks, benefits of Hooks, and how to use Hooks in React and more.","title":"React Hooks: A Beginners Guide","canonical":null,"date":"August 07, 2020","updated_date":null,"tags":["React","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.36986301369863,"src":"/static/48f1a9f24091fba7929dcb79ec13b4fe/2ad7f/react-hooks.webp","srcSet":"/static/48f1a9f24091fba7929dcb79ec13b4fe/1c9b5/react-hooks.webp 200w,\n/static/48f1a9f24091fba7929dcb79ec13b4fe/f1752/react-hooks.webp 400w,\n/static/48f1a9f24091fba7929dcb79ec13b4fe/2ad7f/react-hooks.webp 800w,\n/static/48f1a9f24091fba7929dcb79ec13b4fe/e7405/react-hooks.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","bio":"Mohammed Modi is a software developer at LoginRadius and have an experience in working in most of the javascript framework including React, NodeJS, Angular etc.","avatar":null}}}},"pageContext":{"id":"65ad665b-2a44-53a9-a3d2-a562dc3cea50","fields__slug":"/engineering/react-hooks-guide/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}