Class components and older patterns

A cart button written as a class

Hooks arrived in React 16.8, in February 2019. Before that, a component that needed state or had to do something when it appeared was a JavaScript class. Plenty of apps, libraries, and answers online still use classes, and React 19 still runs them. Here is a cart button written that way. Click both buttons.

1import { Component } from "react";2 3class CartButton extends Component {4  state = { count: 0 };5 6  render() {7    return (8      <button onClick={() => this.setState({ count: this.state.count + 1 })}>9        {this.props.label}: {this.state.count}10      </button>11    );12  }13}14 15export default function App() {16  return (17    <>18      <CartButton label="Tea" />19      <CartButton label="Cake" />20    </>21  );22}

Each button keeps its own count. Line 3 declares a class that extends React's Component; that makes it a class component. Line 4 is its state, written as a class field: one object, { count: 0 }. Lines 6 to 12 are the render method, which returns the JSX, like a function component's return. Line 9 reads the label prop from this.props and the count from this.state, and line 8 asks for a new count with this.setState. App, lines 15 to 22, is a function component, and it uses the class like any other component: classes and functions mix freely.

Where does this come from? For each <CartButton /> on the page, React creates an object from the class, much as new CartButton(props) would. That object lives as long as the button is on the screen. React keeps the props and the state on it, and calls its render each time it needs the JSX. Here is the same button as a function:

1import { useState } from "react";2 3function CartButton({ label }) {4  const [count, setCount] = useState(0);5 6  return (7    <button onClick={() => setCount(count + 1)}>8      {label}: {count}9    </button>10  );11}12 13export default function App() {14  return (15    <>16      <CartButton label="Tea" />17      <CartButton label="Cake" />18    </>19  );20}

Line 3 takes label from the props parameter, line 4 replaces the state field and setState with useState, and line 7 calls setCount. There's no this anywhere. How to read the table: each row is one idea, written in a class, then in a function, then what it is.

this.state, and a setState that merges

A class has one state object. this.setState takes an object with the keys you want to change and merges it into the state: the keys you don't mention keep their values. Press Rename to Ravi:

1import { Component } from "react";2 3export default class App extends Component {4  state = { name: "Asha", email: "asha@example.com" };5 6  render() {7    return (8      <>9        <button onClick={() => this.setState({ name: "Ravi" })}>Rename to Ravi</button>10        <p>Name: {this.state.name}</p>11        <p>Email: {this.state.email}</p>12      </>13    );14  }15}

Line 4 starts the state with two keys. Line 9 passes only name. After the click, the name is Ravi and the email is still asha@example.com. A useState set function doesn't merge. It replaces the value with whatever you give it. Press the same button here:

1import { useState } from "react";2 3export default function App() {4  const [profile, setProfile] = useState({ name: "Asha", email: "asha@example.com" });5 6  return (7    <>8      <button onClick={() => setProfile({ name: "Ravi" })}>Rename to Ravi</button>9      <p>Name: {profile.name}</p>10      <p>Email: {profile.email}</p>11    </>12  );13}

Line 8 gives setProfile an object with only name, so that object is the new state, and the email line goes blank. With useState, you copy the old object first, { ...profile, name: "Ravi" }, as the Updating objects in state lesson shows. When you move a class to a function, every setState with an object needs this change, or a useState for each key.

The merge only goes one level deep. this.setState({ address: { city: "Delhi" } }) replaces the whole address object, street and all. Try the three ways of writing the rename:

this.setState({ name: "Ravi" });

Like a set function, setState doesn't change this.state right away. It asks React for a render, and this.state keeps its old value until then:

1import { Component } from "react";2 3export default class App extends Component {4  state = { count: 0 };5 6  addTwoObjects = () => {7    this.setState({ count: this.state.count + 1 });8    this.setState({ count: this.state.count + 1 });9  };10 11  addTwoUpdaters = () => {12    this.setState((state) => ({ count: state.count + 1 }));13    this.setState((state) => ({ count: state.count + 1 }), () => {14      console.log("Count is now", this.state.count);15    });16  };17 18  render() {19    return (20      <>21        <p>Items in cart: {this.state.count}</p>22        <button onClick={this.addTwoObjects}>Add 2 with objects</button>23        <button onClick={this.addTwoUpdaters}>Add 2 with updaters</button>24      </>25    );26  }27}

