The Hooks System In React

Hooks are features introduced in React in version 16.8. It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.

How to use it?

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.

There are 2 rules when using hooks:

1- Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component renders.

2- Do not call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components.

Basic Hooks

Hooks State
Hook state is the new way of declaring a state in React app. Hook uses useState() functional component for setting and retrieving state.

Hooks Effect

The Effect Hook allows us to perform side effects (an action) in the function components. It does not use components lifecycle methods that are available in class components. In other words, Effects Hooks are equivalent to componentDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycle methods.

Custom Hooks

A custom Hook is a JavaScript function. The name of custom Hook starts with “use” which can call other Hooks. A custom Hook is just like a regular function, and the word “use” in the beginning tells that this function follows the rules of Hooks. Building custom Hooks allows you to extract component logic into reusable functions.

To introduce how to use hooks let's create a demo application and use one of the previews hooks I mentioned before.

to create the app you need to run the following

npx create-react-app CountApp

After this app is created just change the name of the function is you like. For this example, I changed the name to:

function CountApp() {
return (
<div className="App">
<p> hello world</p>
</div>
);
}
export default CountApp;

run npm start to run the app and when it does right now will show a hello world.

Let's import the hooks we are going to use from React.

import React, { useState } from 'react';
function CountApp() {
return (
<div className="App">
<p> hello world</p>
</div>
);
}
export default CountApp;

In the above example, useState is the Hook which needs to call inside a function component to add some local state to it. The useState is similar to this.setState in a class component. The equivalent code with Hooks looks like as below.

in the next example, I'm going to create a variable COUNT with an initial value of 0 and we will be updated using the setCount every time we click the button to trigger the event handler OnClick.

import React, { useState } from 'react';

function CountApp() {
const [count, setCount] = useState(0);
return (
<div className="App">
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CountApp;

This may look like this:

Every time you click on the button the counter will increase. This is how you use the useState hook. Thank you and happy coding.