➕ Indexes as a Key is an Anti-pattern, Spreading props on DOM Elements is an Anti-pattern

Author: Bunlong

docs/indexes-as-a-key-is-an-anti-pattern.md

@@ -0,0 +1,37 @@
+---
+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
+---
+
+Keys should be unique so that React can keep a better track of elements.
+
+Assume you use index of an item as its key when render a list as below.
+
+```jsx
+{todos.map((todo, index) =>
+  <Todo
+    {...todo}
+    key={index}
+  />
+)}
+```
+
+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.
+
+The better way, each items should have a permanent and unique property, it should be assigned when the item is created.
+
+Then we can use it the following way.
+
+```jsx
+{todos.map((todo) =>
+  <Todo 
+    {...todo}
+    key={todo.id} 
+  />
+)}
+```

docs/spreading-props-on-dom-elements-is-an-anti-pattern.md

@@ -0,0 +1,45 @@
+---
+id: spreading-props-on-dom-elements-is-an-anti-pattern
+sidebar_label: Spreading props on DOM elements is an anti-pattern
+title: Spreading props on DOM Elements is an Anti-pattern
+description: spreading props on DOM elements is an anti-pattern | React Patterns, techniques, tips and tricks in development for Ract developer.
+keywords: ['shouldComponentUpdate avoid heavy re-renders', 'reactpatterns', 'react patterns', 'reactjspatterns', 'reactjs patterns', 'react', 'reactjs', 'react techniques', 'react tips and tricks']
+version: Spreading props on DOM elements is an anti-pattern
+image: /img/reactpatterns-cover.png
+---
+
+Well, we usually spread the properties to the elements to avoid writing every single one manually.
+
+```jsx
+<Component {...props} />
+```
+
+This works very well, however, when we spread props into a Dom element, we run the risk of adding unknown HTML attributes, which is a bad pratice.
+
+To see the warning in the console, a basic operation we can do is render the following component.
+
+```jsx
+const Spread = () => <div foo="bar" />
+```
+
+The message we get looks like the following.
+
+```jsx
+Unknown props `foo` on <div> tag. Remove this prop from the element
+```
+
+Because the foo property is not valid for a div element.
+
+In this case, as we said, it's easy to figure out which attribute we are passing and remove it but, if we use the spread operator, as in the following.
+
+```jsx
+const Spread = props => <div {...props} />
+```
+
+We can't control which properties are passed from the parent.
+
+If we use the component in the following way, there are no issues.
+
+```js
+<Spread className="foo" />
+```

sidebars.js

@@ -40,6 +40,9 @@ module.exports = {
     ],
     'React Anti-patterns': [
       'props-in-initial-state-is-an-anti-pattern',
+      'shouldcomponentupdate-avoid-heavy-re-render',
+      'indexes-as-a-key-is-an-anti-pattern',
+      'spreading-props-on-dom-elements-is-an-anti-pattern',
     ],
   },
 };