3a6e34ff.2b7344ad.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{134:function(e,n,t){"use strict";t.d(n,"a",(function(){return u})),t.d(n,"b",(function(){return b}));var r=t(0),o=t.n(r);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function c(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function p(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)t=a[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}var s=o.a.createContext({}),l=function(e){var n=o.a.useContext(s),t=n;return e&&(t="function"==typeof e?e(n):c(c({},n),e)),t},u=function(e){var n=l(e.components);return o.a.createElement(s.Provider,{value:n},e.children)},m={inlineCode:"code",wrapper:function(e){var n=e.children;return o.a.createElement(o.a.Fragment,{},n)}},d=o.a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,a=e.originalType,i=e.parentName,s=p(e,["components","mdxType","originalType","parentName"]),u=l(t),d=r,b=u["".concat(i,".").concat(d)]||u[d]||m[d]||a;return t?o.a.createElement(b,c(c({ref:n},s),{},{components:t})):o.a.createElement(b,c({ref:n},s))}));function b(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var a=t.length,i=new Array(a);i[0]=d;var c={};for(var p in n)hasOwnProperty.call(n,p)&&(c[p]=n[p]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var s=2;s<a;s++)i[s]=t[s];return o.a.createElement.apply(null,i)}return o.a.createElement.apply(null,t)}d.displayName="MDXCreateElement"},81:function(e,n,t){"use strict";t.r(n),t.d(n,"frontMatter",(function(){return i})),t.d(n,"metadata",(function(){return c})),t.d(n,"rightToc",(function(){return p})),t.d(n,"default",(function(){return l}));var r=t(3),o=t(7),a=(t(0),t(134)),i={id:"pure-component-avoid-heavy-re-render",sidebar_label:"Pure component avoid heavy re-render",title:"Pure Component Avoid Heavy Re-render",description:"Pure component avoid heavy re-render | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["pure component avoid heavy re-render","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Pure component avoid heavy re-render",image:"/img/reactpatterns-cover.png"},c={unversionedId:"pure-component-avoid-heavy-re-render",id:"pure-component-avoid-heavy-re-render",isDocsHomePage:!1,title:"Pure Component Avoid Heavy Re-render",description:"Pure component avoid heavy re-render | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/pure-component-avoid-heavy-re-render.md",slug:"/pure-component-avoid-heavy-re-render",permalink:"/docs/pure-component-avoid-heavy-re-render",version:"current",sidebar_label:"Pure component avoid heavy re-render",sidebar:"someSidebar",previous:{title:"State Hoisting",permalink:"/docs/state-hoisting"},next:{title:"Props in Initial State is an Anti-pattern",permalink:"/docs/props-in-initial-state-is-an-anti-pattern"}},p=[],s={rightToc:p};function l(e){var n=e.components,t=Object(o.a)(e,["components"]);return Object(a.b)("wrapper",Object(r.a)({},s,t,{components:n,mdxType:"MDXLayout"}),Object(a.b)("p",null,Object(a.b)("inlineCode",{parentName:"p"},"React.PureComponent")," is one of the most ways to optimize React applications that is easy and fast to implement. The usage of ",Object(a.b)("inlineCode",{parentName:"p"},"React.PureComponent")," gives a considerable increase in performance because it reduces the number of render operation in the application."),Object(a.b)("p",null,Object(a.b)("inlineCode",{parentName:"p"},"PureComponent")," changes the life-cycle method ",Object(a.b)("inlineCode",{parentName:"p"},"shouldComponentUpdate")," and adds some logic to automatically check whether a re-render is required for the component. This allows a PureComponent to call method render only if it detects changes in ",Object(a.b)("inlineCode",{parentName:"p"},"state")," or ",Object(a.b)("inlineCode",{parentName:"p"},"props"),", hence, one can change the state in many components without having to write extra checks like:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"if (this.state.someVal !== computedVal) {\n  this.setState({ someVal: computedVal })\n}\n")),Object(a.b)("p",null,"The transition to ",Object(a.b)("inlineCode",{parentName:"p"},"PureComponent")," is quite simple, if you are aware of peculiarities of the shallowEqual and JS itself. Normally, the migration as simple as changing the base class from."),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"import { Component } from 'react'\n\nexport default class MyComponent extends Component {\n  render() {\n    <SomeComponent someProp={props.someProp} />\n  }\n}\n")),Object(a.b)("p",null,"To"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"import { PureComponent } from 'react'\n\nexport default class MyComponent extends PureComponent {\n  // Won't re-render when the props DONT change\n  render() {\n    return <SomeComponent someProp={props.someProp}/>\n  }\n}\n")))}l.isMDXComponent=!0}}]);