ReactJS in Simple English — state (2)

ReactJS in Simple English — state (2)

This time we would go a little bit deeper about state, including shouldComponentUpdate(), PureComponent and Context API

This time we would go a little bit deeper about state, including shouldComponentUpdate()PureComponent and Context API

Before we continue, let’s have a look How ReactJS update our pages

  1. Detected changes in props or state
  2. Trigger shouldComponentUpdate(), by default return true, that means it always go to the next step render()
  3. render() is called to render the new virtual DOM
  4. Compare the old virtual DOM with the newly rendered virtual DOM
  5. Update the real DOM if any difference found, only update the parts which are different instead of the whole DOM

By default, if any changes in props or state, React will always render() the new virtual DOM including all components and compare it with the last version.

For example, user just click the submit button and trigger the modal panel and confirm dialog. Obviously, this is a small changes in screen, probably a boolean in state indicated the confirm dialog have to be shown, nothing related with other components.

However, React will still render a virtual DOM including all components and check against with the old version. Think about if we have a large application and every single change will trigger the same behavior - render and check again all components. It would spend a lot of resources and slowdown the application.

react reactjs learning-to-code javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Learning to Code: How to Boost Up the Process?

Learning to Code: How to Boost Up the Process? I also often recommend different online and offline resources to my students to make their learning process easier, more effective, and faster. And in this post, I will share a few tips with you.

12 Fun Challenges to Learn React Native

You want to learn React Native? Here's 12 exercises to that will help you do that.The post is inspired by a free self-paced workshop I've created. If you're interested in guided instructions, solutions, and extra exercises check it out!

Learning JavaScript: Working with Strings

Strings are the second most common data type used in JavaScript, and in many cases, since JavaScript is so widely used for web applications, it is the prominent data type.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.