Class Components in React: The Legacy Method of Creating Components
A brief writing on class components, constructors, and the contextual ‘this’ keyword within React.
What exactly is ‘this’?
‘This’ represents a keyword that refers to an object and is assigned its value based on a given context. The way ‘this’ pulls its context varies depending on the particular use of the keyword, within a function, class, or the global scope. In the global scope of Javascript, ‘this’ refers to the global object, which in a browser window is [object Window]. This occurs when ‘this’ is used in a function that is being used as a regular function, not as a method in an object. The ‘this’ looks for it’s context and when it determines there is none, it reaches outside to the global scope to find it’s context. If it cannot find a matching variable in the global scope (something to give it context) this will return the [object Window] from the browser.
Within an object method, ‘this’ refers to the object itself and is the most common use for ‘this’ in Javascript. It allows the programmer to pass a method into the object and use ‘this’ with the relative value within our object by utilizing dot notation, the very same manner as pulling information out of an object without the contextual ‘this’.
Within the context of a React class component, the ‘this’ is used to refer to and access the component’s properties and methods. You can also use ‘this.setState’ in order to change a declared state within the class component.
What about classes?
The use of class components within React allows the programmer to have a more structured way to define reusable components. A React component is the item that is responsible for rendering the desired user interface, whether it is a simple table or more complex UI functionality.
In React, the syntax is a bit different than in Vanilla JS when it comes to defining our classes. As we’ve noted, classes allow programmers to easily reference objects, or in this case components, for future availability and use. When writing a class component in React, the class ‘extends’ the React.Component base class. This base class is provided by React specifically for creating class components and is called, ‘imported’, in a similar manner to more modern React Hooks.
React class components are a ‘legacy’ method of creating components in order to manage state and side effects. By this I mean to say that class components can still be used to create and manipulate components, however, they are no longer the preferred standard in React, as I will explain later. Class components also utilize the render method in order to render our desired JSX code to the page (similar to the more modern ‘return ()’ found in functional components.
But, how do I build a class component with a constructor function?
Much like in Vanilla JS, the constructor function built within the class component works to “build out” your component functionality.
Inside the constructor function, we must call ‘super(props)’ as it is necessary to initialize the parent class (the component) and pass your props to it. This should, and generally always is, called in the first statement within the constructor defined within a class component (as shown above).
Within the constructor, we can initialize the component’s state by setting ‘this.state’ to an initial state object, say a state of count set to a value of zero.
You can also use the constructor to ‘bind’ custom methods to the components instance. If we want to create an event listener method to utilize the state count we initialized above, we would write: ‘this.handleIncrement = this.handleIncrement.bind(this)’ (shown below).
The above is necessary in this scenario as it now ensures that ‘this’ within ‘handleIncrement’ refers to the component instance specifically and does not lose its context. This will then be used as an event handler within our next item, the render method.
In the render method, we are able to write the JSX code that we want to render to the page. If you are not familiar with JSX and its syntax, click here for additional information.
Within the render method, we can use ‘this.state’ to access and display the components state that was declared above. If multiple state variables were declared, we can access each individual state by writing ‘this.state.desiredVariableHere.
From here, we write out our JSX code, using the proper context and elements, and we’ll have a completed class component.
Why are class components no longer as common?
In the most modern iteration of React, the use of functional components and React Hooks have deemed class components as the less preferred method of app development.
Functional components and the use of React Hooks offer several benefits over the original class components when writing with React.
Simplicity and readability
The functional components are typically shorter and easier to read. They also promote a much more straightforward coding style which makes it a bit easier for collaborative work.
Easier to learn and less bundle size
Due to their simplified nature, these components are much easier for someone less familiar to React to understand and interpret. This also caused the full app to have a smaller bundle size. Less to write means less to bundle!
Reusability with hooks
Thanks to React Hooks, you can reuse stateful variables and behavior using your hooks. It promotes creation of reusable and easily composed code!
No need for contextual ‘this’
You don’t need to bother with the complexities of the ‘this’ keyword, which especially for beginners, can lead to confusion and bugs within components that may not otherwise have occurred.
Modernity and advancement
Functional components and React Hooks are well suited for the modernity of the language. There is an experimental feature in react called Concurrent Mode aimed at improving performance and user experience. Functional components and React Hooks are better suited for this feature. React itself has been moving towards functional components and Hooks in its official documentation and examples, indicating the direction in which the React community is headed.
But why did I read all about this then? When will I see or use class components?
Well, there are still some situations in which class components may be seen or used. There are less, but there are some!
Legacy Codebases
Older React projects might use class components. You will likely come across these projects at some point in your work and it’s always a good idea to have some understanding of the syntax and code.
Third-Party Libraries
Some third-party libraries and components may use class components. Therefore you may need to or want to integrate them into your application. Again, better safe than sorry!
Complex Local State Management
Class components with setState and class properties can be helpful for managing complex local component states.
Although not as common as they once were, React class components and their constructors are still present in apps today and it is always beneficial to have some form of an understanding in order to be prepared for every situation.
