Making Sense of Class Components vs Functional Components in React.Js

If you have ever used React, you probably know that one of the core aspects of it is the reusability of components to make creating web apps more efficient. Components are the foundation of using React, as they are what enables the user to cleanly write JSX (JavaScript XML), which React processes and converts into html.

Functional Components in React

Functional components are just like regular functions in JavaScript, they have a function declaration, along with a name, and are able to take in arguments as props. Both regular function declaration and the newer arrow functions work and achieve the same result in react, with the JSX being rendered in the return statement of the function.

The simplest form of making a component is a JavaScript function. Functional components can also make use of handy hooks in React, such as managing state with the useState hook, and executing code at a specific time using the useEffect hook.

Class Components in React

The first main difference between a class component and a functional component is the syntax.

A class is declared, and it needs to extend React.Component, as well as have a render function where the JSX is returned. Both examples of the class and functional component above achieve the same result, and render an h1 that says “Hello, world”.

Props

Both class and functional components are able to make use of props that are passed down to them.

In functional components, the props are passed down to the component wherever it is being called, which then gives that component access to them through the props parameter. This parameter can also be destructured if you know the name of the props being passed in.

In a class component, you access the props by using the class keyword “this”. The above example also destructured the props so that { name } is used in the JSX. Both examples above again achieve the same result, but are gone about differently.

Managing State

To use state in a functional component, you need to import state from react at the top of your component. After that you simply create a new state with a state variable, and a setter function.

State is declared in an array to destructure the useState hook into a variable that the initial value is set to, along with a setter function (setState) which is used to change the value of that state.

Class components work a bit differently for using state due to the nature of the Component class constructor. The official documentation on it looks like:

“The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.”

Without calling super(props), your state will be undefined. You also need to make use of the constructor method to be able to do this as well.

We define the constructor and inside make a state object with a key and initial value. Then, to access that state, we would use this.state.count. To update state in a class component we would do the following:

If you’re like me and haven’t had much experience with class components in react, this could seem a bit confusing. For more information on how to use state in class/functional components, you can refer to the docs: https://reactjs.org/docs/state-and-lifecycle.html

Main Takeaways

As of the latest version of react, the first most noticeable differences between class and functional components is simply their syntax. Both are able to achieve a lot of the same results, as well as make use of hooks in their components. One of the main benefits of using functional components over class ones is that functional components are clean and easy to read. The syntax for them is shorter and simpler, and you don’t have to worry about using this. to access information. In the past, functional components were not able to make use of hooks, which gave class components more flexibility as well as complexity in what they were able to do vs functional ones. Now that hooks are being implemented in functional components, they are becoming the new norm for react developers to use.

Another good article that does a good job of explaining some of these differences, along with other differences, is here: https://www.twilio.com/blog/react-choose-functional-components