React · Theory

Class Components in React

Theory

85/94

Class Components in React

A class component extends React.Component, keeps data in this.state, updates with this.setState, and draws in render(). Lifecycle methods: componentDidMount, componentDidUpdate, componentWillUnmount. You will still read this in older codebases.

Map to hooks: state → useState, didMount/didUpdate/willUnmount → useEffect. Don’t start a new screen as a class unless the team’s file already is one. Interview: show you can read a class, then say you’d rewrite it as a function.

Class Components in React — on screen — button 0, click → 1. Class uses this.setState. Today we write useState instead.

Diagram

Parent
    │ props (read-only)
    ▼
  Child → UI

Exam tip

Read class. Prefer hooks for new code.

Example

// Class component
import { Component } from "react";

class Counter extends Component {
  state = { n: 0 };
  render() {
    return (
      <button onClick={() => this.setState({ n: this.state.n + 1 })}>
        {this.state.n}
      </button>
    );
  }
}

Class Components in React — on screen: button 0, click → 1. Class uses this.setState. Today we write useState instead.

Short notes

Defclass + this.state + render().
Map : didMount ≈ useEffect([]).
Now : function components.

// Class component import { Component } from "react"; class Counter extends Component { state = { n: 0 }; render() { return ( <button onClick={() => this.setState({ n: this.state.n + 1 })}> {this.state.n} </button> ); } }

Class Components in React

Example

Short notes

Questions

Class Components in React

Example

Short notes

Questions