Component in React

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

A 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.

Tags: react component