Class Components

Class Components

1. 1Class components are an older way to create components in React (used before Hooks were introduced).
2. 2They are written using JavaScript ES6 classes and the class extends React.Component class (imported from react).
3. 3Every class component needs a render() method, and that method returns the UI (JSX).
4. 4State in class components is handled using this.state, and to change it, we use this.setState().
5. 5Props (data passed from parent) are accessed using this.props and must be passed in the constructor.

   Example: Pass props in constructor

   Copy code

   Copy code

   1import React from 'react';
   2export default class Example extends React.Component {
   3  constructor(props) {
   4    super(props);
   5  }
   6}

   💡

   Note

   Why pass props in constructor?
   Props are passed to the component using the constructor.
   Super keyword is used to call the constructor of the parent class that is React.Component so that we can access the props in lifecycle methods and render method.
6. 6We need to bind the this keyword in the constructor when using regular functions.

   Example: Bind 'this' in constructor

   Copy code

   Copy code

   1import React from 'react';
   2export default class Example extends React.Component {
   3  constructor(props) {
   4    super(props);
   5    this.handleClick = this.handleClick.bind(this);
   6  }
   7  // bind the handleClick method to the class instance
   8  handleClick() {
   9    console.log('Button clicked');
   10  }
   11
   12  render() {
   13    return <button onClick={this.handleClick}>Click me</button>;
   14  }
   15}

   💡

   Note

   Why bind this in class components?
   

   • In regular functions inside a class, this is undefined when the function is called (like from an event).
   • React doesn't automatically bind this for class methods. So, you need to manually bind this in the constructor to make sure it refers to the class instance and we can access the component's state and props inside the function.
7. 7If we use an arrow function, we don’t need to bind this in the constructor.

   Example: Arrow function without binding

   Copy code

   Copy code

   1import React from 'react';
   2export default class Example extends React.Component {
   3
   4      // no need to bind 'this' in the constructor
   5      handleClick = () => {
   6        console.log('Button clicked');
   7      }
   8    
   9      render() {
   10        return <button onClick={this.handleClick}>Click me</button>;
   11      }
   12    }

   💡

   Note

   Why arrow functions don't need binding?
   

   • Arrow functions do not have their own this keyword value.
   • They inherit this from the place where they are defined — in this case, the class.
   • So, when you use an arrow function, it automatically refers to the class instance, and you don't need to bind it.
8. 8

   Example: Simple class component

   Copy code

   Copy code

   1import React from 'react';
   2export default class Counter extends React.Component {
   3      render() {
   4        return <h1>Hello, {this.props.name}</h1>;
   5      }
   6    }
   7      
   8------- or -------
   9    
   10import { Component } from 'react';
   11    
   12class Counter extends Component {
   13      render() {
   14        return <h1>Hello, {this.props.name}</h1>;
   15      }
   16    }
   17    
   18    

9. 9Class components also support something called lifecycle methods.
10. 10These are special methods that run at different times: when the component added to the DOM, when the something in the component is updated , when the component is removed from the DOM.
11. 11For example, componentDidMount method runs when the component added to the DOM, and componentDidUpdate method runs after the component updates.
12. 12

    Example: Class component with state and lifecycle

    Copy code

    Copy code

    1import React from 'react';
    2export default class Counter extends React.Component {
    3      constructor(props) {
    4        super(props);
    5        this.state = { count: 0 };
    6        this.increment = this.increment.bind(this);
    7      }
    8    
    9      componentDidMount() {
    10        console.log('Component mounted');
    11      }
    12    
    13      increment() {
    14        this.setState({ count: this.state.count + 1 });
    15      }
    16    
    17      render() {
    18        return (
    19          <div>
    20            <p>Count: {this.state.count}</p>
    21            <button onClick={this.increment}>Increment</button>
    22          </div>
    23        );
    24      }
    25    }

13. 13Before React Hooks were introduced, class components were the only way to use state and lifecycle methods
14. 14Today, we use function components because Hooks make them easier to write and manage
15. 15But class components are still used in older projects and knowing them is useful for interviews
16. 16Easy way to remember: Class components = more code, use this.state and this.props, and need a render() method.
17. 17Interview key points:
    • We use ES6 class and extend React.Component to create class components
    • State is handled with this.state and updated with this.setState()
    • Props are accessed with this.props
    • Need render() to return JSX
    • Use lifecycle methods like componentDidMount for side effects
    • Less used now, but important for older React code