10x improvement in React application performance

Have you encountered such a mistake? Have you tried to solve it? Have you tried looking for a solution on the net and found nothing? Usually, this problem is solved by a simple page reload.

Techgoise React-. () , .

, , . , , 1,5 !

, 1,5 150 , , , 10 , .

. . , .

1. Google Chrome

Flamegraph



( ), , , . , . , . ( ) . .

2. Firefox

"", . :

1. : JavaScript



DOM
   
   
   
   , , , , , DOM
   
   
   
   , Window



HTMLDivElement
   
   
   
   .
2. : JavaScript-, .
3. .
4. : , SpiderMonkey
   
   
   
   .

, , .

3. why-did-you-render

. , . , .

, flamegraph



. .

?

, . 50 .

, , . , , , ? , , .

1.

— , (. .: , ).

import Child from 'components/Child'

const Parent = () => (
 <Child onClick={() => {
   console.log(' !')
 }} />
)

export default Parent
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. 2 :

1. , .
2. , , .

, , " ", . PureComponent



React.memo()



.

: .

import Child from 'components/Child'

const Parent = () => {
 const handleClick = () => {
   console.log(' !')
 }

 return (
   <Child onClick={handleClick} />
 )
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

1,5 800 .

2. Redux

, Redux



. , API



. ? — . , , , .

: JSON.stringify(prevProps.data) !== JSON.stringify(this.props.data)



. , .

: Redux



. , : deep-equal



fast-deep-equal



.

800 500 .

3.

, , . , , .. :

import { useState } from 'react'
import { Modal, Button } from 'someCSSFramework'

const Modal = ({ isOpen, title, body, onClose }) => {
 const [open, setOpen] = useState(isOpen || false)

 const handleClick =
   typeof onClose === 'function'
     ? onClose
     : () => { setOpen(false) }

 return (
   <Modal show={open}>
     <Button onClick={handleClick}>x<Button>
     <Modal.Header>{title}</Modal.Header>
     <Modal.Body>{body}</Modal.Body>
   </Modal>
 )
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . API



.

: ( ). "" () .

500 150 .

:

import { useState } from 'react'
import { Modal, Button } from 'someCSSFramework'

const Modal = ({ isOpen, title, body, onClose }) => {
 const [open, setOpen] = useState(isOpen || false)

 const handleClick =
   typeof onClose === 'function'
     ? onClose
     : () => { setOpen(false) }

 //  
 if (!open) return null

 return (
   <Modal show={open}>
     <Button onClick={handleClick}>x<Button>
     <Modal.Header>{title}</Modal.Header>
     <Modal.Body>{body}</Modal.Body>
   </Modal>
 )
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

4. await



Promise.all()

, await



. , , , .

, API



. , 3-5 API



, . get...



API



:

const userDetails = await getUserDetails()
const userSubscription = await getUserSubscription()
const userNotifications = await getUserNotifications()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

: API



Promise.all()



. : , .

30%.

const [
 userSubscription,
 userDetails,
 userNotifications
] = await Promise.all([
 getUserSubscription(),
 getUserDetails(),
 getUserNotifications()
])
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

React- — . .

, React- :

1. . , .
2. , () — .
3. . , .
4. , API
   
   
   
   . .

3 ( ), , , - . "Aw! Snap".

!

---

.

10% !