Different Types of React Components

React is a Javascript used to build User Interfaces or UIs. It’s a very dynamic front-end language that is made up of Components. Think of them like building block that make up a web page.Each component returns JSX which is code very similar to HTML, the JSX code shows what will display to the DOM. Imagine the homepage of Youtube.com, for example. The search bar at the top of the page would be a component, and each video preview you see as you scroll through the page would be components as well. This means that React components can be easily reusable to build UIs. This post is going to discuss the different types of React Components programmers encounter when working with React.

1. Functional Components

As the name would suggest, a Functional Component is simply a Javascript function. Because it’s only a function that returns some code, it doesn’t need to interact or require data from other components and does NOT have state like a Class Component. Below is a very basic example of a Functional Component. Let’s say it’s the header for a website:

function Header() {
  return <h1>Your Header Here</h1
}

That’s pretty much it.

2. Class Components

Class components are slightly more complex than Functional Components in that they can interact with one another and pass data between them. Something else a Class Component has is a ‘render()’ method which is required to render whatever code you need to display.

class Header extends Component {
   render() {
    return <h1>Your Header Still goes here</h1>
  }
}

Word to the wise: If you build out a class component that only renders something, make it a Functional Component. I’m aware the above example breaks this rule.

Now at this point the question gets raised: when should each component get used?

Start with making Functional Components first. They are easier to read and therefore debug. There’s no need to deal with state which can cause some annoying side effects. It’s very easy to refactor a Class Component into a Functional Component.

If the components need to do more than simply rendering that’s where Class Components come in. When dealing with state and lifecycle methods and having things constantly changing within the component itself, Class Components become a programmers best friend.

Yes, there are more types of components than Functional and Class Components, but these two are the most common ones to encounter in React and therefore it is essential to understand when and how to use or not use them.