Peningkatan 10x dalam kinerja aplikasi React

Apakah Anda mengalami kesalahan seperti itu? Sudahkah Anda mencoba menyelesaikannya? Sudahkah Anda mencoba mencari solusi di internet dan tidak menemukan apa pun? Biasanya, masalah ini diselesaikan dengan memuat ulang halaman sederhana.

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% !