React Components vs. React Hooks

A list of differences between the components class and React hooks

These last few months, I’ve been delving into React hooks, the new functionality that created so much hype when presented and to which I’ve not been able to devote excessive time until now.

If you have been cryogenized in recent months, you can see the talk in which they were first shown below:

What Have I Tried Thus Far?

To start getting used to working with React hooks, I’ve defined a project with the following characteristics:

• A Facebook login
• Calls to an external API (specifically https://reqres.in/api, a true discovery if you want to mess with API calls)
• Status management through Redux
• An entity creation and editing form
• Application routing through React Router and private route protection
• Use of styled components

And I have developed it in two different ways:

• Using components — i.e., the old way
• Using hooks — where I’ve found it interesting to use them, replacing all classes with functions and taking advantage of the useEffect and useState hooks

There is another difference between both developments: For the first one, I configured webpack in the purest old-school style. But for the second, I used the create react app tool in order to see which of the two ways I felt more comfortable. (I ended up staying with the second option for the simple reason that it allows us to forget all the initial configuration and installation of dependencies.)

In addition, I have programmed this second project through TypeScript in order to see how it is carried with hooks. I tried it as an alternative to Flow and PropTypes.

In general, the migration has been simple despite having encountered some other problem in the…