Introducing Hooks and adding state to Function Components

A new way of thinking React

As good React.js developers, we all know that a function component by itself cannot have its own state nor have life cycle methods associated with it.

In order to do so without the use of extra features, we would need to pass whatever data we get from that function component to a parent class component, and get it back in the form of props.

Another way of bypass this extra step would be by changing our Function Component to a Class Component and voila! You would have access to all states and life cycle methods you want, but by doing that you would lose a few benefits of using Functional Components like:

1. Much easier to readability and tests because they are plain JavaScript functions, so you end up with less code.
2. Best practices. It will get easier to separate container and presentational components as well as been more specific about each functionality in your app.
3. Performance boost. Functional components render a lot faster than Class components because they take less space in memory.

So how would we keep the same Function structure, but gain the benefits from having a Class component?

And the answer is ‘React Hooks’.

React Hooks are functions that let us hook into the React state and lifecycle features from function components.

Let’s got through implementing one of the Hooks in our project called useState working step by step:

First, let’s create our Function Component. Let's assume we need a form on our LoginPage.js that only takes the user’s name and sends it that to a Parent component that will handle that data:

This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works.

But in most cases, it’s convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called “controlled components”. In order to achieve that we need to keep track of our state and that’s when React Hooks comes to play.

import React, { useState } from 'react'

By only adding a few extra lines of code to your file, you get some of the same functionalities that Classes have. Let’s import a function called useState from 'react' and use that to create both our state and the function that changes the state.

Now that we created our state, let’s make our Component updated it every time we change the value inside our input.

And because Hooks allow us to give our own state variables and functions names, we can shorten our code and make it more readable.

Now you probably might be asking yourself: “What if I want to add more states to my Function Component?”

That’s easy! just follow the same steps above and create a new state and a new function to change the state.

Now let’s make it DRY by removing onChange from each input, adding that as a property for the whole form and add a condition to the handleChange function to recognize each input.

And our end result is a function that governs the data going into them on every onChange event, rather than grabbing the data only once.

*setState is an asynchronous Function