Re-render & Optimization in React

Understanding when react render and re-render parts of our websites.

In Javascript whenever we instantiate an object, under the hood Javascript creates this object in memory. Here we created an obj1 with a key-value pair of names, now we will create obj2 which will be a pointer and this object will point to the same memory.

let obj1 = {name: "Saima"}
let obj2 = obj1
obj2 === obj1 
//True

When we strictly compare obj2 and obj1, it will return true since both are pointing to the same object in memory.

Now if we update obj1 to a different name, and then if we print obj2, it will have the same value because both the pointer is pointing to the same object in memory.

obj1.name = "panda"
console.log(obj2) 
// {name: "panda"}

In react, the only way a component will update is when there is a completely different object in memory. Here we are creating a completely new object from the existing object with this Javascript method Object.assign( )

let obj3 = Object.assign({}, obj1)
console.log(obj3)
//{name: "panda"}
ob3 === obj1
//false
obj3 === obj2
//false

Since we have created an entirely different object, it has allocated a space in the memory. So now obj3 is pointing to a different object in memory. React will re-render only when the state is a completely new object and that is achieved by the method setState().

This method allows us to update the state object with a different value which triggers the render function and therefore React updates or repaints the DOM.

Optimization:

Problem:

render() {
return (
   <div className="App">
   <input
      className="search-box"
      type="search"
      placeholder="search cupackes"
      onChange={(event) => {
         const searchField = event.target.value
         this.setState({searchField})
      }}
   />
</div>                                                                    );

• Every time React needs to update the DOM, it runs the render method. Inside the render method if we have an onChange method in the input JSX element, then we can say that it is an anonymous function. An anonymous function is not stored anywhere in a variable. So whenever the render method runs, it will come across the onChange method and will create the function for you but afterward it gets thrown away. It is important to note this because every time the render function runs, the anonymous function gets reinitialized or recreated. There is no memory to keep track of this function. This makes our app a little less performant if there are a lot of functions inside the render method, then the component will eventually start to slow down.

Solution:

onSearchChange = (event) => {
 const searchField = event.target.value.toLowerCase()
 this.setState({
    searchField
  })
}
render() {
return (
<div className="App">
<input
      className="search-box"
      type="search"
      placeholder="search cupcakes"
      onChange={this.searchOnChange}
   />
</div>                                                                    );

• We make a brand new function outside the render method but inside the App component. We will move the call-back function from the onChange method to the brand new function. The class component will only build the function ones when it initializes the class for the first time. So now whenever Render runs, it will only refer to the “already initialized method”.

Optimization of .this

• Destructing .this will make our code more readable.

render() {
//destrucuring
const {cupcakes, searchField} = this.state;
const {onSearchChange} = this;
const filteredCupcakes = cupcakes.filter(cupcake => cupcake.name.toLowerCase().includes(searchField.toLowerCase()))
const mappedFilteredCupcakes =  filteredCupcakes.map(cupcake => <h1 key={cupcake.id}>{cupcake.name}</h1> )
return (
<div className="App">
 <input
    className="search-box"
    type="search"
    placeholder="search cupcakes"
    onChange={onSearchChange}
   />
  {mappedFilteredCupscakes}
</div>
);
}

Re-rendering inside of components:

• Components re-render based on two conditions:

1. When setState() gets called
2. When props() gets updated

Hence if console.log() inside the render function it will print twice, first with the empty array and second time with the filled array.

Learn To Code. Get Hired. | Zero To Mastery