Design Converter
Education
Last updated on Feb 19, 2025
•5 mins read
Last updated on Feb 19, 2025
•5 mins read
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.
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.
• Easier to read and write
• Less boilerplate code compared to class components
• Better performance as they do not use this keyword
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.
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.
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.
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.
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.
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.
• Reusing component logic across multiple places
• Modifying component behavior without changing the original component
• Enhancing performance by wrapping components
React supports multiple components that serve different purposes beyond just functional components and class components. Some other components include:
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 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.
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 |
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.
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.