1_N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[46],{"7ljp":function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return d}));var r=n("q1tI"),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var p=a.a.createContext({}),s=function(e){var t=a.a.useContext(p),n=t;return e&&(n="function"===typeof e?e(t):c(c({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(p.Provider,{value:t},e.children)},b={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},m=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,d=u["".concat(i,".").concat(m)]||u[m]||b[m]||o;return n?a.a.createElement(d,c(c({ref:t},p),{},{components:n})):a.a.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"===typeof e||r){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"===typeof e?e:r,i[1]=c;for(var p=2;p<o;p++)i[p]=n[p];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},Ff2n:function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}n.d(t,"a",(function(){return r}))},G7OW:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/react/performance_model",function(){return n("jdSd")}])},Qetd:function(e,t,n){"use strict";var r=Object.assign.bind(Object);e.exports=r,e.exports.default=e.exports},jdSd:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return p}));var r=n("wx14"),a=n("Ff2n"),o=n("q1tI"),i=n.n(o),c=n("7ljp"),l=(i.a.createElement,{});function p(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(c.b)("wrapper",Object(r.a)({},l,n,{components:t,mdxType:"MDXLayout"}),Object(c.b)("p",null,"React is built for performance; React is used to build massively complex interfaces with thousands of elements, each one potentially responding to user interaction."),Object(c.b)("p",null,"Because performance is so fundamental to React, it can be helpful to understand the performance model of various operations at a high level."),Object(c.b)("table",null,Object(c.b)("thead",{parentName:"table"},Object(c.b)("tr",{parentName:"thead"},Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Operation"),Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Cost"),Object(c.b)("th",Object(r.a)({parentName:"tr"},{align:null}),"Description"))),Object(c.b)("tbody",{parentName:"table"},Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"DOM manipulation"),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Slow"),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Modifying the DOM is slow. React attempts to modify the DOM as ",Object(c.b)("em",{parentName:"td"},"little")," as possible. React builds an in-memory representation of the components we render (the element tree), and then syncs this representation to the DOM. As we update components, React will update the in-memory representation, and then make the least amount of changes to the DOM possible. This is what keeps our application fast. React does this automatically most of the time \u2014 however, we can give hints about when and how to update the DOM to improve performance. This is especially relevant when dealing with hundreds or thousands of components, in the case of large lists.")),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Component render"),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Fast"),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Components can re-render very frequently without a noticeable performance impact. It's common for ",Object(c.b)("inlineCode",{parentName:"td"},"render")," to be called many times as the ",Object(c.b)("inlineCode",{parentName:"td"},"props")," of a component change. This is part of the magic of React, but can also be c
1onfusing at first. In other JavaScript libraries, you may have tried to reduce calls to ",Object(c.b)("inlineCode",{parentName:"td"},"render"),' in order to limit DOM updates and improve performance. In React, reducing re-renders is something we only need to think about for particularly complex components. Note: when we say "render", this generally refers to evaluating our component functions.')),Object(c.b)("tr",{parentName:"tbody"},Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),Object(c.b)("a",Object(r.a)({parentName:"td"},{href:"https://reactjs.org/docs/react-api.html#reactmemo"}),Object(c.b)("inlineCode",{parentName:"a"},"memo"))),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"Very fast"),Object(c.b)("td",Object(r.a)({parentName:"tr"},{align:null}),"In cases where a component is rendering too frequently and causing performance issues, we can use ",Object(c.b)("inlineCode",{parentName:"td"},"memo")," to reducing the frequency of component rendering. This function compares a component's previous props to its new props before running the component function \u2014 the component function is only run if the props have changed (each prop is compared with ",Object(c.b)("inlineCode",{parentName:"td"},"==="),", roughly).")))),Object(c.b)("p",null,"The examples in this guide are too small and simple for performance to be a problem, so we won't need to use ",Object(c.b)("inlineCode",{parentName:"p"},"memo"),". React is fast by default, only slowing down in extreme cases, so we generally skip using ",Object(c.b)("inlineCode",{parentName:"p"},"memo")," until we notice sluggish behavior in our app."))}p.isMDXComponent=!0},wx14:function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}n.d(t,"a",(function(){return r}))}},[["G7OW",0,1]]]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.