Hooked on React

When I was first introduced to React, I found that I had a much harder time adjusting to the new framework than I had with Ruby and vanilla JavaScript. I was not only overwhelmed by the new logic and setup of React, but also by the sheer number of different ways I could go about building an app.

Now that I’ve gotten more comfortable with its logic and syntax, I’ve grown to love its versatility and truly enjoy the process of planning and building my apps.

Functional Components Vs. Class Components

One of the quirks of building a React app is choosing whether to use functional components or class components. Class components are written as JavaScript classes and include helpful React features such as lifecycle methods and state. Functional components are written as JavaScript functions but do not include the same helpful features that class components do.

When I first started working with React I had an inexplicable preference for class components, but I quickly learned that, despite their lack of special React features, functional components are cleaner, DRYer, and more easily refactored. In addition to this, I learned that functional components can actually have many of the same functionalities as class components in the form of hooks.

What are React Hooks?

React hooks allow you to use react features that ordinarily would only be used inside of class components inside of functional components.

Using the State Hook Example 1

Functional

Functional Component Using State Hook Example 1

To write a functional component that uses state, first, add { useState } (the hook) to the react import at the top of the file. In the above example, a variable is created called [likes, setLikes], and is set to useState(0). In summary, likes is set to the value declared in useState() (which is 0 in this case), and setLikes is a function created to set likes to a new value, as demonstrated on line 10.

Class

Class Component Using State Example 1

Although using state in a class component gives us essentially the same functionality, using state in a functional component is more readable and concise.

Using the State Hook Example 2

Functional

Functional Component Using State Example 2

In the above example, a pizza object and an setPizza function are created and the pizza object is set to a toppings object inside of the useState() funciton. On line 11, the toppings object is set to the value of whatever the user inputs into the form field.

Class

Class Component Using State Example 2

Similar to example 1, we are able to create the same functionality in far fewer lines and in a much cleaner and more concise way.

What Does the DOM look like?

made with ezgif

As demonstrated in the above gif, each component functions in exactly the same way as its counterpart. At this point, it all comes down to a matter of preference. I may continue to primarily write class components over functional components, but I’m glad to have a strong understanding of state hooks so that I may implement the same functionality in functional components.