React Hooks 101: useState and useEffect

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.