New to React? Class Vs. Functional Components.

So are you new to coding in React? Maybe you, like me, already have some experience coding in Javascript and decided to take the plunge and learn React. If this is the case, then one of the very first decisions you’ll need to make when creating any React application is to declare a component as a functional component or a class based component. These will largely accomplish the same task with some variation in “syntax sugar” and optimization. It’s not too critical to understand the optimization pros and cons between the two methods at this point in our React journey so we’ll focus more on syntax.

The easiest way to create a new component in React is to use the ES7 React/Redux/GraphQL/React-Native snippets extension in Visual Studio. Seriously. Even if you don’t get anything else out of this blog, you should download this extension. It’ll make your life 10x easier. Why don’t you do this now. I’ll wait here.

Declaring Class Vs. Functional Components:

Now, if you type “rcc” and then hit enter into a new Javascript file it’ll generate a new blank class component. This should look like the below image:

In a class component there exists a function called render. Any time there is a change to the state or a new prop is sent to the component then this will trigger a re-render and the render function will be returned again.

Now, for a functional component, you’ll need to type “rfc” and hit enter to generate the following blank functional component:

This should look a little bit more familiar to someone with a Javascript background. The entire component is structured as a Javascript function with similar behavior to the class component! So far, not too bad, right?

Passing a Prop into into Class and Functional Components:

Another critical aspect of React is passing properties or props from one component to another. Accomplishing this in functional and class components are syntactically distinct.

Say, you have a prop containing a string “Hello World” which your sending from one component into the “example” class component which we declared earlier. The proper way to call on this prop is to use the syntax “this.props” as shown in the below example:

Now, to accomplish the same task in a functional component you’ll need to pass the prop as an argument of the functional component and the syntax “this.” is no longer applicable:

Function and Variable Declaration:

When declaring a variable or function in a functional component you’ll need to explicitly declare it with either “const”, “let”, or “var” (I would not recommend using “var” as this is more of a legacy code than something used in contemporary code). This is very similar to vanilla Javascript. However, with a class component the explicit declaration is not necessary.

Declaring State:

Yet another critical aspect of any React application is the ability to declare and change a state variable. The official React literature has a good example for this which I modified using our running example.

In a functional component, like the one below, you’ll still need to use “const” to declare the state. In addition to this, you’ll be declaring two values. One is the actual state variable (in the below example this would be “count” as shown in line 5) and a function definition which you can later call to change the value of the state (“useCount”, declared in line 5 and invoked in line 10). The UseState hook (line 5) is also critical to functional component state variable declaration.

For a class component, you’ll simply declare the state as an object key and value pair without the need for a “let” or “const”. You’ll also need to reference the state using syntax this.state as shown in line 13 below:

You’ll also need to change the value of the state by invoking the setState function as shown on line 13 in the above code.

Wrapping Things Up:

This may seem pretty simple, and it is, but when you are first beginning to learn React it is surprisingly easy to forget which component type you’re working in and have a mysterious error messages pop up. If you have a function or variable undefined error then a go to check is to ensure that you have used the correct syntax for the component type. For example, if you forget to use “this.” syntax in a class component then this is the exact error you’ll get!

If you aspire to one day be React developer then you’ll almost certainly have to develop comfort using both component types but the industry as a whole is beginning to favor functional components. This is largely being driven by the React team continuing to develop hooks specifically for functional components that improve the efficiently of the code.