BEST OPTIMISATION TECHNIQUES IN

nik72619c

@niksharma1997

https://medium.com/@nikhilsharmarockstar21/

AGENDA

Lazy Loading ,Code Splitting and  profiling

Virtualization with windowing

Removing un-necessary re-renders

React's Reconciliation 

RENDER WHAT THE USER NEEDS

SHIP WHAT'S REQUIRED

WHY CARE ?

LAZY LOADING

&

CODE SPLITTING

WHAT WE THINK

REALITY

YUP...IT IS

WHY CARE ??

 If the markup contains an external JavaScript file, the browser stops loading the HTML and starts downloading that external JavaScript –  render blocking or parser blocking

The render block also causes Resource blocking, when the external JavaScript files blocks other resources like markup, media etc. from downloading into the web browser.

1. Dynamically load component using React.lazy()

2. USE SUSPENSE TO ADD A FALLBACK TILL THE TIME THE COMPONENT RENDERS

3. CHECK THE NETWORKS TAB AND BOOM !

PROFILING WITH REACT DEVTOOLS

ACCESS THE VIRTUAL DOM ELEGENTLY...

FIND THE CULPRITE WITH ...

INTERACTIONS

THE RENDER INSPECTOR

TRACK USER EVENTS AND DETERMINE WHAT CAUSED THE RENDER

LETS GET THIS STRAIGHT...

AGENDA

Lazy Loading ,Code Splitting and  profiling

Virtualization with windowing

Removing un-necessary re-renders

React's Reconciliation 

WINDOWING

WHY????

Real life Applications usually render complex components

impact on DOM performance

The lesser work you do...

  • Blazing fast initial renders
  • Boosted frame rate

<A SIMPLE EXAMPLE.../>

GETTING THERE....

WHAT ABOUT VARIABLE LISTS ?

AGENDA

Lazy Loading ,Code Splitting and  profiling

Virtualization with windowing

Removing un-necessary re-renders

React's Reconciliation 

THE MAGIC OF shouldComponentUpdate

WHY ??

React keeps in memory two versions of the DOM:

  • the version of the DOM currently displayed
  • the next version of the DOM to be displayed

}

RECONCILIATION

CHANGE IN PARENT  ==> CHANGE IN THE ENTIRE SUBTREE

SOLUTION ?

shouldComponentUpdate

render acc to prop/state changes

HOW IT WORKS?

<A SIMPLE EXAMPLE/>

PURE COMPONENTS

Cousin of shouldComponentUpdate

implements shouldComponentUpdate

export default class Mycomponent extends React.PureComponent{

//your regular code
}

LETS SEE THIS IN ACTION...

WHEN to use it ??

  • Pure components are shallow comparers
  • Compare object refs rather than values

DONT USE IT FOR NESTED STRUCTURES

Pure components vs shouldComponentUpdate

"WAIT...WE HAVE shouldComponentUpdate"

DEEP COMPARE IS EXPENSIVE

SO BE WISE...STAY SAFE !

SUMMING IT UP...

Pure Components

simple state and props

SCU

complex data structure

shallow compare

deep compare

GOT IT....BUT ABOUT FUNCTIONAL COMPONENTS 

REACT.MEMO()

HOC, FOR MEMOISING FUNCTIONAL COMPONENTS

AND ITS PRETTY SIMPLE

BUT I MISS shouldComponentUpdate !

NO WORRIES ...

AGENDA

Lazy Loading ,Code Splitting and  profiling

Virtualization with windowing

Removing un-necessary re-renders

React's Reconciliation 

RECONCILIATION

REACT's SECRET INGREDIENT!

React's render() returns a new VirtualDOM on prop/state change

state of the art algos=> O(n^3)

MOTIVATION

REACT'S SECRET

DOM Elements Of The Same Type

Elements Of Different Types

Component Elements Of The Same Type

componentWillReceiveProps() and componentWillUpdate()

RECURSING ON CHILDREN

WHAT'S THE POINT ??

VS

REACT'S RECONCIALIATION IDENTIFIES THE CHILDREN BASED ON THE KEY PROP

WHAT CAUSES EXCESS RECONCILIATIONS?

HOW TO REMOVE IT?

"WHAT ELSE?"

  • SCU

  • Pure components

  • React.memo()

AGENDA

Lazy Loading ,Code Splitting and  profiling

Virtualization with windowing

Removing un-necessary re-renders

React's Reconciliation 

BOOM ! NOW ITS FAST

SOME GREAT SOURCES 

FIND THE CODE AT:-

}

https://github.com/nik72619c/Facebook-Dev-Circles-Talk

https://codesandbox.io/s/nnqmmmz1o0

https://github.com/nik72619c/Optimise_Rerenders_Facebook_DevC

OPTIMISE YOUR APPS TODAY !

THANK YOU

Made with Slides.com