visit
React Hooks 101: useState and useEffect by@Vieira
2,741 reads
React Hooks 101: useState and useEffect
by AmandaFebruary 2nd, 2020
Too Long; Didn't Read
React Hooks is a proposal to make development with React more flexible, bridging the gap between stateful and stateless components. With Hooks you can add states in a functional stateless component. The useState method takes a parameter, which is the State's initial value, and returns two properties in an array, the State itself and the method used to update it. Hooks are some methods that give more power to your stateless. components, like own and independent states, some lifecicles, subscription, logic sharing, reducers and etc.Companies Mentioned
React components are simply functions. Some are created with classes, better known as stateful and / or class components, and the others are created with functions only, also known as stateless and/or functional components.Always remember to import the function you wanna use your file:Applying useEffect:Importing useEffect in the top of your file:That was a very simple explanation about two functions presents in Reach Hooks. You can check more in the official documentation .
In addition to having different syntaxes, stateful components have some more functionality, such as state, lifecicles, constructor, this and etc., while stateless components have always been more used to create 'dumbs components', just for display, without much logic involved.
But that has been changing since the arrival of the React Hooks, which is a proposal to facilitate and make development with React more flexible, bridging the gap between stateful and stateless components.What is React Hooks?
In short: React Hooks are some methods that give more power to your stateless components, like own and independent states, some lifecicles, subscription, logic sharing, reducers and etc. This article will explain two functions presents in React Hooks:- useState;
- useEffect;
useState
The most basic function of React Hooks is useState. With it you can add states in a functional stateless component. The useState method takes a parameter, which is the State's initial value, and returns two properties in an array, the first is the State itself and the second is the method used to update it.Here some example how you use state without React Hooks:
class BookForm extends React.Component {
const categories = ['Action', 'Biography', 'History', 'Horror', 'Kids']
constructor(props) {
super(props);
this.state = {
title: '',
category: categories[0],
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}}With React Hooks:
const BooksForm = () => {
const categories = ['Action', 'Biography', 'History', 'Horror', 'Kids']
const [state, setState] = useState({
title: '',
category: categories[0],
});
};import React, { useState } from "react";useEffect
The useEffects method is always called when the component is assembled and updated. With it you can replace the componentDidMount, componentDidUpdate and componentWillUnmount lifecicles. It executes the function inside it and has an optional second parameter, which is an array of properties to be observed within the scope of the stateless component. Whenever any of them are updated, the function is executed again.Here's an example using componentDidMount: async componentDidMount() {
const res = await axios.get('some_url');
}const getSomeUrl = () => {
const res = axios.get('some_url')
}
useEffect(() => {
getSomeUrl();
});import React, { useEffect} from 'react';L O A D I N G
. . . comments & more!
. . . comments & more!
About Author
TOPICS
RELATED STORIES
10 Useful JavaScript Functions to Learn #javascript
Aug 28, 2021
