Being one of the top JavaScript library for web application development, React has established a huge community with optimization and workflow updates appearing every few months. When we talk about React development, components always come into play. Components are the backbone of React development. In fact, React is a component-driven web application development ecosystem.
Since components are an essential element in React development, we ought to know what they are. A Component is just the composition of HTML, CSS, and JavaScript at its core. Basically, React component is a function or a class that takes some parameters and returns a UI template or element. Of course, they make the overall template reusable increasing the efficiency of the coding process.
Now when we talk about components in React, usually there are two types of components:
- Class components
- Functional Components
Class Component
Class components are usually written using ES6 class syntax. Class components usually are class objects that extend to React Component module. These class components are powerful and can hold their own individual states. They can handle as well as manage their own states. The state variables are subjected to dynamic changes in response to some events which will re-render the entire component. Hence, Class components are the stateful component in which state variables are subjected to dynamic change triggering the re-render of the entire component template. Thus, changes are reflected on the UI screen. It also houses a constructor function that is called every time the component is rendered on the DOM.
These class components are the old way of creating components in React that also offers some powerful Lifecycle hooks such as componentDidMount, componentDidUpdate, componentDidUnmount etc. Usually, the logical functions that change the state of UI elements are formulated in the class component.
A simple example of a class-based component is demonstrated in the code snippet below:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
model : "2X11"
}
}
render() {
return (
<div>{this.props.id}</div>
<div>{this.state.model}</div>
);
}
}
export default App;
Functional Component
Functional components are basically a function that takes in some properties and returns the UI template. They do not hold any state variables and has no mechanism to manage or handle them. Hence, a state cannot be defined in the Functional component. That's why functional components are also called stateless components. They are mainly used to return the static UI elements such as text, images, or links. They are not subjected to dynamic change and re-render. The functional component cannot access this object as well which means it is an individual component.
A simple example of functional component is provided in the code snippet below:
const App = (props) => {
return (
<p>This is functional component: {props.id} </p>
)
}
However, with the introduction of React Hooks in the latest React versions, defining states inside the Function component has been possible. It has completely changed the workflow of React development where developers are switching to Functional components than the traditional hook based components. With the availability of hooks such as useState, useEffect we can define the states which can be subjected to dynamic change and trigger the re-render of the Functional component as well. These hooks have given the power of dynamism and statefulness to Functional components.
View Website
View Website
View Website
Conclusion
Well, with the detailed explanation provided in the article, we now know what key role components play in React development ecosystem. Both types of components are equally important. They both work together to provide structure to the code as well as improve the efficiency and performance of the overall React app. However, we need to notice the React Hooks in the latest React version which has completely changed the React development workflow. In spite of this, Class-based components can be used today as well. So, make sure to get a thorough knowledge of both.
Comments (0)