Part 2 Create Games using: React-Redux Class vs Functional Component

Hi Programmers!! Last part I explained how to set the Reducer and Action Creator to get your state all over the app, if you missed the blog, here you’ll find the link.

Create Games using: React-Redux

This is my second blog about creating a game using React-Redux, which is fun comparing to plain React. But the big question I used to ask myself, should I use Functional component or Class component??

First let’s first understand what they are and what are they being used for:

1- Functional Component

A Functional component is a function that takes props and returns JSX. They do not have state or lifecycle methods. Functional components are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability.

A Functional Component is much more simpler than a Class component and a perfect example, You don’t need to add this every time you are calling props, or build constructors and defining a variable or a function is easier than Class component which needs to be bound to the Class.

Although you can’t declare a State in a functional component, Hooks come really helpful in this part as Example:

• useState() works exactly like Class’s State.
• useHistory() is my favorite as you can redirect your page to any route.

import React, { useState, useHistory } from "react";
const Person = (props) => (
 let history = useHistory()
 let {count, setCount} = useState()
  <div>
    <h1>
      name: {props.name}
    </h1>
    <p> {count} </p>
  </div>
);


export default Person;

2- Class Component

Class components make use of the ES6 class syntax. Since classes can have methods, these components can make use of life cycle methods like for example componentWillMount and componentDidMount. Have a look at the above example, rewritten as a ES6 class component.

import React from "react";

Class Person extends React.component {
   state = {
            count: 0
        }
   render() {
            <div>
                <h1>
                   name: {props.name}
                </h1>
                <p> {this.state.count}
            </div>
}


export default Person;

It is very obvious that Functional components are simpler in code.

In my game I did all my components functional until I ran into Lifecycles and that is the first con about functional component.

What you really can’t find alternative for in Functional components is the different LifeCycles, which is the main reason why I am writing this blog.

useEffect(() => {    
        // fetch Trees 
}, [])

If you are familiar with Class components, There are many Life Cycles functions such as:

• ComponentWillMount.
• ComponentDidMount.
• ShouldComponentUpdate.
• ComponentDidUpdate.
• ComponentWillUnmount.

Each LifeCycle here has a different job and I will explain it here:

1- ComponentWillMount, I needed a Lifecycle to prepare my component before mounting it, which will fetch a new Atmosphere with its trees, oxygen and Carbon dioxide.

componentWillMount() {
       //fetch post Atmosphere and assign it to Reducer's Atmosphere
 }

2- ComponentDidMount, I needed a LifeCycle to set the temperature and the weather which will just change the state of the component .

componentDidMount() {
       // this.displayWeather()
 }

3- ShouldComponentUpdate, this is a debatable LifeCycle to use, but every time something gets updated in your component, I can approve or disapprove the update.

4- ComponentWillUnmount, I could use this to clear the screen or fetch delete the atmosphere like this.

componentWillUnmount() {
fetch(`http://localhost:3000/atmospheres/${this.props.atmosphere.id}`, {
 method: 'DELETE'
})
}

All that been said, which component should you use ? Class or functional component?

I use both, but if you need LifeCycles, Class components are more powerful than Functional components.

I hope this was helpful,

Next I will write about how SetIntervals are very helpful when you create a game using React-Redux.

Mokhtar Ali