메모 및 useCallback

최고의 성능 및 최적화 교육

최적화 전

최적화 방법

   import React from "react"

   const Component=(props)=>{
    //some javascript
    return (
        //some jsx
    )
   }
   export default React.memo(Component)

 let name = "adel"
 let name 2 = "adel"

 //name === name2 --> true

 let obj = {name:"adel"}
 let obj2 = {name:"adel"}

 //obj === obj2 --> false
 //objects on different refrences values

 let obj3 = obj
 //passing by refrence

 //obj === obj3 --> true

 const obj = useMemo(()=>{ return name: "adel" }, [])

   //this won't work it will be re-declared with new refrence every re-run

   const addAge = () => {
     //function logic with no return
   }

   //solution

   const addAge = useCallback(() => {
     //function logic
   }, [])

   return <Component addAge={addAge} />