Mosh React Tutorial (part 6) | Chinese Rule of Eight

Stateless Functional Component

When your class component does not have any state or events, we can turn it into a stateless functional component.
Basically, it’s just a function that returns the render JSX.

Since we turn it from a class to a function, the ‘this’ will not apply because it becomes undefined. What we need to do is put props in the parameter, and React will pass the props in during runtime.

We first define a const NavBar reference to our state function. This reference cannot be re-assigned and must always point to our stateless functional component.

In the body of our arrow function, we return JSX.

const NavBar = (props) => {

return (

Navbar

<span className="badge badge-pill badge-secondary">{props.totalCounters}</span>

</a>

</nav>

);

}

export default NavBar;

So instead of having a class that extends Component, which gives us the usage of lifecycle methods, we simply define a function that returns a React Element.

That’s why we call this stateless. Dealing with simple stateless components, we dont’ always need all that is given to us by classes. We have the option of using stateless components.

shortcut: sfc

Also, notice that in class components, we can use the ‘this’ reference to refer to our component instance, and different calling environment, and context.

However, a stateless component has no state. This means that you can’t reach this. state inside it. It also has no lifecycle so you can’t use componentDidMount and other hooks.

Hence, you must pass props through the parameter. Due to it being an arrow function, the this is the parent context. The parent context of a state component is undefined. You cans imply log ‘this’ outside of your stateless component, and then log it again inside. You will get undefined on both accounts.

For example:

import React from 'react';

console.log(this); // undefined

const CharacterGrid = ({ items, isLoading }) => {

console.log(this); // undefined

return '<h3>hello</h3>';

}

export default CharacterGrid

Destructuring Arguments

We can use object destructuring when it comes to props so that we don’t get props.—— all over our state components.

const NavBar = ({ totalCounters, name, ...etc }) => {

}

Similarly, we can also do this for prop usage in class components.

Now, anywhere we have this.prop…we can simply replace them with destructured properties.

render() {

const { onReset, counters, onDelete, onIncrement } = this.props;

return (

<div>

<button

onClick={onReset}

className="btn btn-primary btn-sm m-2">

Reset

</button>

{counters.map(counter => (

<Counter

counter={counter}

key={counter.id}

selected={true}

onDelete={onDelete}

onIncrement={onIncrement}

))}

</div>

);

}

Lifecycle Hooks

Our component go a through few phases during their life cycle. The first phase is Mounting phase. And this is when an instance of component is created and inserted into the DOM.

There are few special methods that we can add to our components and REACT will automatically call these methods. We’ll refer to these methods as Life Cycle Hooks.

Allow us to hook into certain moments during lifecycle of a component, and do something.

React will call these in order.

1st Lifecycle Phase: MOUNT

Constructor
Render
componentDidMount

This happens when state or props get changed.

2nd Lifecycle Phase: UPDATE

render
componentDidUpdate

3rd Lifecycle Phase: UNMOUNTING

componentWillUnmount

Let’s see them in action

Insert logs in Counter.js, and App.js for constructor and render.
You will see how React calls them in order.

— App constructor —
App render —
Counter constructor —
Counter rendering for Counter 1
Counter constructor —
Counter rendering for Counter 2
Counter constructor —
Counter rendering for Counter 3
Counter constructor —
Counter rendering for Counter 4
Counter constructor —
Counter rendering for Counter 5
App componentDidMount–