React basic 4 — Class Based Component and Lifecycle Methods

In contrast to the functional component from the previous post (React basic 3 — Reusable Functional Components), if your component should manage states properly, class component may be the way to go. Class component comes with a built-in lifecycle that allows you to manipulate your component at different phases. This post explains how to create a class-based component by going over the most fundamental, constructor() and render() lifecycle methods first.

Create the first class-based component

Step 1. Declare class and extend React.Component

The structure of class-based component is similar to the functional component. Instead of declaring with const for functional components, we extend React.Component subclass to declare a class. Below is an example of how a simple functional component could be refactored into a class-based component.

Functional Component

const App = () => {   return(
<h1>Hello!</h1>
);
};

Class-based Component

class App extends React.Component {   render() {      return (
<h1>Hello!</h1>
);
}};

Step 2. Constructor() and render() lifecycle methods

As shown in the example above, we need to call a render() method to display an UI. The render() is one of lifecycle methods, which will be called multiple times when the class's state would change. In contrast, you may use a constructor() method to initialize the class. For example, when you access an external data, you only need to call it once as your class gets initialized, so those callbacks should happen in the constructor().

class App extends React.Component {   constructor(props) {      super(props); // you need this with props!      // Call a function that only needs first    }   render() {      return (<h1>Hello!</h1>);   }};

Step 3. State and update state

After requesting data from constructor(), it may take some time before the data is available, or the data may get updated while your user is still looking at your page. When the data is available after some time, or gets updated, you may want to reflect those changes to your page. To manage these phases, we use state in React class.

State is an object that records users' local states. 1) You can declare a state in constructor() by saying this.state={key:value}, 2) access the state with this.state.key, and 3) update the state with this.setState={key:newValue}.

Below example is from the Udemy course, which checks for a user's location in constructor(), but the callback takes time since the user has to permit their browser option. Until the data is available, the page shows the loading state. When the user allows the location access or denies, the React state gets updated with .setState, and render() method runs once again.

class App extends React.Component {   constructor(props) {      super(props);      this.state = { lat: null };      window.navigator.geolocation.getCurrentPosition( 
position => {
this.setState ({ lat: position.coords.latitude });
},
err => {
this.setState ({ errorMessage: err.message });
}
); } render() { return (
<div> { this.renderContent() } </div>
)
} renderContent() { if(this.state.errorMessage && !this.state.lat){
return (
<div> Error: { this.state.errorMessage } </div>
)
}
if(!this.state.errorMessage && this.state.lat){
return (
<div> Latitude: {this.state.lat} </div>
)
}
return( <div> Loading … </div> ); }
}

Lifecycle methods

  • constructor() - Initializer for declaring variables or states.
  • componentDidMount() - Called after the component is rendered. The initial request for data may be called in this method instead of constructor().
  • render() - REQUIRED method that outputs HTML to the DOM.
  • componentDidUpdate() - Called after the component is updated in the DOM.
    componentWillUnmount()Called when the component is about to be removed from the DOM.

Table of content

React basic 1 — “Hello React World”. Setting Up Your First React App

React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

React basic 3 — Reusable Functional Components

React basic 4 — Class Based Component and Lifecycle Methods

React basic 5 — Basic Event Handlers

React basic 6 — Use Axios Library to Fetch Data

React basic 7 — Render a List based on the API response

React basic 8 — Build React App and Host it on Server

Reference

Modern React with Redux by Stephen Grider | Udemy

Lifecycle of Components | W3School

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store