Press Add 2 with objects: the count goes up by 1. Lines 7 and 8 both read this.state.count while it is still 0, so both ask for { count: 1 }. Press Add 2 with updaters: it goes up by 2. Lines 12 and 13 pass an updater function, which React calls with the state after the updates queued before it, as in Queueing a series of state updates. Line 13 also passes a second argument, a function React calls after the update reaches the screen, so line 14 logs the new count: the console shows Count is now 3.

Why this goes missing in a click handler

Class components bring a JavaScript problem with them: this depends on how a function is called. Click Add tea here:

1import { Component } from "react";2 3export default class App extends Component {4  state = { count: 0 };5 6  addTea() {7    this.setState({ count: this.state.count + 1 });8  }9 10  render() {11    return (12      <>13        <p>Items in cart: {this.state.count}</p>14        <button onClick={this.addTea}>Add tea</button>15      </>16    );17  }18}

The count doesn't change, and the error appears: TypeError: Cannot read properties of undefined (reading 'setState'). Line 14 passes this.addTea, which is the function alone, without the object it belongs to. When you click, React calls that function on its own. Code inside a class always runs in strict mode, where a function called on its own gets this as undefined, so line 7's this.setState fails. The Losing this lesson covers why. Older code fixes it in one of two ways:

1import { Component } from "react";2 3export default class App extends Component {4  constructor(props) {5    super(props);6    this.state = { count: 0 };7    this.addTea = this.addTea.bind(this);8  }9 10  addTea() {11    this.setState({ count: this.state.count + 1 });12  }13 14  addCake = () => {15    this.setState({ count: this.state.count + 1 });16  };17 18  render() {19    return (20      <>21        <p>Items in cart: {this.state.count}</p>22        <button onClick={this.addTea}>Add tea</button>23        <button onClick={this.addCake}>Add cake</button>24      </>25    );26  }27}

• Lines 4 to 8 are a constructor. Line 5, super(props), runs Component's constructor first, as every subclass constructor must. Line 6 sets the state, and line 7 replaces addTea on this object with a copy whose this is fixed, made by bind.
• Lines 14 to 16 make addCake a class field holding an arrow function. An arrow function has no this of its own, so it uses the object's. Code from the last years of classes mostly does this.

Both buttons work. A third way is an arrow in the JSX, onClick={() => this.addTea()}, which calls the method on the object. Function components don't have this problem at all: there's no this.

Lifecycle methods, and the Effect that replaced them

A class reacts to moments in its life with lifecycle methods: methods React calls when the component appears (mounts), after it updates, and before it goes (unmounts). Here is a chat room that connects to the chosen room. The chat.js tab is a pretend server that logs each connect and disconnect, as the Synchronizing with effects lesson's did.

