paint-brush
React Hooks 101: useState and useEffectby@Vieira
2,737 reads
2,737 reads

React Hooks 101: useState and useEffect

by AmandaFebruary 2nd, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

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

Mention Thumbnail
Mention Thumbnail
featured image - React Hooks 101: useState and useEffect
Amanda HackerNoon profile picture

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.

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],
          });
  };

Always remember to import the function you wanna use your file:

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');
  }

Applying useEffect:

const getSomeUrl = () => {
  const res = axios.get('some_url')
}
useEffect(() => {
  getSomeUrl(); 
});

Importing useEffect in the top of your file:

import React, { useEffect} from 'react';

That was a very simple explanation about two functions presents in Reach Hooks. You can check more in the official documentation here.