Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

react native pure component vs component

The major difference between React.PureComponent and React.Component is PureComponent does a shallow comparison on state change. It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.

You should go for React.PureComponent when you can satisfy any of the below conditions.

    State/Props should be an immutable object
    State/Props should not have a hierarchy
    You should call forceUpdate when data changes

If you are using React.PureComponent you should make sure all child components are also pure.

    is there any performance impact in using React.component that we may consider going for React.PureComponent?

Yes, it will increase your app performance (because of shallow comparison)

    I am guessing shouldComponentUpdate() of Purecomponent performs only shallow comparisons . If this is the case can' t the said method used for deeper comparisons?

You guessed it correctly. You could use it if you satisfy any of the conditions I mentioned above.

    "Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree" - Does this mean that prop changes are ignored?

Yes, prop changes will be ignored If it couldn't find difference in shallow comparison.
Comment

PREVIOUS NEXT
Code Example
Javascript :: check if an input element has focus 
Javascript :: return object from map javascript 
Javascript :: Getting Error “cannot read property split of null” 
Javascript :: for loop react 
Javascript :: getelementbyclassname get multiple class 
Javascript :: sort object properties by value javascript 
Javascript :: create function in javascript 
Javascript :: node http2 post 
Javascript :: uncaught exception javascript 
Javascript :: js rename onclick function 
Javascript :: datatable dropdown toggle not working 
Javascript :: rngesturehandlermodule.default.direction react native 
Javascript :: convert number to hex js 
Javascript :: for of and for in javascript 
Javascript :: remove equal json js 
Javascript :: how to implement certain actions after setstate in react hooks 
Javascript :: strupper in js 
Javascript :: es6 closures 
Javascript :: .reduce javascript 
Javascript :: jquery get id of 3rd parent 
Javascript :: jsconfig.json code to support absolute import 
Javascript :: hash url owl carousel example 
Javascript :: Javascript Map.prototype.size 
Javascript :: validation for start date and end date in jquery 
Javascript :: xslt remove node 
Javascript :: javascript round down to 2 decimal places 
Javascript :: scrape html table javascript 
Javascript :: repeat async call n times in js 
Javascript :: vuejs input call the value 
Javascript :: hostlistner 
ADD CONTENT
Topic
Content
Source link
Name
9+1 =