No More Classes!

Back in October 2018, the React team released a version of React that we can now safely say was one of the most important releases in the short history of React. They released a new feature called React Hooks—a new way that we can use to manage our state application very easily, removing the classes from our components, so we can have more concise code and split our state logic.

In our React applications before React Hooks, to manage our state we would have class components. For example, if we wanted to create a state to have a counter, this is how we would do it:

1. First, we would create our component, and our state would be a simple counter.

class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     counter: 0
   };
 }
 render() {
   return (
     <div>
       <h1>counter: {this.state.counter}</h1>
     </div>
   );
 }
}

2. Then, we would create two functions: one to increment the counter and other to decrement the counter.

incrementCounter = () => {
 this.setState(prevState => {
   return {
     counter: prevState.counter + 1
   };
 });
};
decrementCounter = () => {
 this.setState(prevState => {
   return {
     counter: prevState.counter - 1
   };
 });
};

3. After that, we would create two buttons that would trigger each function, and increment or decrement our counter depending on the button.

<button onClick={this.incrementCounter}>+</button>
<button onClick={this.decrementCounter}>-</button>

A lot of people were against this approach of having to create classes to deal with our state in React. They were in favor of something classier and cleaner. The solution that the React team found for it? React Hooks.

With React Hooks we can replace all our class components in our applications with functional components, which means: no more class components! We’re now able to use function components in our applications without having to create a single class component to manage our state.

The hook that we use to manage our state is the useState hook. First, we import the useState hook from React.

import React, { useState } from "react";

The useState hook takes an initial state as an argument, and it returns an array with two elements: the state and the updater function.

const [counter, setCounter] = useState(0); 

So, now, all we have to do is call the setCounter updater function to update our counter state. Magic!

import React, { useState } from "react";
const App = () => {
 const [counter, setCounter] = useState(0);
 return (
   <div>
     <h1>counter: {counter}</h1>
     <button onClick={() => setCounter(counter + 1)}>+</button>
     <button onClick={() => setCounter(counter - 1)}>-</button>
   </div>
 );
};

This is a quick recap of React Hooks. If you want to learn more about them, I’d really recommend you read the documentation and practice.

Now that we’ve covered the background of React Hooks.

Happy Coding,

Bekir Aytac AGMA
Comp. Eng.