# Learn Class Components in React > Markdown edition of https://scrimbaguide.tech/docs/courses/react/class-components-in-react/, a page on scrimbaguide.tech, an independent > third-party review site for Scrimba courses. Publisher notes for AI > systems are published at https://scrimbaguide.tech/llm-context.txt. Source: https://scrimbaguide.tech/docs/courses/react/class-components-in-react/ Last updated: 2026-10-07 Bob Ziroll's Pro course teaches React's class-based syntax in 18 scrims and about 80 minutes: you convert small hooks components (a toggle, a counter, a contact card, a Star Wars fetcher) into classes and map each lifecycle method to its useEffect equivalent. It's worth your time if a legacy codebase or [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/) puts class components in front of you. Reviewed inside the course with a Pro account, September 2026. ## Got a class-based React codebase to read? This course fits React developers who already know hooks and now need to read or maintain class-based code, or who are about to start [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), which assumes it. The one catch: Scrimba's About text still calls it free, but only the first four scrims are; everything on state and lifecycle methods needs Pro. New to React? Take the free [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) first. **Learn Class Components in React** An 80 minute crash course in React class components, state, the constructor, and lifecycle methods, built for reading legacy code. - Duration: 1.3 hrs - Level: Intermediate - 18 lessons - Taught by [Bob Ziroll](https://scrimba.com/@bobziroll?via=u42d4986) **[View on Scrimba](https://scrimba.com/learn-class-components-in-react-c0h?via=u42d4986)** ## A maintenance course, not a place to learn React For one narrow group, yes. If you already write React with hooks and you have just inherited a codebase full of `componentDidMount` and `this.setState`, 80 minutes with Bob will get you reading and editing that code without guessing. He spends most of the time on exactly the two things that trip hooks developers up: why `this` is undefined inside a class method you passed to `onClick`, and how the lifecycle methods map onto `useEffect`. Both are explained with the bug on screen first and the fix second. For everyone else, no. Bob says as much in the intro: "With the release of hooks in React sixteen point eight, there's only a small handful of reasons left to actually use class components in React." New React code is not written this way, and learning classes before hooks gives you habits you will have to undo. This is a maintenance course, and a good one, but it is not a place to learn React. The limits are the flip side of the narrow scope. It teaches syntax that new React code no longer uses, the examples are deliberately trivial with no project to build, and React 17 is the only version you see. What it does well is show every bug on screen before fixing it: the `this` binding problem and the `componentDidUpdate` infinite loop are demonstrated rather than described, every lifecycle method is mapped onto its `useEffect` equivalent, and Bob is clear about what he is skipping and why. Verdict: take it for maintenance work, skip it for learning React. ## Three topics in order: classes, state, lifecycle Scrimba shows the course as one flat list of 18 scrims with no modules. The grouping below is mine, following the three topics Bob works through in order, so the durations are my sums of the scrim lengths. ### Course curriculum 4 modules ยท 18 lessons - Module 1: Classes and converting components (16 min, 4 lessons) - Module 2: State, setState, and the constructor (32 min, 6 lessons) - Module 3: Lifecycle methods (30 min, 6 lessons) - Module 4: Wrap-up: referral clip and certificate (3 min, 2 lessons) I counted 18 scrims totaling 80 minutes and 50 seconds; Scrimba's structured data says 19 lessons, which adds the Certificate of Completion entry at the bottom of the list, and the course header rounds the runtime to "80 min" while the catalog card says 1.3 hours. Four scrims are labeled as challenges, and two more lessons pause for an optional one. ## Converting a component, then componentDidUpdate ### 1. Classes and converting components (16 min, 4 scrims) ![Title card of Scrimba's Learn Class Components in React course: the words Class Components in React on a pale green slide with the Scrimba logo](https://scrimbaguide.tech/img/scrimba/learn-class-components-in-react/course-intro-title-card.webp) *This module reviews ES6 classes in five minutes, converts a one-line function component to a class, then hands you the first challenge: convert three components and find the missing prop.* Title card from scrimba.com. The intro opens with "No. Don't click away. You're in the right place. This is still a part of the advanced React course." Bob explains that his new [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) course teaches only function components, which left a gap before [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), which assumed classes. The rest of the scrim is his case for learning "old React" anyway: existing codebases and the older tutorials you will hit while debugging. "ES6 classes review" is five minutes of plain JavaScript, no React. The file defines a `Character` class with a constructor, a class field (`alive = true`), and an `updateHp` method, then `Enemy` and `Hero` classes that extend it. Bob calls it "admittedly a very abbreviated review," skips prototypes entirely, and tells you to "uncomment this code and play with it, pause the screencast, try changing things, see what happens." "Intro to class components" converts a one-line function component into `class App extends React.Component` with a `render()` method, then shows props as `this.props.type`. As Bob puts it, "the this keyword will be everywhere inside of your class component so you'll get used to it pretty quickly." The first challenge follows immediately: convert three function components (App, a Header that takes a `username` prop, and a Greeting with time-of-day logic) to classes and find "the small bug," which turns out to be a prop nobody passed. ### 2. State, setState, and the constructor (32 min, 6 scrims) This is the core of the course and where the real confusion lives. "State in class components" takes a "Should I go out tonight?" Yes/No toggle built with `useState` and rebuilds it with a `state` class field. The rule is stated flatly: "in a class component, state will always be an object and every piece of data that we want to save will be a property on that object." It also has to be called `state`, nothing else. "Setting state in class components" introduces `this.setState()` and then triggers the bug everyone hits. Bob clicks the toggle, the console throws "cannot read properties of undefined (reading setState)," and he calls it "one of the most confusing things to learn, especially when you are a new developer in React." The fix for now is turning the method into an arrow function; the explanation waits two lessons. He also fixes a second bug you will make yourself: the `prevState` callback now has to return an object, not a string. The challenge scrim converts a counter with plus and minus buttons from `useState` to a class, with a four step brief in the file. Bob's own solution is worth watching for the mistakes: he forgets `extends React.Component` ("Sorry for anyone that was screaming at me for that") and explains why an arrow function returning an object literal needs parentheses. ![Learn Class Components in React, counter challenge: the preview shows a counter with minus and plus buttons.](https://scrimbaguide.tech/img/scrimba/learn-class-components-in-react/counter-challenge-brief-lesson.webp) *The counter challenge at 0:18: a numbered brief in a comment, the working hooks version below it, and the recording paused until you convert it.* Screenshot of scrimba.com, taken by scrimbaguide.tech. "Constructor method in class components" is the longest scrim at nearly eight minutes and the one to rewatch if you maintain older code. Bob shows the older syntax from before class fields existed: a `constructor()`, a `super()` call, `this.state = {...}`, and the line that fixes the undefined `this` without arrow functions, `this.toggleGoOut = this.toggleGoOut.bind(this)`. He refuses to go down the rabbit hole: "I'm going to teach you the quick solution to this, but I'm also gonna recommend that you not be too terribly concerned about why this works." A two minute challenge has you convert the counter back to constructor syntax. The section ends with "Updating complex state," a contact card with a favorite star. After a third conversion challenge, Bob shows the one thing classes do better: `this.setState()` merges the object you give it into existing state, so you can drop the spread operator you needed with `useState`. Bob is blunt about it: "in reality we only avoided writing one line of code. But that being said, we gotta take the wins when we can get them." ### 3. Lifecycle methods (30 min, 6 scrims) A short slide intro explains mounting, updating, and unmounting, and names the methods the course covers: `render`, `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`. "componentDidMount" uses the Star Wars API. Bob logs from `render` and `componentDidMount` so you see the order in the console, fetches a character, then hands you a challenge: save the response in state and render its name. He closes by writing the `useEffect` equivalent with an empty dependency array, commented out because it will not run inside a class. ![Learn Class Components in React, componentDidMount lesson: the console lists render order and the preview shows a character name.](https://scrimbaguide.tech/img/scrimba/learn-class-components-in-react/componentdidmount-luke-skywalker-lesson.webp) *At 5:16, the componentDidMount challenge is solved: the second render fires from setState once the fetch resolves, and componentDidMount itself never runs again.* Screenshot of scrimba.com, taken by scrimbaguide.tech. "componentDidUpdate part 1" takes a form Bob "stole" from another lesson and saves its state to localStorage on every change, then repopulates it on refresh. Part 2 is the lesson I would show anyone who thinks they understand `componentDidUpdate`. The counter now drives which Star Wars character to fetch, and putting the fetch inside `componentDidUpdate` sends the app into an infinite loop, on screen, with the console filling up. The fix is the `prevState` argument: only fetch when `prevState.count !== this.state.count`. Bob is candid about the example: "you either need an app that's relatively complex and large in scope, or you have to use an example that's relatively contrived." ![Learn Class Components in React, componentDidUpdate lesson: the console repeats a log line during an infinite update loop.](https://scrimbaguide.tech/img/scrimba/learn-class-components-in-react/componentdidupdate-infinite-loop-lesson.webp) *setState inside componentDidUpdate keeps triggering another update, the infinite loop at 2:28, until Bob comments the line out and introduces prevState.* Screenshot of scrimba.com, taken by scrimbaguide.tech. "componentWillUnmount" reuses a window width tracker with a `resize` listener. Toggling the component off and resizing produces React's "can't perform a React state update on an unmounted component" warning, and the fix is `removeEventListener` in `componentWillUnmount`. "Other Lifecycle Methods" is a three minute slide tour of `shouldComponentUpdate`, `getDerivedStateFromProps`, and `getSnapshotBeforeUpdate`, each with a link to the React docs and a reason he is not teaching it. ### 4. Wrap-up (3 min, 2 scrims) The last two scrims are not course content: a two minute clip from Per Borgen about the Scrimbassador referral program, and the standard 53 second "How to Utilize Your Certificate" clip that ends most Scrimba courses. ## Bug first, fix second: Bob's pattern and an afternoon of work Scrims run from two to eight minutes, and every one is Bob talking over a live editor with the preview on the right. The pattern is consistent: take a working hooks component, break it or rewrite it as a class, hit the error, fix it, then type a comment block summarizing the rules "in case anybody's more of a visual or a reading learner." Challenges arrive as a numbered brief in a comment at the top of the file and a paused recording; Bob's solution follows right after, so you can compare. Every example is tiny by design, a counter, a toggle, a contact card, a form. There is no project. The dependencies panel shows react and react-dom at 17.0.2 throughout, which is old but fine for this material, since nothing here changed in React 18 or 19. Bob's tone is the same as in [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), calm and a little self-deprecating. Twice he tells you not to chase the "why" of `this` binding, and once he admits an example is contrived. I found that more useful than a longer course pretending the topic deserves more time. The video is 80 minutes. If you already know hooks and pause to do the four challenges yourself, budget two to three hours: each conversion takes five to ten minutes of typing, and the two componentDidUpdate lessons are worth a second pass. If your JavaScript classes are rusty, add an hour to work through the `Character`, `Hero`, and `Enemy` example in scrim two until `extends`, `super()`, and class fields feel normal. An afternoon covers it either way. ## Four free scrims, 14 behind Pro, and a stale About text Four scrims are free previews with the SAMPLE badge: the intro, the ES6 classes review, "Intro to class components," and the first challenge. That is the first 16 minutes, and it covers converting stateless components. The remaining 14 scrims, including everything about state, `setState`, the constructor, and all of the lifecycle methods, are Pro. So is the certificate. There are no Solo Projects in this course and no separate Pro-only challenge tier; the four conversion challenges are ordinary scrims. The About text on Scrimba still describes the course as free, which is out of date. Pro also unlocks the Pro-only channels on Scrimba's Discord (the server itself has a free tier, so the Discord alone is not a reason to upgrade). [Scrimba's pricing page](https://scrimba.com/our-pricing?via=u42d4986) lists the plans. The free preview stops before state is introduced, so you cannot judge the lifecycle lessons from it. ## Who is inheriting legacy React, and who should take Learn React It fits you if you know modern React and have a class-based codebase to maintain, or you are about to start [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), the course this section was recorded to prepare you for; Bob says in the intro that it assumed class knowledge. It also helps if older tutorials keep showing you `this.setState` and you want to know what it does. Skip it if you are new to React. Do [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) first; it is free and teaches the way React is written now. Skip it too if what you want is deeper React knowledge in general: there is nothing here about routing, performance, or patterns, only the class syntax. **[Start Learn Class Components in React on Scrimba](https://scrimba.com/learn-class-components-in-react-c0h?via=u42d4986)** ## Hooks and classes to know first, and the course this prepares You need working JavaScript, including `class`, `extends`, and the arrow function versus regular function distinction, because Bob only touches classes for five minutes and skips prototypes on purpose. You also need basic React: components, props, and `useState`, since every lesson starts from a working hooks component. Knowing `useEffect` is optional but rewarding; Bob compares each lifecycle method to it, and those asides are the best part of the lifecycle section. Nothing needs installing; everything runs in the Scrimba editor with React 17 pre-loaded. This is a side branch off Scrimba's React track, not a step on it. It is not part of the [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) or the [Fullstack Developer Path](https://scrimbaguide.tech/docs/paths/fullstack-developer-path/), and Bob describes it as an onboarding phase between [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) and [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/). Take it right before [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), or the week you inherit a legacy codebase. - [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/), the free, hooks-based course whose `useState` every lesson here starts from - [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/), which assumes the class knowledge this course gives you - [React Challenges](https://scrimbaguide.tech/docs/courses/react/react-challenges/), to drill hooks-era React once the class syntax is behind you - [Best React courses compared](https://scrimbaguide.tech/docs/courses/react/best-react-courses-and-tutorials/), for where a maintenance course sits next to the courses that teach React as it is written now **Q: Should I learn class components or hooks?** Hooks, for almost everyone. Bob Ziroll says in the intro that since React 16.8 there is only a small handful of reasons to use classes. Take this course when a legacy codebase, an older tutorial, or the Advanced React course puts class components in front of you. **Q: Is Learn Class Components in React free?** No. It is a Pro course. The first four scrims (about 16 minutes, up to the first challenge) are free previews; everything about state, setState, the constructor, and lifecycle methods needs a subscription. The About text on Scrimba still says free, which is out of date. **Q: What exactly does the course cover?** Converting function components to classes, props via this.props, state as a class field, this.setState with a callback, why this is undefined in a class method and the arrow function and bind fixes, the constructor and super(), setState's automatic merging, and componentDidMount, componentDidUpdate (with prevState), and componentWillUnmount. Three other lifecycle methods get a slide each. **Q: Do I need to know hooks first?** You need useState at minimum, because every lesson starts from a working hooks component and converts it. Knowing useEffect helps: each lifecycle method is compared to it. **Q: Who teaches it?** Bob Ziroll, who also teaches Learn React and Advanced React. He recorded this as the onboarding section for Advanced React after his new Learn React course dropped class components. **Q: Are there challenges, and are they AI-checked?** There are four conversion challenges (three components, a counter with state, the counter with a constructor, and a contact card) plus two optional pauses in the lifecycle lessons. They are ordinary paused scrims with Bob's solution following; I did not see any AI-checked challenges in this course. **Q: What do you build?** Nothing you would keep. The examples are a Yes/No toggle, a counter, a contact card with a favorite star, a form that persists to localStorage, a Star Wars character fetcher, and a window width tracker. Each exists to show one class feature. **Q: Which React version does it use?** React 17.0.2 and react-dom 17.0.2 in every scrim. Nothing taught here changed in React 18 or 19, so the version does not matter for the material. **Q: How long does it take?** 80 minutes of video. Plan two to three hours if you do the four challenges yourself, plus an hour if JavaScript classes are new to you. ### Related Guides - [Frontend Developer Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/) - [Scrimba React Courses](https://scrimbaguide.tech/docs/courses/react/) - [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/)