React Hooks Introduction
Setting State in a Functional Component Hook -vs- a Class Component Constructor
I was taught to use class components in React because class components can hold state and functional components can’t. Now, due to the introduction of hooks, functional components can also hold state. This may lead to the eventual demise of class components in React. This plus the bonus that hooks are supposed to be easier to work with and make it easier to read and understand what the code is doing, are the reasons I’m transitioning to using hooks.
This is my introduction to React hooks. It will be brief and painless, comparing how the two different components set state. I’ll also share the significant differences between the two that I find.
To use React you need to have Node.js and npm as well as React installed on your computer. For all React related installations consult Tutorials Points’ ReactJS - Environment Setup.
To create a React app, in the command line, navigate to where you want your app located then use the command create-react-app and your app’s name. I’ll illustrate setting state using the event listener onClick and I’ll assign the same variable and function names in the class and functional components to make comparisons easier.
CLASS COMPONENT CONSTRUCTOR : True / False Toggle Button
I have the Visual Studio Code editor, so I can use the GraphQL/React-Native Snippets extension to quickly produce a class component boilerplate with rcc + tab.
The class component requires a constructor method to set initial state. So I add the constructor and give state a switch key that has an initial false value.
I use an arrow function called swapper to change the state between true and false. I can only use .state in the constructor so I call .setState( ) and pass in the state object. I change the swap key value by using the bang (!) operator to change the state between true and false each time this function is called.
I have a button, conveniently labeled Class Button to distinguish it from the Hook Button for comparison. The Class Button has an onClick event listener. So when this button is clicked, it will call the swapper arrow function. If the state is false, the swapper function will swap in true to replace false so the state becomes true. If the state is true, the swapper function will swap in false to replace true so the state becomes false.
I use a ternary statement to display “The Truth” in the browser if the state is true. And it displays “This is False” if the state is false.
So the swapper arrow function, called by clicking the button, toggles the state between true or false. In the constructor, since the state’s swap key has an initial value of false, “This is False” is displayed in the browser. But click the Class Button and “The Truth” is displayed because clicking the button has swapped the state to true.
FUNCTIONAL COMPONENT HOOK: True / False Toggle Button
Thanks to hooks, I can now build this same functionality in a functional component. In fact, hooks can only be used in functional components, not class components. To get started, I quickly produce a functional component boilerplate with rfc + tab. I will need to use state so I add { useState } to my import React statement.
Instead of a constructor, I use a constant variable to name both a swap variable and swapper function and I assign it an initial state of false by passing false into useState.
The Hook Button has an onClick event listener that’s been assigned an arrow function to call the swapper function that has the swap variable passed in as an argument with the bang (!) operator to change it between true and false each time the button is clicked.
Once again, I use a ternary statement to display “The Truth” in the browser if the state is true. And it displays “This is False” if the state is false.
Clicking the Hook Button toggles the state between true and false which alternately displays “The Truth” or “This is False” in the browser.
CONCLUSION
The most obvious difference between the 2 components is that it takes fewer lines of code to write the hook in the functional component compared to setting up the class component with a constructor and arrow function. And I do find it a lot easier to read the functional component code and understand what it’s doing. That’s because there’s a whole lot less code to read, it’s less spread out and more concise.
There are three ways this is achieved. I included images of the complete code for each component below.
1) The functional component accesses state with the simple reference of swap while the class component uses this.state.swap.
2) The functional component uses a single line of code to do 3 significant things; name a constant variable (swap), name the function (swapper), and set initial state to false. The class component uses about 10 lines of code to do the same spread out in the constructor and the swapper arrow function.
3) The functional component both calls and creates the arrow function in a single line of code inside of the button’s onClick event listener. The class component separates out the arrow function which additionally requires multiple lines of code.
So far the comparison reveals hooks aren’t as daunting as I imagined they would be. It actually appears to be easier to code and understand. I’m looking forward to learning more about hooks!
