ReactJS 101: React Hooks
Here we are going to learn how to use React Hooks by making a counter in ReactJS and what is the difference and the advantages of it compared to the use of classes.
What is Hooks?
Hooks are the addition in React 16.8. They let you use state and other React features without writing a class. -ReactJS.org
Hooks are an API of the React library that allows us to have state, and other React characteristics, in the components created with a function. This was not possible before and forced us to create a component with class to access all the possibilities of the library. And that’s where the name comes from.
Hooks are hooks (obviusly), and precisely what they do is that they allow you to hook your functional components to all the features that React offers.
Pre-Requierements:
- Visual Studio Code
- Half an hour
Step By Step Guide
Let’s first create the react counter using classes.
- Create a folder for your app, with the name you want
2. Open the Visual Studio Code
3. Write this code in the Terminal to create a project in the assigned directory
npx create-react-app ./4. Delete everything in the src folder, except for index.js and index.css
5. Go to the Index.js and delete all the code except for this lines.
import React from 'react';import ReactDOM from 'react-dom';import './index.css';
6. Now we are going to extend from the React.Component class, to which we add an initial state that is going to be the counter with an initial value of zero.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component {
state = { counter: 0}
}
7.We add the return method so that it returns the elements we want from our component. In this case we add a div with a span that shows the initial value of the component. In this case, it is zero.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';class App extends React.Component {
state = { counter: 0}render () {
return (
<div>
<span>Counter Value: {this.state.counter}</span>
)
}
}
8. Now, to update the counter status, add a button. Each time the button is clicked, the local state of the counter will increase one by one, using this.setState.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';class App extends React.Component {
state = { counter: 0}render () {
return (
<div>
<span>Counter Value: {this.state.counter}</span><button onClick={() => this.setState({ counter: this.state.counter + 1})} >
Increment Counter
</button></div>
)
}
}
9. To make the application more interactive, add a button to decrease the counter.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';class App extends React.Component {
state = { counter: 0}render () {
return (<div>
<span>Counter Value: {this.state.counter}</span><button onClick={() => this.setState({ counter: this.state.counter + 1})} >
Increment Counter
</button><button onClick={() => this.setState({ counter: this.state.counter - 1})} >
Decrement Counter
</button></div>)
}
}
10. Add these lines in bold to the end of the code to use Dom to render the component
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';class App extends React.Component {
state = { counter: 0}render () {
return (<div>
<span>Counter Value: {this.state.counter}</span><button onClick={() => this.setState({ counter: this.state.counter + 1})} >
Increment Counter
</button><button onClick={() => this.setState({ counter: this.state.counter - 1})} >
Decrement Counter
</button></div>)
}
}const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
11. type npm start in the terminal to see this on your browser
Now we are going to do the same, but using Hooks.
12. Now, if we don’t want them to work locally, we must do functions. Comment all the code an create a counter function
function Counter() {
}13. We import useState, the hook to create a state in our component
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';function Counter() {
}
14. In order to execute it, we have to pass it a parameter. In this case, the counter will start at zero. We added a two position array. The first position on the left will have the value of our state, and the second position will have a method that, when called, we can pass the new value of the state as a value.
import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0)
}
15. Similar to what was done previously, we add the return method so that it returns the elements we want from our component. In this case we add a div that shows the initial value of the component. In this case, it is zero. You can notice the difference that we can directly call the variable count
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';function Counter() {
const [count, setCount] = useState(0) return (
<div>
<p>Counter Value: {count} </p>
</div>
)
}
16. Now, to update the counter status, add a button. Each time the button is clicked, the local state of the counter will increase one by one, using the method setCount insted of this.setState.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';function Counter() {
const [count, setCount] = useState(0) return (
<div>
<span>Counter Value: {count} </span>
<button onClick={() => setCount(count + 1)}>
Increment Counter
</button>
</div>
)
}
17. To make the application more interactive, add a button to decrease the counter.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';function Counter() {
const [count, setCount] = useState(0)return (
<div>
<span>Counter Value: {count} </span>
<button onClick={() => setCount(count + 1)}>
Increment Counter
</button>
<button onClick={() => setCount(count - 1)}>
Decrement Counter
</button>
</div>
)
}
18. Add these lines in bold to the end of the code to use Dom to render the component
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './index.css';function Counter() {
const [count, setCount] = useState(0)return (
<div>
<span>Counter Value: {count} </span>
<button onClick={() => setCount(count + 1)}>
Increment Counter
</button>
<button onClick={() => setCount(count - 1)}>
Decrement Counter
</button>
</div>
)
}const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);
11. type npm start in the terminal to see this on your browser.
As you can see, the result is exactly the same.
To clarify, what are the advantages of using Hook instead of classes?
If we use Babel as a decompiler, we can see the number of lines and the passes to decompile.
Component using Classes:
Component using Hooks:
From this we can observe several things.
1- With Hooks, the decompilation is much shorter. The decompiled code of hooks in javascript has 68% less lines that the decompiled code of classes in javascript (38 lines with classes and 26 lines with hooks) and the code takes up less physical space.
2- Hooks uses Cache memory, which allows faster access to data.
3- There are fewer data passages using Hooks than classes, which decreases the data processing time in memory.
Another advantages are:
4- With Hooks, developers can create they own hooks using Custom Hooks, which removes the need to complicate components and program declaratively.
You can learn more about Hooks in the official documentation.
References
