fb857f33.b4925eea.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{127:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return s})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return d}));var a=n(3),r=n(7),i=(n(0),n(134)),o={id:"indexes-as-a-key-is-an-anti-pattern",sidebar_label:"Indexes as a key is an anti-pattern",title:"Indexes as a Key is an Anti-pattern",description:"Indexes as a key is an anti-pattern | React Patterns, techniques, tips and tricks in development for Ract developer.",keywords:["indexes as a key is an anti-pattern","higher order function","reactpatterns","react patterns","reactjspatterns","reactjs patterns","react","reactjs","react techniques","react tips and tricks"],version:"Indexes as a key is an anti-pattern",image:"/img/reactpatterns-cover.png"},s={unversionedId:"indexes-as-a-key-is-an-anti-pattern",id:"indexes-as-a-key-is-an-anti-pattern",isDocsHomePage:!1,title:"Indexes as a Key is an Anti-pattern",description:"Indexes as a key is an anti-pattern | React Patterns, techniques, tips and tricks in development for Ract developer.",source:"@site/docs/indexes-as-a-key-is-an-anti-pattern.md",slug:"/indexes-as-a-key-is-an-anti-pattern",permalink:"/docs/indexes-as-a-key-is-an-anti-pattern",version:"current",sidebar_label:"Indexes as a key is an anti-pattern",sidebar:"someSidebar",previous:{title:"shouldComponentUpdate Avoid Heavy Re-render",permalink:"/docs/shouldcomponentupdate-avoid-heavy-re-render"},next:{title:"Spreading props on DOM Elements is an Anti-pattern",permalink:"/docs/spreading-props-on-dom-elements-is-an-anti-pattern"}},c=[],p={rightToc:c};function d(e){var t=e.components,n=Object(r.a)(e,["components"]);return Object(i.b)("wrapper",Object(a.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,"Keys should be unique so that React can keep a better track of elements."),Object(i.b)("p",null,"Assume you use index of an item as its key when render a list as below."),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"{todos.map((todo, index) =>\n  <Todo\n    {...todo}\n    key={index}\n  />\n)}\n")),Object(i.b)("p",null,"A key is the only thing React uses to identify DOM elements. What going on if you push an item to the list or remove items in the middle, if the key is same as before React assumes that the DOM element represents the same component as before."),Object(i.b)("p",null,"The better way, each items should have a permanent and unique property, it should be assigned when the item is created."),Object(i.b)("p",null,"Then we can use it the following way."),Object(i.b)("pre",null,Object(i.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx"}),"{todos.map((todo) =>\n  <Todo \n    {...todo}\n    key={todo.id} \n  />\n)}\n")))}d.isMDXComponent=!0},134:function(e,t,n){"use strict";n.d(t,"a",(function(){return l})),n.d(t,"b",(function(){return y}));var a=n(0),r=n.n(a);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=r.a.createContext({}),d=function(e){var t=r.a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},l=function(e){var t=d(e.components);return r.a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.a.createElement(r.a.Fragment,{},t)}},m=r.a.forwardRef((function(e,t){var n=e.components,a=e.mdxType,i=e.originalType,o=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=d(n),m=a,y=l["".concat(o,".").concat(m)]||l[m]||u[m]||i;return n?r.a.createElement(y,s(s({ref:t},p),{},{components:n})):r.a.createElement(y,s({ref:t},p))}));function y(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:a,o[1]=s;for(var p=2;p<i;p++)o[p]=n[p];return r.a.createElement.apply(null,o)}return r.a.createElement.apply(null,n)}m.displayName="MDXCreateElement"}}]);