React Classes

In React, Components are the building blocks of application. Class components were a traditional way of creating components before the introduction of functional components and hooks.

Class components extend the React.Component class and have a more verbose syntax compared to functional components.

There are primarily two types of components in React.

Functional components
Class components

Class components are traditional React components defined using ES6 classes, while functional components are defined using Javascript functions.

However, after the introduction of React Hooks in React 16.8, functional components became more powerful and class components are no longer necessary for most use cases.

Create Class Component:

Before ES6, Javascript did not have class. `Class` Introduced in ES6 (ECMAScript 2015).

Example:

 import React, { Component } from 'react';

 class YourComponent extends Component {
   constructor(props) {
    super(props);
    this.state = {
      // initial state here
    };
   }

   componentDidMount() {
    // code to run after the component mounts
   }

   static getDerivedStateFromProps(nextProps, prevState) {
    if (prevState.someValue !== nextProps.someValue) {
      return {
        someValue: nextProps.someValue
      };
    }
   
    // Return null to indicate no change to state.
    return null;
   }

   componentDidUpdate(prevProps, prevState) {
    // code to run after the component updates
   }

   componentWillUnmount() {
    // code to run before the component unmounts
   }

   handleClick = () => {
    // code to handle a click event
   };

   render() {
     return (
      <div>
        <p>This is a Paragraph Content...</p>
        <button onClick={this.handleClick}>Click on Me!</button>
      </div>
     );
   }
 }

 export default YourComponent;

A class component in React is an ES6 class that extends React.Component or React.PureComponent and can have its own state and lifecycle methods. Class components provide a way to encapsulate stateful logic, manage component state, and interact with React's lifecycle.

The `constructor` method is used to initialize the component's state and bind event handlers.

Lifecycle methods like componentDidMount, static getDerivedStateFromProps, componentDidUpdate, and componentWillUnmount allow us to perform actions at different points in the component's lifecycle.

The `render` method returns the JSX that will be rendered to the DOM.

Lifecycle Methods in Class Components:

Class components in React provide a set of lifecycle methods that are invoked into various phases of a component's lifecycle, such as mounting, updating, and unmounting. These lifecycle methods provide opportunities to perform side effects, manage state, and optimize performance.

Mounting Lifecycle Methods:

The `constructor()` method is called before the component is mounted to the DOM. It's used for initializing state and binding methods.
`componentDidMount()` method is called after the component is mounted to the DOM First Time. It's a good place to perform side effects like fetching data, setting up subscriptions, or interacting with the DOM.

Updating Lifecycle Methods:

`shouldComponentUpdate(nextProps, nextState)` method allows us to control components should re-render when the props or state change. It returns a boolean value (true or false) to indicate whether the component should re-render.
`componentDidUpdate(prevProps, prevState)` method is called after the component updates and re-renders. It's useful for performing side effects when the component's props or state changes.

Unmounting Lifecycle Method:

`componentWillUnmount()` method is called just before the component is removed from the DOM Tree. It's used for cleanup activities like close socket connection, cancelling timers, disposing of subscriptions, or cleaning up any side effects created in componentDidMount.

<-- Components

React Props -->