Types of React Components You Need to Know

Curious about the different types of React components?

React has become one of the top libraries faor building user interfaces, and knowing its components is key to building great apps. The types of React components you use affect how your app is structured and how it performs. Whether you’re new to React or have some experience, understanding components like class, functional, and higher-order components will help you create efficient applications.

In this blog, we’ll walk through these components, their lifecycle methods, hooks, and re-render behavior. By the end, you'll see how they all come together to shape a React app.

1. Functional Components

What are Functional Components?

Functional components are JavaScript functions that return JSX. Unlike class components, they do not use lifecycle methods but can still handle state and side effects using React hooks.

Example of a Functional Component

1function Greeting(props) {
2  return <h1>Hello, {props.name}!</h1>;
3}

​

This is a simple function component that takes props and returns JSX.

Benefits of Functional Components

• Easier to read and write

• Less boilerplate code compared to class components

• Better performance as they do not use this keyword

Handling State with React Hooks

Since functional components do not have lifecycle methods, React hooks like useState and useEffect are used for state and side effects.

1import React, { useState, useEffect } from 'react';
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  useEffect(() => {
7    document.title = `Count: ${count}`;
8  }, [count]);
9
10  return (
11    <div>
12      <p>Count: {count}</p>
13      <button onClick={() => setCount(count + 1)}>Increase</button>
14    </div>
15  );
16}

​

This example shows state management using useState and a lifecycle method equivalent (useEffect) inside a function component.

2. Class Components

What are Class Components?

Class components extend React.Component and provide access to lifecycle methods, making them powerful but more verbose than functional components.

Example of a Class Component

1import React, { Component } from 'react';
2
3class Welcome extends Component {
4  render() {
5    return <h1>Welcome, {this.props.name}!</h1>;
6  }
7}

​

Here, the component extends React's base class and uses the render method to return JSX.

Managing State in Class Components

Class components use a state object and setState to modify values.

1class Counter extends Component {
2  constructor(props) {
3    super(props);
4    this.state = { count: 0 };
5  }
6
7  increaseCount = () => {
8    this.setState({ count: this.state.count + 1 });
9  };
10
11  render() {
12    return (
13      <div>
14        <p>Count: {this.state.count}</p>
15        <button onClick={this.increaseCount}>Increase</button>
16      </div>
17    );
18  }
19}

​

This example demonstrates state management in class components.

Lifecycle Methods in Class Components

Some key lifecycle methods include:

• componentDidMount – Runs after the component mounts

• componentDidUpdate – Runs after updates

• componentWillUnmount – Runs before unmounting

Example:

1class Timer extends Component {
2  componentDidMount() {
3    this.timerID = setInterval(() => console.log('Tick'), 1000);
4  }
5
6  componentWillUnmount() {
7    clearInterval(this.timerID);
8  }
9
10  render() {
11    return <h1>Timer Running...</h1>;
12  }
13}

​

This code starts a timer when mounted and clears it when unmounted.

3. Higher-Order Components (HOCs)

What are Higher-Order Components ?

A JavaScript function that accepts a component as an argument and returns a new component with more capabilities is known as a higher-order component.

Example of a Higher-Order Component

1function withLogging(WrappedComponent) {
2  return class extends Component {
3    componentDidMount() {
4      console.log(`${WrappedComponent.name} mounted`);
5    }
6
7    render() {
8      return <WrappedComponent {...this.props} />;
9    }
10  };
11}
12
13class SimpleComponent extends Component {
14  render() {
15    return <h1>Hello, World!</h1>;
16  }
17}
18
19const EnhancedComponent = withLogging(SimpleComponent);

​

Here, withLogging is a higher-order component that adds logging functionality to SimpleComponent.

When to Use Higher-Order Components

• Reusing component logic across multiple places

• Modifying component behavior without changing the original component

• Enhancing performance by wrapping components

4. Other Components in React

React supports multiple components that serve different purposes beyond just functional components and class components. Some other components include:

Pure Component

A pure component only re render when its props or state change, optimizing performance.

1import React, { PureComponent } from 'react';
2
3class PureCounter extends PureComponent {
4  render() {
5    console.log('Re-rendered');
6    return <h1>Count: {this.props.count}</h1>;
7  }
8}

​

Unlike regular class components, pure components prevent unnecessary re render, reducing computation.

Controlled and Uncontrolled Components

Controlled components have their state managed by React, while uncontrolled components rely on the DOM.

1function ControlledInput() {
2  const [value, setValue] = useState('');
3
4  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
5}

​

Here, value is controlled by React using state.

5. Comparing Functional and Class Components

Feature	Functional Components	Class Components
Syntax Complexity	Simple (uses JavaScript functions)	Complex (uses JavaScript classes)
State Handling	Uses React hooks	Uses this.state
Performance	Faster	Can be slower due to this keyword
Lifecycle Methods	Uses useEffect	Uses traditional lifecycle methods
Reusability	Higher	Lower

Choosing the Right Type of React Component

Understanding the types of React components is key to making the best choices in development. Functional components are often the go-to for many developers because they are simple and quick. Class components may still be useful when you need to work with older lifecycle methods. Higher-order components let you add functionality without changing the core structure. Pure components help with re-rendering performance.

Mastering these types of React components will help you write cleaner, more maintainable code while improving performance and managing state efficiently.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.