10x improvement in React application performance

image







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














All Articles