In this lesson, we will learn more about Hooks in React. So far, we have been creating components using functions or classes.

Hooks in React. The latest feature since React 16.8

Class-based components are a little bit complex but the only way to use states and lifecycles. You have to create a boilerplate code to maintain the states and bind functions, and then there are methods like componentDidMount, UnMount, etc. If you are creating a large app with a few numbers of forms, creating and maintaining states through classes could be a real pain.

Classes in JavaScript is a relatively confusing topic and it leads to more confusion in React and was acting as a larger barrier to learning React.

With the release of React version 16.8.0, Facebook developers introduced Hooks. A completely new way of using states/properties without classes.

You can try Hooks without re-writing the existing code as these are 100% backward-compatible and doesn’t cause any code to crash.

So what is a Hook?

A Hook is a function that allows you “hook into” React state and features of the lifecycle from the function-based components. Hooks don’t work inside the classes.

React has a few built-in Hooks like useState, useEffect that we are going to explore in this lesson.

Tips: You don’t have to re-write existing React code in hooks as Facebook will continue to support class-based components.

Understanding the difference

Let’s create a class for React component that maintains a single variable as a state and every time user clicks on the button, the value of the state will be incremented by 1.
The code for the class-based component will look something as:

import React, {
	Component
} from 'react'
import './style.css'
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}

	render() {
		return ( <div className = "white-box" >

			<p> You clicked {
				this.state.count
			}
			times </p> <button onClick = {
				() => this.setState({
					count: this.state.count + 1
				})
			} >
			Click me </button> 
                        </div>
		);
	}
}
export default App;

To create a hook that does a similar function without classes, you need to import useState from react.

import React, { Component, useState } from 'react'

Create a function ‘App’ that renders the hook.

function App() {

	return (

	);
}
export default App;

The useState hook replaces for setState. The API allows you to declare a state variable and set it with one call.

const [count, setCount] = useState(0);

This statement defines a state variable count and a setter function setCount with the default value set to 0. Because of this single statement, there is no need for declaring classes or binding related functions.
In return function, you will render the button and associate a function that increments the variable count with every click.

return ( <div>
	<p> You clicked {
		count
	}
	times < /p> <button onClick = {
		() => setCount(count + 1)
	} >
	Click me </button> 
        </div>
);

The complete code will be as following:

App.js

import React, {
	Component,
	useState
} from 'react'
import './style.css'

function App() {

	const [count, setCount] = useState(0);

	return ( <div>
		<p> You clicked {
			count
		}
		times </p> <button onClick = {
			() => setCount(count + 1)
		} >
		Click me </button> 
                 </div>
	);
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

That’s it. We are done.

Hooks are still in the development phase and probably we will see more built-in hooks in the future. For practice, create a React component that takes an input from the user and keep adding the input into an array and console log that array. You can use useState hook to create this component.

If you have any question, feel free to leave it in the comments section below.

React and PHP << Tutorial Home
Last modified: September 26, 2019

Comments

Write a Reply or Comment

Your email address will not be published.