Don’t React Too Late!
Inspired by a recent experience of mine, I’ve made the decision to become more familiar with class components within React. Until recently, my time with React has been almost exclusively dealing with function components and Hooks. I have had exposure to class components, but unfortunately not as much as I’d like to be able to admit.
Naturally I’ve gone in, out, up and down the React documentation trying to soak up the information I was looking for. My scouring has lead me to this conclusion — React with Hooks and function components provide easier and more efficient coding, which will lead to a shift in the way React is developed with. Disclaimer — I understand that I am not the first developer to have this idea, BUT as a relatively new developer, realizing these sort of trends on my own is exciting.
So if you have not done so already, here is the very beginning of your introduction to React function components. Function components are nothing new, however the use of Hooks is fairly young, and function components are the base in which you will Hook into.
Functional vs Class Components
Functional:
In React, functional components are simply JavaScript functions. They can be written using the regular ‘function’ keyword, or as an arrow function. Function components accept data and display them. At their core, they are responsible for rendering their content to the DOM (Document Object Model). There is no render method used with functional components. However, they can accept props as parameters for use within their body, Redux state management can be used as well as local state and numerous Hooks.
Class:
As an easy way to see the differences between a functional component and a class component, let’s walk through the steps of converting a function component to a class component as demonstrated by the React documentation.
- Import the React Component class at the top of your component file:
Ex)import React, { Component } from "react";
Then the class will need to be extended from the Component class like soclass ComponentName extends Component - Add a single empty
render()method to the component. - Place the body of your function component into the empty render method you have defined. This will include the return statement and the JSX it encompasses.
- Replace all instances of props from the function component from
propstothis.props - Then it is as simple as deleting the unnecessary pieces of your disassembled function.
Your finished product, or rather, your started class component will look something like this:
You might notice the constructor within the above component. A constructor method is used for two purposes. Either initiating the local state for that class by using this.state and setting it equal to something (string, array, etc.) or binding event listeners. Constructors should be defined before the render method within the lifecycle. You can find more on constructor methods within the React documentation here.
Classy Components and Their Lifecycles
Assuming that if you are reading this, you have a somewhat decent understanding of the basic structure and actions of React: Index.js page referenced within HTML, responsible for rendering child components using ReactDOM(), where state, props, JSX and logic all live.
Traditionally, React applications have been built using a class component hierarchy. The components and be children of other components and parents to yet even more components. However, it is important to understand the component lifecycle and how your React code is being compiled before going any further.
We construct our component, render it to the DOM and then check if it mounted? If it did mount, then we can tell it to go look at an API and bring some good old data back to us. Then it has to render again. If we update the component with new props or update state with the new data we have, the component renders again. Then if it does successfully update, we give it permission to render itself again with the correct data. AND THEN, it can unmount.
Final REACTion
If you are a new developer like myself, it is vital to know about React using Hooks to make sure you are staying current. However, being able to read, use and transition from class components that you may come across in legacy code is equally vital.
