React is a UI library. It renders components written in JSX. You can build and render any components as per your usage. React.js introduces the concept of state. The states are used to store data for specific components. These states can be updated accordingly using this.setState function. Updating of state leads to the rendering of UI. Different lifecycle methods are called during these renderings.
Lifecycle methods called when app is loaded first:
- Constructor()
- render()
- componentDidMount()
Lifecycle methods called when this.setState is called:
- render()
- componentDidUpdate()
Approach: Let us create a React project and then we will create a UI that sends a call to this.setState. Users can interact with the UI and click on the button to trigger an event to call this.setState through this. Users can view all the lifecycle methods mentioned above in the console view.
Creating React Project:
Step 1: To create a react app you need to install react modules through npx command. “npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.
npx create-react-app project_name
Step 2: After creating your react project move into the folder to perform different operations.
cd project_name
Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new component’s user makes or the code changes we will be performing will be done in the source folder.
Project_Structure
Example: We will create a button that sends a call to update the state through this.setState.
- App.js
Javascript
import React from "react"; class App extends React.Component { constructor() { super(); this.state = { message: "initial state" } console.log("Constructor called"); } componentDidMount() { console.log("componentDidMount called"); } componentDidUpdate() { console.log("componentDidUpdate called"); } call() { this.setState({ message: "state updated" }) } render() { console.log("render called"); // Rendering a button return ( <div style={{ margin: 100 }}> <button onClick={() => { this.call() }}> Click to update state! </button> <p>{this.state.message}</p> </div> ); } } export default App; |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the console. Appropriate functions are called when the state is updated.
React State Update
