React – How to convert to Hooks – State

I’ve recently started a new project using React and I began in my usual manner -mostly by using class components. But I’ve since decided to embrace Hooks and I’ve tried to convert my current classes into functional components.

Firstly I’ve tackled State – one of the key functionalities of React. Hooks makes state much easier to declare by removing some of the previous boilerplate of including a constructor, which in my opinion makes the code much more readable.

The below code considers an input field that is used to dynamically filter an array by storing keystrokes into the component’s state:

Pre-Hooks Code

Hooks

The above code is dependent on the following input field:

What’s the difference?

Hooks allows you to give a functional component its own state, something that wasn’t available previously.

As noted, Hooks removes the previous boilerplate we’d need to create a component’s state. Now we can just define an inputFilter entry by using the ‘useState‘ method and passing it in a default value (here an empty string). Note, however, that we first need to import the ‘useState’ hook from the React library:

When setting up our ‘inputFilter‘ state entry we also need to define a way to update that entry (here we’ve called this ‘setInputFilter‘). This is a function that is used to update our state.

In the code above, the initial state of inputFilter is set to an empty string. When a user starts typing into the input field the function ‘itemFilter’ is called. This then passes the typing event to the itemFilter function as a parameter (defined as ‘event’) which is then translated into the actual characters typed by the user (denoted by the code ‘event.target.value.toLowerCase()’)

So our keystrokes have been passed to the function setInputFilter and those characters are then used to set the value of our inputFilter element in our state. This is all we’ve needed to do to create and update our Hooks based state!

Other things to note

This example is when you’re updating state that only has one value. However, an important point to raise is when the state element is an object or an array. With hooks, using the updating function we’ll be overwriting our state element rather than appending to it as would have been the case without using hooks. So in this instance if we want to update only a portion of an object or an array, we’d need to use the ES6 spread operator to maintain those other pieces of information.

So, in our application if our state object is modified to include 2 separate filters, ‘filter1‘ and ‘filter2’ like below and we changed our setInputFilter function to update only filter1…

…then this overwrites our previous value for filter2:

…and it’s lost. This can be very dangerous for losing elements of your state!

This wouldn’t have been the case without using hooks as setState({}) only amended the variable you wished to update.

Instead, we use the spread operator to maintain other pieces of state, only updating the value that we want:

Conclusion

As previously noted, I believe Hooks has lead to more readable code for creating and updating state. This makes it a lot more intuitive for new developers and also reduces the pain that some may have faced when their previously stateless functional component then requires state.

But be careful when updating objects or arrays. Use the spread operator to maintain pieces of state that you didn’t want to alter!

Further resources:

1. React Docs
2. Hacker Noon article by Manisha
3. A great article providing 4 useState examples by Dave Ceddia