There are two different ways that you can build components within ReactJs, functional and class components. In this tutorial, you will learn about these two types and by the end, you should feel confident to know when to use each one. Both components have respective pros and cons. By the end of the article, you will understand these differences. Note, this article was written pre-React 16 where a functional component had worse performance than they do now, React hooks were also no invented at the time of writing!!!
Functional Components
The simplest type of component you can build within ReactJs is the functional component. A functional component as the name implies is a Javascript function that returns some JSX. A simple component to render a heading could look like this:
The code above should be easy to reason about. We define a function, return some JSX. A functional component is simply a JavaScript function that has props passed in as an argument and returns a React element. Simples, 💥💥💥!
Class Components
Building a class component is slightly more complex. Instead of defining a function, we define a class. The class needs to inherit from React.Component
. As class components are not functions, you will also need to define a function inside your class to return the HTML, the name of this function is render()
. The same component built using a class component would look like this:
There are several benefits of using functional components. The code to define a functional component is simpler. Writing tests to check that the component works is easier and involves less mocking. Historically, the main deciding factors to build a component using either a functional or class approach was state and life-cycle hooks. React.component
comes with several life-cycle hooks/methods out of the box, including:
constructor()
: Called on class creates, useful to manage the initial component state.render()
componentDidMount()
: Called after the component has mounted, e.g. the HTML from render has completedshouldComponentUpdate()
: Called before the component is re-rendered and when new props or new state changecomponentDidUpdate()
: called after any rendered HTML has finished loading
Before React 16 you could not manage state within a functional component. As of React 16.8, this is no longer the case. With the introduction of React context and React hooks, you can now build a functional component that can also manage state.
Another historic reason to favour a class component was performance. Even though class components look to be more complex, in the backend the ReactJS rendering engine performed additional performance optimizations on them. These optimisations were not applied to a functional component, which made them slower. As of React 15, functional components are just as fast as class components.
Which One Should You Use?
When building a new component I recommend that you always start with a functional component first. If the component needs to get more complex and you need to consider state. First, consider using a hook before just using a class component straightaway.
As React evolves there is less reason to use a class
container over a functional component. When writing code it is best to keep it simple. Only convert a component into a class component when you bump into something that you can not do using a functional component. I have even seen some developers fail a job application as they favored a class component over a functional component, so beware! Happy Coding!