use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return m}));var r=n(0),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 s(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 p(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),l=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):p(p({},t),e)),n},d=function(e){var t=l(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},h=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),d=l(n),h=r,m=d["".concat(s,".").concat(h)]||d[h]||u[h]||o;return n?a.a.createElement(m,p(p({ref:t},c),{},{components:n})):a.a.createElement(m,p({ref:t},c))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,s=new Array(o);s[0]=h;var p={};for(var i in t)hasOwnProperty.call(t,i)&&(p[i]=t[i]);p.originalType=e,p.mdxType="string"==typeof e?e:r,s[1]=p;for(var c=2;c {\n const selectedClass = props.selected === true ? 'selected' : ''\n var path = parseUri(props.url).path\n path = path.length <= 0 ? props.url : '...' + path\n\n return (\n \n \n \n
\n {path}\n \n \n )\n}\n")),Object(o.b)("p",null,"This component above has no state which causes it to re-render every time. So what we want is to convert it to a regular component and use the function ",Object(o.b)("inlineCode",{parentName:"p"},"shouldComponentUpdate"),". Then we want to check if the props that we use in this component have change. If there was a change return true else return false. The component becomes."),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"export default class AutocompleteItem extends React.Component {\n shouldComponentUpdate(nextProps, nextState) {\n return nextProps.url !== this.props.url || nextProps.selected !== this.props.selected\n }\n\n render() {\n const {props} = this;\n const selectedClass = props.selected === true ? 'selected' : ''\n var path = parseUri(props.url).path\n path = path.length <= 0 ? props.url : '...' + path\n\n return (\n \n \n \n
\n {path}\n \n \n )\n }\n}\n")))}l.isMDXComponent=!0}}]);