The main difference is how they handle state and lifecycle logic. A function component is a plain function that uses Hooks such as useState. A class component extends React.Component and uses this.state and lifecycle methods. Function components are the preferred approach in modern React, and classes are a legacy approach React still supports.
Function components have simpler syntax and are easier to test and debug. They skip some class overhead, like creating instances and binding handlers, but raw performance is about the same.
function MyComponent(props) {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}
Class components are more verbose and return JSX from render(). They use lifecycle methods such as componentDidMount and have access to the this context.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <div>{this.state.count}</div>;
}
}
Error boundaries still require a class, because there is no way to write one as a function component.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