Share it!

As in most modern JavaScript frameworks (Angular, Vue.js, etc.), React is a framework based on the concept of components. Within this framework, there are different types of components (class components, function components, pure components, etc.), each with their own advantages and downsides.

React Components: Functional and Class

React components come in two types or “flavors”, namely: Class Components and Function components. The difference is pretty obvious. Class components are ES6 classes and Functional Components are functions.

In the past, Function components were also called “stateless” while Class components were tucked under the “stateful” components category.

However, this distinction is getting increasingly blurred with the advent of React Hooks, as they allow functional components manage their own state and use side-effects, so functional components are now rebranded to Function Components.

Function Components

As mentioned above, Function Components are functions. The only constraint for a functional component is to return valid JSX. That’s it. Function Components can take an argument (props in React parlance) to customize the output but it’s not mandatory.

As an example, if you want to create a component that displays an H1 header and have the text passed as a prop, you could go for something like this:

function FunctionHeader(props) {
  const defaultHeader = "This is the header";  
  return <h1>React { props.title || defaultHeader }</h1>;
}

Class Components

A React Class Component is defined as a JavaScript class, extending the internal React Component logic from the React.Component class. All the internal React Component logic comes from extending React.Component via object-oriented inheritance.

These components include the mandatory render() method, which returns a JSX object, derived from the component’s props and (usually) state. Usually, they also include a class constructor, which is primarily used in React to set initial state or to bind methods to the component’s instance, and optionally other functions to manage events and life-cycle methods.

Going back to the Header component we devised earlier on the article, the same component can be transformed into a Class component as shown below:

class ClassHeader extends React.Component {
  render() {
    const defaultHeader = "This is the header";
    return <h1>React { this.props.title || defaultHeader }</h1>;
  }
}

Obviously, this is a very simple component and normally you wouldn’t use a Class component but it shows you how it can be implemented.

React’s Speed Smarts

If there’s something that defines React is performance. Because its virtual DOM, React is able to achieve blazing speeds by updating the actual browser’s DOM when required.

This distinguishes it from other libraries that update the DOM all the time, when the information to display is exactly the same.

Nevertheless, React’s speed “intelligence” only goes so far, so it’s the developers’ job to be aware of the limitations and possible optimization paths to get the best performance out of an application.

This is especially true for large, complex Single-Page Applications (SPA), where the DOM can be very large and every rendering cycle can take a long time.

When developing components, a general rule I adopted is to always start with a functional component. Later on, if I happen to need life-cycle methods or it makes sense to have a small piece component level state. It takes no time to refactor to a class component by moving the functional component’s code to the render() method of the refactored component.


Share it!