React class component vs. function component
There are two types of components in React:
- Class components
- Function components
Writing class components used to be the typical way to create components in React. However, after introducing React hooks in React , function components have replaced class components as the standard.
In this shot, we will see how these two types of components differ.
Don’t know what React components are? Click here.
Differences
Here’s an example of the class component Welcome:
class Welcome extends React.Component {constructor(props){super(props);this.state = {name: "World!"}}render() {return <h1>Hello, {this.props.name}</h1>;}}
The same class component rewritten as a function component:
function Welcome(props) {const [name, setName] = React.useState("World!");return <h1>Hello, {name}</h1>;}
Syntax
Let’s start with the syntax.
Class components use the ES6 class syntax. Each component inherits from the React.Component class and has a render method that returns the React element. You can define a constructor to access the props.
Function components, on the other hand, are simple JavaScript functions that accept a props object and return a React element.
Both components, from React’s point of view, are equivalent. However, as you can see, function components allow you to create the same component with considerably less code.
State and lifecycle methods
Before React 16.8, function components were stateless. However, with React 16.8, you can use the useState and setState hooks to have stateful function components (just like class components).
Similarly, with lifecycle methods, you can use the useEffect hook with function components to achieve the same effect as you would with lifecycle methods (like componentDidMount() in class components).
Want to learn more? Check out our React learning path here.
Free Resources
