Hooks are a new functionality that was introduced in React 16.8 version. This tutorial on React Hooks helps you understand Hooks and how they function.
What Are React Hooks?
Hooks are a new functionality that was introduced in React 16.8. You can use state, and other React capabilities without writing a class. Hooks are React state and lifecycle features from function components that "hook into" hooks. They are also backward-compatible.
If you create a functional component and later wish to add any state to it, you must first convert it to a class. However, you can now incorporate a Hook into an existing function component.
When to Use Hooks?
If you are working on a web development project using React JS, and after coding a component function, you want to add some states. In such a scenario, you can use Hooks.
To add those states, earlier you would have to convert it to a class, and then you could perform a particular function, but now, by using Hooks, you can hook it to the existing function component.
Rules of Hooks
The functionalities and features of Hooks are similar to Javascript functions. However, before using them, you need to keep specific rules in mind, as these rules ensure that all the stateful logic in a functional component is visible in its source code.
Rule 1: Only Call Hooks at the Top Level
Hooks aren't supposed to be called from loops, conditions, or nested functions. At all times, hooks should be utilized at the top level of React methods. This rule ensures that Hooks are called in the same order each time a component renders.
Rule 2: Only Call Hooks from React Functions
Hooks can't be called from JavaScript functions. Hooks can be called from React function components instead. Custom Hooks can also be used to call Hooks.
Prerequisites for Using React Hooks
- You must have a Node version of 6 or above.
- You must have an NPM version of 5.2 and above.
- You must Create-react-app tool for running the React web applications.
React Hooks Installation
React Hook is an easy and lucid function for web development.
For running and executing Hook, you need to run the below command on your local machine:
|
$ npm install react@16.8.0-alpha.1 --save $ npm install react-dom@16.8.0-alpha.1 --save |
The above program will install the latest version of React JS and React-DOM alpha which can support Hooks. You also need to make sure that the package.json file lists the React and React-DOM dependencies as given in the following program:
|
"react": "^16.8.0-alpha.1", "react-dom": "^16.8.0-alpha.1", |
The State Hook
In this example, you will look at a simple Counter function that increments the value when the user clicks on the button.
In the App.js file of your application, consider the following code:
import React, { useState } from 'react';
function Counter() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click here
</button>
</div>
);
}
export default Counter;
Output:
In the above example, useState is the Hook. You call it inside a function component to add some local state to it. Between re-renders, React will keep this state. useState returns a pair of values: the current state and a function to update it. This function can be called from an event handler or from anywhere else. It's a lot like this.setState in a class, except that it does not merge the old and new states.
The Effect Hook
The Effect Hook, useEffect, adds the ability to perform side effects from a function component.
You tell React to run your "effect" code after flushing changes to the DOM when you call useEffect. Effects have access to the component's props and state because they are declared inside it. React runs the effects after every render by default, including the first one.
Consider the following piece of code.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example
Output:
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
Hope that this "React Hooks" tutorial has given you a better understanding of how hooks function. If you want to learn React and become a frontend developer, you should take a full-stack development course.
Simplilearn's React JS Training Course will teach you the essentials of React, a popular web framework for developing user interfaces, including JSX, props, state, and events. This Redux training course covers reducers, actions, and the state tree.
Do you have any questions that you'd want to ask us? If you have any suggestions or questions for us, please post them in the comments area. Our experts will get back to you as soon as possible!