ReactJs: A (Java) Developers sojourn-useState Hook

It has really been an interesting 2020! In all, I hope you all are doing and keeping well. 😉

ReactJs: A (Java) Developers sojourn

Today, we continue with my journey with ReactJs and specifically looking at Hooks and answering questions like

• what Hooks are;
• why should you care;
• how do we migrate existing class to functions with useStateHook?
• And in our tradition, we will also show an example.

React Hook(s)

Hook(s) was introduced in React 16.8. The reason for its introduction is to make state and lifecycle management in our React applications easier and without the need for a class 😮

So what is it exactly 🙄 🤔

Hooks are functions that let you “hook into” React state and lifecycle features from function components.

What does this really mean 🤷‍♂

First off, let us remind ourselves what both function and class components looks like in React

//Function component
import React from "react"
function FunctionComponent(props) {
   return(
     <div>
       <h1>I am a function component</h1>
     </div>
   )
}
// Class component
import React from "react"
class ClassComponent extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
         data: {}
     };
  }
  //function(s) and or lifecycle method calls
  
  render() {
    return (
      <FunctionComponent />
    )
  }
}

From our above FuctionComponent and ClassComponentcomponents, you will notice we needed a class component in order to manage the state of our data, we needed to declare a data state variable.

With hooks, we do not need to write a class component just for this purpose. All we need to do is to import the useState hook from React.

The below code snippet demonstrates what this would look like

// function components with hooks
import React, { useState } from "react"
function FunctionComponentWithHooks(props) {
  //Declare a state variable of data
  const [data, setData] = useState({});
}

Ok!! Let us break down FunctionComponentWithHooks

• first we import useState
• next, we call, useState to initialize data to an empty map. This is similar to this.state{ data: {}} in a class
• now, useState() will return the current state — this.stateand the function that updates it — this.state.data.

Alright, I hear you….

An example 🕺 💃

For our example, we will be using the initial project created in the previous post and making the Search class a stateful function component.

Search class

In our Search class, we are keeping track of four states

• searchText. Text inputted by the user;
• isOrganizationSearchChecked. When ticked our application performs a search using GitHub’s orgs API;
• isLoading. Tells the application when a search is being performed; and
• data. Our search results from either GitHub’s users or orgs API.

Now, let's make this class a stateful function with the help of useState

Search class as a stateful function

Phew!!

So far we have focussed on only one of the React Hooks — useState. Other hooks include

• useEffect. Used in place of the regular lifecycle methods such as componentDidMount, componentDidUpdate and others;
• useContext. Lets us subscribe to React context without introducing nesting; and
• Custom Hooks. This can be created by prefixing the name with use. This is needed when we want to reuse some stateful logic between components.

As is our custom, the code for today's post is available from useState-hooks branch here