React: Using State Within An Arrow Function Component

When building React applications, my components would consist of a mixture of React Function and Class components. As much as I love to use React Function components due to their simple, lightweight and concise code construction, I had a misconception they were limited in features.

React Function components are generally classed as "stateless" where I would go as far as to send props (if required) and return the rendered output in HTML. So whenever there was a need for some form of interaction where state was required, a Class component would be used.

It was only until recently I was made aware of React Hooks that allowed React Function components to have state. Let's take a look at a simple example where we are increasing and decreasing a number.

import React, { useState } from 'react';

const CounterApp = () => {
  const [state, setState] = useState({
    count: 0
  });  

  const incrementCount = () => {
    setState({
      count: state.count + 1,
    });
  }

  const decrementCount = () => {
    setState({
      count: state.count - 1,
    });
  }

  return (
    <div>
      <h1>{state.count}</h1>

      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
};

export default CounterApp;

In the code above we have accomplished two things:

1. Storing our counter in state.
2. Click handlers

The useState() hook declaration accepts properties in the way we are accustomed to when used in a Class component. The similarity doesn't stop there, you'll also notice the same approach when setting and getting a state property.

Multiple states can also be declared and through the array destructuring syntax lets us give different names to the state variables we declared by calling useState. Really cool!

const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Even though this post has concentrated on state, I've found React Function components offer similar features as a Class component. This is how I will be building my components going forward.