1import { Component, useState } from "react";2import { createConnection } from "./chat.js";3 4class ChatRoom extends Component {5  componentDidMount() {6    this.connection = createConnection(this.props.roomId);7    this.connection.connect();8  }9 10  componentDidUpdate(prevProps) {11    if (prevProps.roomId !== this.props.roomId) {12      this.connection.disconnect();13      this.connection = createConnection(this.props.roomId);14      this.connection.connect();15    }16  }17 18  componentWillUnmount() {19    this.connection.disconnect();20  }21 22  render() {23    return <h2>Welcome to {this.props.roomId}</h2>;24  }25}26 27export default function App() {28  const [roomId, setRoomId] = useState("general");29  const [show, setShow] = useState(true);30 31  return (32    <>33      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>34      <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

• componentDidMount, lines 5 to 8, runs once the room is on the screen. It connects, and keeps the connection on this.connection for later.
• componentDidUpdate, lines 10 to 16, runs after every later render that reached the screen. It gets the old props, so line 11 compares the old roomId with the new one, and reconnects only when it changed.
• componentWillUnmount, lines 18 to 20, runs just before the room is removed, and disconnects.

The console starts with three lines: connected, disconnected, connected. In development, StrictMode runs componentDidMount, then componentWillUnmount, then componentDidMount again, to check that the two match, the same check it does for Effects. Press Switch room: the room disconnects from general and connects to travel. Press Close chat: it disconnects from travel. Open connections end at 0.

Three methods share one job: keep the connection matching roomId. Forget one, and the job breaks. This version has no componentDidUpdate:

1import { Component, useState } from "react";2import { createConnection } from "./chat.js";3 4class ChatRoom extends Component {5  componentDidMount() {6    this.connection = createConnection(this.props.roomId);7    this.connection.connect();8  }9 10  componentWillUnmount() {11    this.connection.disconnect();12  }13 14  render() {15    return <h2>Welcome to {this.props.roomId}</h2>;16  }17}18 19export default function App() {20  const [roomId, setRoomId] = useState("general");21  const [show, setShow] = useState(true);22 23  return (24    <>25      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>26      <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>27      {show && <ChatRoom roomId={roomId} />}28    </>29  );30}

Press Switch room: the heading says travel, but the console is silent, because nothing reconnects. Press Close chat: it logs Disconnected from general, the room it really joined. This was one of the most common class bugs. Here is the room with an Effect:

1import { useEffect, useState } from "react";2import { createConnection } from "./chat.js";3 4function ChatRoom({ roomId }) {5  useEffect(() => {6    const connection = createConnection(roomId);7    connection.connect();8    return () => connection.disconnect();9  }, [roomId]);10 11  return <h2>Welcome to {roomId}</h2>;12}13 14export default function App() {15  const [roomId, setRoomId] = useState("general");16  const [show, setShow] = useState(true);17 18  return (19    <>20      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>21      <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>22      {show && <ChatRoom roomId={roomId} />}23    </>24  );25}

Lines 5 to 9 are the whole job. The setup, lines 6 and 7, connects. The cleanup on line 8 disconnects. The dependency list on line 9 says the Effect reads roomId, so when it changes, React runs the cleanup for the old room and the setup for the new one. Click the same buttons: the console shows the same lines as the class.

So don't translate method by method. Ask what the methods keep in step, and write one Effect for each such thing. How to read the table: each class method, when React calls it, and what you write with Hooks.

Methods named componentWillMount, componentWillReceiveProps, and componentWillUpdate, with or without an UNSAFE_ prefix, are the oldest of all. React 19 still calls them, with warnings: the plain names "have been renamed", and the UNSAFE_ names are flagged in StrictMode. Move their work to the methods above, or to Effects.

PureComponent and memo

A class re-renders whenever its parent does, like a function component. PureComponent changes that: before each render it compares the new props and state with the old ones, one by one with Object.is, and skips the render when they're all the same. Type in the box below; the small numbers count each component's renders (the RenderCount.jsx tab is the helper from the Context lesson).

1import { Component, PureComponent, memo, useState } from "react";2import RenderCount from "./RenderCount.jsx";3 4class PlainTotal extends Component {5  render() {6    return <p>Component: ${this.props.total} <RenderCount /></p>;7  }8}9 10class PureTotal extends PureComponent {11  render() {12    return <p>PureComponent: ${this.props.total} <RenderCount /></p>;13  }14}15 16const MemoTotal = memo(function MemoTotal({ total }) {17  return <p>memo: ${total} <RenderCount /></p>;18});19 20export default function App() {21  const [note, setNote] = useState("");22  const total = 7;23 24  return (25    <>26      <input value={note} onChange={(event) => setNote(event.target.value)} placeholder="A note for the shop" />27      <PlainTotal total={total} />28      <PureTotal total={total} />29      <MemoTotal total={total} />30    </>31  );32}

Each key you type changes note in App, so App renders again. PlainTotal, lines 4 to 8, is a plain Component, and its count goes up with every key. PureTotal, lines 10 to 14, extends PureComponent: its total prop is still 7, so it stays at 1. MemoTotal, lines 16 to 18, is a function wrapped in memo, which does the same for a function's props, and stays at 1 too.

PureComponent is a built-in shouldComponentUpdate, the method a class writes to decide for itself: return false to skip. Both fail in the same ways as memo: a new object or function in a prop on every render makes the comparison fail every time. The React Compiler only compiles functions and Hooks, so it adds no memoizing to a class.

Higher-order components and render props

Before Hooks, two components that needed the same stateful logic had no simple way to share it. Two patterns grew up for it, and you'll meet both in older code. Here two order cards share a toggle that shows their items. First, a higher-order component (HOC): a function that takes a component and returns a new one that wraps it.

1import { Component } from "react";2 3function withToggle(WrappedComponent) {4  return class WithToggle extends Component {5    state = { open: false };6    toggle = () => this.setState({ open: !this.state.open });7 8    render() {9      return <WrappedComponent {...this.props} open={this.state.open} onToggle={this.toggle} />;10    }11  };12}13 14function OrderCard({ order, open, onToggle }) {15  return (16    <section>17      <h3>Order {order.id}</h3>18      <button onClick={onToggle}>{open ? "Hide" : "Show"} items</button>19      {open && <p>{order.items.join(", ")}</p>}20    </section>21  );22}23 24const ToggleOrderCard = withToggle(OrderCard);25 26const orders = [27  { id: 1042, items: ["Tea", "Cake"] },28  { id: 1043, items: ["Lemonade"] },29];30 31export default function App() {32  return orders.map((order) => <ToggleOrderCard key={order.id} order={order} />);33}

withToggle, lines 3 to 12, returns a class that holds open in its state. Its render, line 9, renders the wrapped component with every prop it got, spread with {...this.props}, plus open and onToggle. OrderCard, lines 14 to 22, just uses those props. Line 24 makes the wrapped card, and App uses ToggleOrderCard. Press Show items on each card: each has its own state.

Their names start with with. In older apps you'll see react-redux's connect(…)(Component) and React Router 5's withRouter. Reading them is harder than it looks: OrderCard's open comes from a file that never mentions it, each wrapper adds a component to the tree, and two HOCs that both pass a prop named open silently overwrite each other.

The other pattern is a render prop: a prop holding a function that returns JSX. The component with the logic calls it with its values:

1import { Component } from "react";2 3class Toggle extends Component {4  state = { open: false };5  toggle = () => this.setState({ open: !this.state.open });6 7  render() {8    return this.props.children({ open: this.state.open, toggle: this.toggle });9  }10}11 12function OrderCard({ order }) {13  return (14    <Toggle>15      {({ open, toggle }) => (16        <section>17          <h3>Order {order.id}</h3>18          <button onClick={toggle}>{open ? "Hide" : "Show"} items</button>19          {open && <p>{order.items.join(", ")}</p>}20        </section>21      )}22    </Toggle>23  );24}25 26const orders = [27  { id: 1042, items: ["Tea", "Cake"] },28  { id: 1043, items: ["Lemonade"] },29];30 31export default function App() {32  return orders.map((order) => <OrderCard key={order.id} order={order} />);33}

Toggle's render, line 8, calls this.props.children as a function, with open and toggle. OrderCard passes that function as Toggle's children, lines 15 to 21, and returns the card from it. The values now come from a visible place, but every shared value adds a level of brackets. React's own context had a render prop before useContext, and it still works:

<ThemeContext.Consumer>
  {(theme) => <p className={theme}>Order 1042</p>}
</ThemeContext.Consumer>

Hooks replaced both. A custom Hook keeps the logic, and the component calls it:

1import { useState } from "react";2 3function useToggle() {4  const [open, setOpen] = useState(false);5  return [open, () => setOpen(!open)];6}7 8function OrderCard({ order }) {9  const [open, toggle] = useToggle();10 11  return (12    <section>13      <h3>Order {order.id}</h3>14      <button onClick={toggle}>{open ? "Hide" : "Show"} items</button>15      {open && <p>{order.items.join(", ")}</p>}16    </section>17  );18}19 20const orders = [21  { id: 1042, items: ["Tea", "Cake"] },22  { id: 1043, items: ["Lemonade"] },23];24 25export default function App() {26  return orders.map((order) => <OrderCard key={order.id} order={order} />);27}

useToggle, lines 3 to 6, holds the same state. Line 9 calls it, and the values arrive on a line you can read. No wrapper component, no function as a child, and each card still has its own state. A function prop that only draws part of the page, like renderItem in Component composition, is still a common pattern; it's sharing state through one that Hooks replaced.

How to read the table: each pattern, how OrderCard gets open and toggle, and what that costs.

Turn a class into a function, step by step

You don't have to rewrite every class: classes and functions work together, and React keeps running both. When you do change one, go in small steps. Here is a note box for an order that logs the draft each time it changes. Type a few letters and watch the console:

1import { Component } from "react";2 3class NoteBox extends Component {4  constructor(props) {5    super(props);6    this.state = { note: "" };7    this.handleChange = this.handleChange.bind(this);8  }9 10  componentDidMount() {11    console.log(`Draft for ${this.props.orderId}: "${this.state.note}"`);12  }13 14  componentDidUpdate(prevProps, prevState) {15    if (prevProps.orderId !== this.props.orderId || prevState.note !== this.state.note) {16      console.log(`Draft for ${this.props.orderId}: "${this.state.note}"`);17    }18  }19 20  handleChange(event) {21    this.setState({ note: event.target.value });22  }23 24  render() {25    return (26      <label>27        Note for order {this.props.orderId}{" "}28        <input value={this.state.note} onChange={this.handleChange} />29      </label>30    );31  }32}33 34export default function App() {35  return <NoteBox orderId={1042} />;36}

Lines 4 to 8 set the state and bind handleChange. componentDidMount, lines 10 to 12, logs the empty draft, and componentDidUpdate, lines 14 to 18, logs it again when the order or the note changed. Step through the migration; each step changes one kind of thing:

1import { Component } from "react";2 3class NoteBox extends Component {4  constructor(props) {5    super(props);6    this.state = { note: "" };7    this.handleChange = this.handleChange.bind(this);8  }9 10  componentDidMount() {11    console.log(`Draft for ${this.props.orderId}: "${this.state.note}"`);12  }13 14  componentDidUpdate(prevProps, prevState) {15    if (prevProps.orderId !== this.props.orderId || prevState.note !== this.state.note) {16      console.log(`Draft for ${this.props.orderId}: "${this.state.note}"`);17    }18  }19 20  handleChange(event) {21    this.setState({ note: event.target.value });22  }23 24  render() {25    return (26      <label>27        Note for order {this.props.orderId}{" "}28        <input value={this.state.note} onChange={this.handleChange} />29      </label>30    );31  }32}33 34export default function App() {35  return <NoteBox orderId={1042} />;36}

Here is where it ends. Type the same letters, and the console shows the same lines as the class:

1import { useEffect, useState } from "react";2 3function NoteBox({ orderId }) {4  const [note, setNote] = useState("");5 6  useEffect(() => {7    console.log(`Draft for ${orderId}: "${note}"`);8  }, [orderId, note]);9 10  function handleChange(event) {11    setNote(event.target.value);12  }13 14  return (15    <label>16      Note for order {orderId}{" "}17      <input value={note} onChange={handleChange} />18    </label>19  );20}21 22export default function App() {23  return <NoteBox orderId={1042} />;24}

Line 4 is the state. Lines 6 to 8 are one Effect that runs after the first render, and again when orderId or note changes: exactly what the two lifecycle methods did with their comparisons. Lines 10 to 12 are the handler, with no this to bind. Check a migration the way you just did: the same output, the same logs, then delete the class.

What React 19 removed from older code

React 19 removed APIs that were deprecated years before, and older class code is where you'll find them. Some now do nothing, which is easy to miss. This page shows two headings:

1function Heading({ text }) {2  return <h1>{text}</h1>;3}4Heading.defaultProps = { text: "Welcome to the tea shop" };5 6function Greeting({ text = "Welcome to the tea shop" }) {7  return <h1>{text}</h1>;8}9 10export default function App() {11  return (12    <>13      <Heading />14      <Greeting />15    </>16  );17}

Only one heading shows text. Line 4 sets defaultProps on the function Heading, and React 19 doesn't read it, so text is undefined and the first <h1> is empty. Line 6 gives the default in the parameter, with destructuring, and the second heading shows it. Class components still read static defaultProps. propTypes are ignored for every component: React no longer checks them or warns, so use TypeScript to check props instead.

Other removals throw. Older classes reached elements with string refs:

1import { Component } from "react";2 3export default class App extends Component {4  focusSearch = () => {5    this.refs.search.focus();6  };7 8  render() {9    return (10      <>11        <input ref="search" placeholder="Search teas" />12        <button onClick={this.focusSearch}>Find a tea</button>13      </>14    );15  }16}

Line 11's ref="search" makes React 19 throw as soon as it renders: Expected ref to be a function, an object returned by React.createRef(), or undefined/null. Line 5 would have read the input as this.refs.search. A callback ref does the same job:

1import { Component } from "react";2 3export default class App extends Component {4  focusSearch = () => {5    this.search.focus();6  };7 8  render() {9    return (10      <>11        <input ref={(node) => (this.search = node)} placeholder="Search teas" />12        <button onClick={this.focusSearch}>Find a tea</button>13      </>14    );15  }16}

Line 11 passes a function. React calls it with the input's node, which it keeps on this.search, and line 5 focuses it. Click Find a tea: the box gets the cursor. Legacy context, the way classes shared values before createContext, is gone too:

// Removed in React 19: React ignores these, and warns.
class Price extends Component {
  static contextTypes = { currency: PropTypes.string };
  render() {
    return <p>{this.context.currency} 3</p>;
  }
}

// Still works: one context, read through static contextType.
const CurrencyContext = createContext("$");

class Price extends Component {
  static contextType = CurrencyContext;
  render() {
    return <p>{this.context} 3</p>;
  }
}

The first class reads this.context.currency through static contextTypes; React 19 ignores that and warns, so this.context is empty. The second reads one context with static contextType, which still works. A function uses useContext. How to read the table: older code, what React 19 does with it, and what to write instead.

The React team and codemod.com publish codemods, programs that rewrite code for you, for several of these. npx codemod@latest react/19/migration-recipe replaces ReactDOM.render, string refs, and more. Read the React 19 upgrade guide on react.dev before you upgrade an older app.

Reading an older component file

When you open an older file, read it in this order. Each part tells you what the Hook version would be:

1. The state, in the constructor or the state field: each key is a likely useState.
2. The lifecycle methods: what do they start, update, and stop together? Each such thing is one Effect.
3. The methods: event handlers, bound in the constructor or written as arrow fields. They become functions inside the component.
4. The export line: export default withSomething(MyComponent) means a HOC passes it props you won't find in the file.
5. render: the JSX, with this.props. and this.state. in front of every value.

Common mix-ups

• "Class components are deprecated." No. React 19 runs them, and the React team has said it has no plans to remove them. They're not recommended for new code.
• "useEffect(fn, []) is componentDidMount." Only when the setup reads no props or state. An Effect that reads roomId lists it, and does componentDidUpdate's job too.
• "A set function merges like setState." No. setProfile({ name }) replaces the whole object. Spread the old one in first.
• "this.state changes as soon as I call setState." No. It changes on the next render. Use an updater function to build on the newest state.
• "PureComponent makes rendering pure." No. Rendering should already be pure. PureComponent skips renders when the props and state are shallowly equal.
• "I must rewrite all classes before upgrading." No. Classes and functions work together. Fix what React 19 removed, and migrate the rest when you change them.

Practice exercises

Each exercise shows its code's result. Read the class from the top: the state, then the methods, then render. Change the code with Edit & run, and the result updates as you type.

1import { Component } from "react";2 3export default class App extends Component {4  state = { name: "Asha", city: "Pune" };5 6  render() {7    return (8      <>9        <p>10          {this.state.name} from {this.state.city}11        </p>12        <button onClick={() => this.setState({ city: "Delhi" })}>Move to Delhi</button>13      </>14    );15  }16}

1import { Component } from "react";2 3export default class App extends Component {4  state = { name: "Asha", city: "Pune" };5 6  render() {7    return (8      <>9        <p>10          {this.state.name} from {this.state.city}11        </p>12        <button onClick={() => this.setState({ city: "Delhi" })}>Move to Delhi</button>13      </>14    );15  }16}

1import { Component } from "react";2 3export default class App extends Component {4  state = { count: 0 };5 6  addTwoTeas = () => {7    this.setState({ count: this.state.count + 1 });8    this.setState({ count: this.state.count + 1 });9  };10 11  render() {12    return (13      <>14        <p>Teas: {this.state.count}</p>15        <button onClick={this.addTwoTeas}>Add two teas</button>16      </>17    );18  }19}

1import { Component } from "react";2 3export default class App extends Component {4  state = { count: 0 };5 6  addTwoTeas = () => {7    this.setState((state) => ({ count: state.count + 1 }));8    this.setState((state) => ({ count: state.count + 1 }));9  };10 11  render() {12    return (13      <>14        <p>Teas: {this.state.count}</p>15        <button onClick={this.addTwoTeas}>Add two teas</button>16      </>17    );18  }19}

1import { Component } from "react";2 3export default class App extends Component {4  state = { wishes: ["Green tea", "Lemon cake", "Mint tea"] };5 6  removeFirst() {7    this.setState({ wishes: this.state.wishes.slice(1) });8  }9 10  render() {11    return (12      <>13        <p>Wishes: {this.state.wishes.length}</p>14        <button onClick={this.removeFirst}>Remove the first wish</button>15        <ul>16          {this.state.wishes.map((wish) => (17            <li key={wish}>{wish}</li>18          ))}19        </ul>20      </>21    );22  }23}

1import { Component } from "react";2 3export default class App extends Component {4  state = { wishes: ["Green tea", "Lemon cake", "Mint tea"] };5 6  removeFirst = () => {7    this.setState({ wishes: this.state.wishes.slice(1) });8  };9 10  render() {11    return (12      <>13        <p>Wishes: {this.state.wishes.length}</p>14        <button onClick={this.removeFirst}>Remove the first wish</button>15        <ul>16          {this.state.wishes.map((wish) => (17            <li key={wish}>{wish}</li>18          ))}19        </ul>20      </>21    );22  }23}

1import { Component, useState } from "react";2import { createConnection } from "./chat.js";3 4class ChatRoom extends Component {5  componentDidMount() {6    this.connection = createConnection(this.props.roomId);7    this.connection.connect();8  }9 10  componentWillUnmount() {11    this.connection.disconnect();12  }13 14  render() {15    return <h2>Welcome to {this.props.roomId}</h2>;16  }17}18 19export default function App() {20  const [roomId, setRoomId] = useState("general");21  const [show, setShow] = useState(true);22 23  return (24    <>25      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>26      <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>27      {show && <ChatRoom roomId={roomId} />}28    </>29  );30}

1import { Component, useState } from "react";2import { createConnection } from "./chat.js";3 4class ChatRoom extends Component {5  componentDidMount() {6    this.connection = createConnection(this.props.roomId);7    this.connection.connect();8  }9 10  componentDidUpdate(prevProps) {11    if (prevProps.roomId !== this.props.roomId) {12      this.connection.disconnect();13      this.connection = createConnection(this.props.roomId);14      this.connection.connect();15    }16  }17 18  componentWillUnmount() {19    this.connection.disconnect();20  }21 22  render() {23    return <h2>Welcome to {this.props.roomId}</h2>;24  }25}26 27export default function App() {28  const [roomId, setRoomId] = useState("general");29  const [show, setShow] = useState(true);30 31  return (32    <>33      <button onClick={() => setRoomId(roomId === "general" ? "travel" : "general")}>Switch room</button>34      <button onClick={() => setShow(!show)}>{show ? "Close chat" : "Open chat"}</button>35      {show && <ChatRoom roomId={roomId} />}36    </>37  );38}

1import { Component } from "react";2 3class Quantity extends Component {4  constructor(props) {5    super(props);6    this.state = { quantity: 1 };7    this.increase = this.increase.bind(this);8    this.decrease = this.decrease.bind(this);9  }10 11  increase() {12    this.setState({ quantity: this.state.quantity + 1 });13  }14 15  decrease() {16    this.setState({ quantity: Math.max(1, this.state.quantity - 1) });17  }18 19  render() {20    return (21      <p>22        {this.props.name}{" "}23        <button onClick={this.decrease}>−</button> {this.state.quantity}{" "}24        <button onClick={this.increase}>+</button>25      </p>26    );27  }28}29 30export default function App() {31  return <Quantity name="Tea" />;32}

1import { useState } from "react";2 3function Quantity({ name }) {4  const [quantity, setQuantity] = useState(1);5 6  function increase() {7    setQuantity(quantity + 1);8  }9 10  function decrease() {11    setQuantity(Math.max(1, quantity - 1));12  }13 14  return (15    <p>16      {name}{" "}17      <button onClick={decrease}>−</button> {quantity}{" "}18      <button onClick={increase}>+</button>19    </p>20  );21}22 23export default function App() {24  return <Quantity name="Tea" />;25}

1import { Component } from "react";2 3class Toggle extends Component {4  state = { open: false };5  toggle = () => this.setState({ open: !this.state.open });6 7  render() {8    return this.props.children({ open: this.state.open, toggle: this.toggle });9  }10}11 12function OrderCard({ order }) {13  return (14    <Toggle>15      {({ open, toggle }) => (16        <section>17          <h3>Order {order.id}</h3>18          <button onClick={toggle}>{open ? "Hide" : "Show"} items</button>19          {open && <p>{order.items.join(", ")}</p>}20        </section>21      )}22    </Toggle>23  );24}25 26const orders = [27  { id: 1042, items: ["Tea", "Cake"] },28  { id: 1043, items: ["Lemonade"] },29];30 31export default function App() {32  return orders.map((order) => <OrderCard key={order.id} order={order} />);33}

1import { useState } from "react";2 3function useToggle() {4  const [open, setOpen] = useState(false);5  return [open, () => setOpen(!open)];6}7 8function OrderCard({ order }) {9  const [open, toggle] = useToggle();10 11  return (12    <section>13      <h3>Order {order.id}</h3>14      <button onClick={toggle}>{open ? "Hide" : "Show"} items</button>15      {open && <p>{order.items.join(", ")}</p>}16    </section>17  );18}19 20const orders = [21  { id: 1042, items: ["Tea", "Cake"] },22  { id: 1043, items: ["Lemonade"] },23];24 25export default function App() {26  return orders.map((order) => <OrderCard key={order.id} order={order} />);27}

Check your understanding

For each code question, find this.state first, then follow each setState call.

Key takeaways

• A class component extends Component and has a render method. React makes one object per use, with this.props and this.state.
• this.setState merges an object into the state, one level deep, and this.state changes on the next render. Use updater functions to build on the newest state.
• A method passed as a handler loses this. Older code binds it in the constructor or writes it as an arrow class field.
• componentDidMount, componentDidUpdate, and componentWillUnmount split one job; an Effect with its dependencies does it whole.
• PureComponent is to classes what memo is to functions. Error boundaries are still classes.
• Higher-order components and render props shared logic before Hooks; custom Hooks do it without extra components.
• React 19 ignores defaultProps on functions and propTypes, and removed string refs, legacy context, and ReactDOM.render.

Coming next: Routing. It starts the React ecosystem: how a single-page app maps addresses to screens.