A Glance at React Hooks
Hooks are actually a new addition to React 16.8. The great thing about this new addition is that it allows programmers to use state and other React features without writing a class, but instead, writing a functional component.
And don’t worry! Classes will still exist and you do NOT need to rewrite your entire application to implement Hooks. This just provides a better way of writing React concepts such as props, state, lifecycle, etc.
This will just be an introduction to Hooks so I will be covering a few examples and if you’d like to see more here is a link to the React Document.
Why would we use React Hooks?
Most React applications contain:
- Many wrappers
- Layers of higher-order components
- Layers of render props
- Duplicated logic
- You can make your own (How awesome is that?!)
Complex components become more difficult to understand. Related code can end up getting split apart or completely unrelated code can end up in the same method.
“Hooks allow you to reuse stateful logic without changing your component hierarchy…Hooks let you split one component into smaller functions based on what pieces are related” -reactjs.org
Basically, Hooks will let you use React’s feature without a class.
Now let’s code!
Let’s start with our first Hook
useState — Since there is no this in functional components, useState is used to declare a state variable. This Hook returns a pair of values in the form of an array of two items: the current state value and the function that lets you update it. This is the equivalence of this.state. Unlike classes, the state doesn’t have to be an object. My state variable in the following code is count and its value is 0.
Example using function:
import React, { useState } from 'react';function CountFruit() { // Declare state variables with current value and function to update it! const [count, setCount] = useState(0); return (
<div>
<h1>You have {count} fruit snack(s)</h1>
<button onClick={() => setCount(count + 1)}>
More Fruit Snacks
</button>
</div>
);
}
If the “array destructuring” version of const [count, setCount] = useState(0) confuses you, here is the same code without destructuring:
var countStateVariable = useState(0); // Returns a pair
var count = countStateVariable[0]; // First item in a pair
var setCount = countStateVariable[1]; // Second item in a pair
In this example, the count variable starts at 0 and state.count increments every time the button is clicked.
Example using class:
class CountFruit extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<h1>You have {this.state.count} fruit snack(s)</h1>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
More Fruit Snacks
</button>
</div>
);
}
}Our second hook will be…
useEffect — This Hook allows you to perform “side effects” on a function. Side effects are typically performed after the DOM has updated and are typically put in componentDidMount and componentDidUpdate. Fetching and altering the DOM are examples of side effects commonly executed.
Using the counting fruit example, we are going to update the header after React makes changes to the DOM.
Example using class:
import React from 'react'class CountFruit extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}componentDidMount() {
document.header = `You have {this.state.count} fruit snack(s)`;
} render() {
return (
<div>
<h1>You have {this.state.count} fruit snack(s)</h1>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
More Fruit Snacks
</button>
</div>
);
}
}
Example using function:
import React, { useState } from 'react';function CountFruit() {const [count, setCount] = useState(0);useEffect(() => {
document.title = `You clicked ${count} times`;
}); return (
<div>
<h1>You have {count} fruit snack(s)</h1>
<button onClick={() => setCount(count + 1)}>
More Fruit Snacks
</button>
</div>
);
}
By using this Hook, you are telling React that your component needs to do something after the render.
There are some drawbacks of Hooks:
- Can only be used at the top-level
- Cannot be called inside loops or conditions
- Cannot be called inside classes
These are only a very, very small part of React Hooks and I would encourage you to read more about them, experiment with them, and implement them into your code! Maybe even try building your own Hooks.
~Happy coding~
