Class VS. Function: Refactoring & Their Differences

There are two ways you can write components in React. You can either write a Class or Function component. The major difference between the two is that with the class component is stateful (can have state) and the functional component is not. As React State — W3Schools says, “the state object is where you store property values that belongs to the component.”Only class components have state. Also, in functional components you have a return function. Another, minor difference is that functional component doesn’t need to extend the React.Component .

Now that you understand the purposes of Functional and Class components, let’s refactor! Here is an example of a functional component.

The first thing you want to do to refactor a functional component into a Class component is to change the functional component to the Class of app that inherits from React.Component. You will also need a keyword called render.The renders job is to return the jsx that is to be rendered on the DOM.

The next step is to add the state to the class component, if you need one. To save state to a Class Component you must put state in the top of the render function and set it to a plan javascript object.

Another major difference between Class component and Functional component is how they handle the keyword this. If you are trying to pass down the state prop, you must use the words this.state and then proceeding along with adding the prop. For example, if we had a container called ArtistContainer and we wanted to pass down the state of artists, we can do so by writing this.state.artists and setting the key to the same key that is in the state. Also, in doing this you want to make sure you are wrapping the prop you pass down in curly brackets {}. Here is a visual example:

If you are deeper in the tree of passing down a prop, you should use this.props. These examples are little more complex because they have more layers to them.Below, I have an ArtistLink component and it is pulling props from the artist that was in my state in the parent component. You can see here we are using this.props.artist to access the different properties in the artist.

As mentioned above, there is no state when dealing with functions so one of the major differences is not using state to pass down props. The second is not using the word this. The first thing is that you will be writing the props in as an argument. Second, to pass down a prop in a function, you would put this.props. or if your mapping over an array of POJO’s (Plain Javascript Objects), you will set props to the array of objects. Here is what I mean:

Here we have an Artist container creating an array using the props.artists but not only is it using the props, it’s mapping over all the arrays to pull one object at a time to then return to the DOM.

Class and Function components both play very important roles. Instead of being scared to use one over the other, just use both! Use the one that best suits what your trying to do. If you are just passing down the object and you’re not changing the state of the object, function components are the way to go. If you are updating the state, it’s best to go with Class components.