The different types of React components

Class Components

Likely the component type that you first started out with. This has all the features you would want to work with, such as lifecycle methods or “this”. Let’s take a look on what the syntax is like.

class Post extends React.Component {
render() {
return (
<div>
<h1>{this.props.user}</h1>
<h4>{this.props.text}</h4>
</div>
)
}
}

Pure Components

No, this doesn’t mean that these are “more of a component” than class components are. The word “pure” in this sense refers to how it handles props and state. When a component in React has its props or state updated, even if the values may be the same, it will re-render the component. Pure components do away with re-rendering by comparing the props and state each time values are passed in and only re-render should the values be different. This prevents a lot of unnecessary performance hogging. The syntax is also the exact same as above, except it will be “React.PureComponent” instead of “React.Component”.

Functional Components

We can get even deeper than that for component optimization. Let’s say we don’t even need a state or any lifecycle methods in the component we want to make. Perhaps all it needs to do is just take information and present it. That’s what functional components are good for. It completely avoids all the lifecycle checks that the other components do and just go straight to inheriting props, if any, and displaying them. Here’s a sample code:

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store