filmov
tv
React JS with Hooks & Redux(Beginner's to Advanced) | What & Why of Pure Component in React| Part-25

Показать описание
In this video I have discussed about pure components.
Pure Component
==================================================================
In regular component shouldComponentUpdate always returns true and so regular component is always re-rendered.
In pure component React overrides the shouldComponentUpdate method and does the shallow comparisons of current state and props with new props and state to decide whether to render the component or not. This boost the application performance.
For primitive data types like string, number, boolean
shallow comparison will return true if primitives have the same value and type otherwise returns false.
Ex "RipplesCode" shallow compare "RipplesCode" ===true
For complex data types like arrays and objects shallow comparison will return true if the references refer to same object otherwise returns false.
For ex
let arr1=["a","b","c"]
let arr2=["a","b","c"]
let arr3=arr1
arr1 shallow compare aar2 ===false
arr1 shallow compare aar3 ===true
#ReactJS #RipplesCode #ReactJSHooksRedux
Pure Component
==================================================================
In regular component shouldComponentUpdate always returns true and so regular component is always re-rendered.
In pure component React overrides the shouldComponentUpdate method and does the shallow comparisons of current state and props with new props and state to decide whether to render the component or not. This boost the application performance.
For primitive data types like string, number, boolean
shallow comparison will return true if primitives have the same value and type otherwise returns false.
Ex "RipplesCode" shallow compare "RipplesCode" ===true
For complex data types like arrays and objects shallow comparison will return true if the references refer to same object otherwise returns false.
For ex
let arr1=["a","b","c"]
let arr2=["a","b","c"]
let arr3=arr1
arr1 shallow compare aar2 ===false
arr1 shallow compare aar3 ===true
#ReactJS #RipplesCode #ReactJSHooksRedux