React Hooks — useState & useEffect

As a software engineer, I practice frontend development by designing and creating projects that look similar to popular modern applications. When I first learned JavaScript and React, I created class components with state being in an object. The more I used React, I found myself creating functional components and using hooks to reuse state between components.

Traditionally, React doesn’t provide a method to create and implement “reusable behavior” to a component. According to React’s documentation, there are patterns like <render props> and <higher-order components> that attempt to solve this issue. However, these patterns may require the component hierarchy to be restructured, which can make the code difficult to follow.

With the use of Hooks, stateful logic can be reused without changing the component hierarchy.

Now that we have some basic knowledge about why hooks should be utilized in React, let's start with the useState Hook.

useState is a hook that’s called inside a functional component. This is the first hook that I became confident in and it’s easy to understand. Simply speaking, the useState hook adds a local state to the component.

useState returns the current state value and a function that lets you update the initial state value. For example:

In the example above, I created a Chats — functional component. I implement the useState hook by initializing an array with const. In the array goes two values, posts and setPosts. In this example, “posts” is the current state, and “setPosts” is the function that I can use to update the value of “posts”.

I’m sure you’ve noticed that there’s an empty array at the end. In this example, since I’m creating a state for “posts,” initially there will be no posts, since I’m still creating the app. The “posts” is meant to be a list of all the posts, and since initially there would be 0 posts, the argument required for the useState hook would be an empty array.

Another example would be to use the useState hook for a numerical value. Let’s say that in the above example, I wanted “posts” to start from 0. I will simply provide 0 as the argument required for the hook. So, instead of <useState([]);>, it will be <useState(0);>.

Let’s proceed to the useEffect Hook.

As a React developer, you’ve most likely worked with effects like fetching data and manipulating the DOM. The useEffect hook allows developers to perform effects from a function. According to the React documentation, useEffect serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount, combined.

When using the useEffect hook, React will run the “effect” function after every render. Let’s take a look at the example below for more clarification:

In the example above, I created a useEffect hook within my Chats- functional component. I’m using React in conjunction with Google Clouds — Firebase tool, hence the variable “db”.

Now the Chats component is a view component rendered in another, larger component. Chat’s responsibility is to contain all of the individual chat’s and organize them, with the useEffect hook.

I’m telling the useEffect hook to access the firebase backend database by calling “db”. Then I call “collection(‘posts’)” on “db” to access the collection of all the individual posts in the database.

Afterwards, I chain the “orderBy” command to order the list of posts by their timestamps and by descending (“desc”) order.

The following command, “onSnapshot” is a command I’m using in respect to the app I’m creating, which uses the webcam. So each post is, essentially, a snapshot picture when using the webcam. Therefore, the “onSnapshot” command is invoked each time I take a picture, and it’s implemented into the backend with the useEffect hook… subsequently organizing every post (which are essentially pictures) by descending order.

Hooks were definitely an obstacle for me when I started learning JavaScript and React, however with repetition and continuous review of the docs, I gained the confidence to comfortably use hooks during my development sessions.

Thank you so much for reading and I hope this article provided value to you. For further guidance, please refer to the React documentation, linked below.

Resources:

React Hooks Documentation(click to view documentation)