React optimization: useMemo() , React.memo() & useCallback()

Mohamed Adel — Wed, 19 Oct 2022 11:45:08 +0000

Memo & useCallback

Best performance and optimization training

Before optimization

Making enviroment with the issue of all components re-rendering
Understanding how react works and re-evaluation : re-running everything again in react except states declaring.
Difference between re-run/re-evaluate & re-render
- re-evaluate should work every time and compare
- re-render works on change only with calling react-dom
- All react components will re-rerun (not re-render) everytime if we didn't use any optimization

Optimization methods

It's a trial to make re-run/re-evaluate works like re-render on changes only

React.memo()

it saves the component states and props to get checked first before the re-run
It caches the props and states of the components so using it alot in useless way will make it caching a lot so it will be heavy on runtime.

   import React from "react"

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

useMemo()

difference between reference types in Js

 let name = "adel"
 let name2 = "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

Primitive type
Refrence type : Object, array & function

useMemo is used with arrays, objects & with functions that returns something to fix the problem in re-decleration with every re-reun
```
 const obj = useMemo(()=>{ return name: "adel" }, [])
```
useMemo prevents object re-declaration with new refrence on re-run

useCallback()

useCallback() prevents function (with no return) from re-declaration with new refrence on re-rerun

   //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} />

useCallback caches the logic itself not a return value like useMemo

TS or JS to be upcoming

Mohamed Adel — Mon, 24 Jan 2022 08:56:07 +0000

Quick tip : How to stick your footer down in your page whatever its size?!

Mohamed Adel — Wed, 04 Aug 2021 22:48:10 +0000

`1- in css give the parent class which wrap the whole page lets say container display flex with direction column with min-height 100vh
2- go to footer class for css and give it margin-top auto

example:

.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer{
margin-top: auto;
}

I hope it helps you!!`

Forem: Mohamed Adel