Ankur Singhal

Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.

Component in React

react-component

In this Blog I want to expose you to the differences between functional and class components in React and while you should pick which one.

First of all, We understand what is react component

component is an independent, reusable code block, which divides the UI into smaller pieces

on this point, dividing the code into components which helps us a lot. Each component has its very own JS and CSS code, they’re reusable, less complicated to read, write and test.

React component called Demo

class Demo extends React.Component {
  render() {
    return Hi, I am a Demo!;
  }
}

React has 2 types of components: Functional (Stateless) and Class (Stateful).

Functional Component

A functional aspect is just plain JavaScript feature which returns a React element.

Functional components ought to be favored if you do not need to make use of React state

function Welcome(props) {
  return Hello, {props.name};
}

This function is a React component it accepts a “props” (which stands for properties) object argument with data and returning a React element.

We can define a React functional component as a JS Function:

const example = () => {
  return (Functional component );
}

In the above code, using ES6 arrow function

In the past, we couldn’t do more complex such things as React State (data) control or life-cycle strategies in this components.

React added React Hooks in version 16.8, which now allows us to apply state & other features in functional components. You can read in React Hooks

Class (Stateful) Components

Class components are ES6 classes

They are more complicated than functional components consisting of constructors, life-cycle methods, render( ) function and state (data) management

import react , {Component} from 'react';

class Welcome extends Component {
  render() {
    return (
	Hello, {this.props.name}
	);
  }
}

export default Welcome;
  • Component once it extends the React component.
  • can accept props if we needed props.
  • Can maintain its own data with state
  • must have a render( ) method which returns a React element (JSX), or null

Pure component

In the case of Pure Components, the React components do not re-render blindly without considering the updated values of React “props” and “state”. If up to date values are the same as preceding values, render isn’t triggered.

Pure Components restricts Re-Rendering
PureComponent for a performance boost in some cases

React.PureComponent is just like React. Component. The distinction between them is that React. Component doesn’t implement,shouldComponentUpdate()however, React.PureComponent implements it with a shallow prop and state comparison

Here is the example:

class PureComponent extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      counter: 0
    }
    
    // The value of Counter is updated to same value during continues interval
    
    setInterval(() => {
      this.setState({
        counter: 0
      });
    }, 1000);
  }
  
  render() {
    
    // This function wont be re-rendered in case when the new state is same as previous
    
    return Counter Value: {this.state.counter}
  }
}

In the code above the component is inherited from React.PureComponent, each time the state or props are up to date it compares the preceding and next value — if the values are same the Render function isn’t triggered. Performance is stepped forward by no longer calling “render” recursively.

Share