React Hooks Vs Class Components? Complete Example Tutorial

Hooks vs Class Components

• Class Components: Use state and lifecycle methods inside ES6 classes.
• Hooks (Functional Components): Use useState, useEffect, and other hooks in functions for state and side effects.

---

Class Component Example

import React from "react";

class Counter extends React.Component {
  state = { count: 0 };

  increment = () => this.setState({ count: this.state.count + 1 });

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

✅ Uses state and methods inside a class.

---

Hooks Example

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

✅ Uses useState hook in a functional component.

---

Key Points

Feature	Class Components	Hooks (Functional Components)
State	this.state	useState
Lifecycle	componentDidMount, etc.	useEffect
Syntax	ES6 class	Functions + hooks
Readability	More boilerplate	Cleaner & concise
Reusability	Harder to reuse logic	Easy with custom hooks

---

Conclusion

React Hooks simplify functional components, provide reusable logic, and reduce boilerplate compared to class components.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP