React Key

Keys

Los Keys pueden ser un tema avanzado para nosotros en este momento, pues está relacionado con la optimización de React, sin embargo, quisiera explicarlos en este momento, pues es un concepto muy simple y es fundamental utilizarlos.

Los keys son utilizados por React para identificar de forma más eficiente los elementos que han cambiado, agregados o eliminados dentro de la aplicación, los keys son utilizados únicamente cuando queremos mostrar los datos de un arreglo, como una lista. En el ejemplo de la lista de productos, iterábamos un array para mostrar todos los productos dentro de una lista <li>.

Cuando un elemento de React, muestra más de un mismo tipo de elemento, debe poder identificar qué elementos es cual, para poder actualizarlo correctamente. El Key debe de ser un valor único en la colección y se utiliza por lo general el ID o un campo de los ítems que sea único. Veamos cómo quedaría nuestra lista de productos con Keys:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react'  
import { render } from 'react-dom'  
import ItemList from './ItemList'  
    
class App extends React.Component{  
    
    render(){  
    let items = [{  
        name: 'Item 1',  
        price: 100  
        }, {  
        name: 'Item 2',  
        price: 200  
    }]  
    
    return (  
        <ul>  
        <For each="item" index='index' of={ items }>  
            <ItemList product={item} key={ ítem.name } />  
        </For>  
        </ul>  
    )  
    }  
}  
    
render(<App/>, document.getElementById('root'));  

Como vez, es tan simple como añadir el atributo key y asignarle un valor único en la colección. Si nosotros ejecutamos este ejemplo, veremos la lista de siempre, por lo que no hay nada que mostrar, lo interesante se genera, cuando quitamos el key:

Analizando la importancia de los keys
Analizando la importancia de los keys

Como podemos ver en la imagen, nos está solicitando un key para cada elemento de la lista

tip

Qué hacer si no tenemos un campo único para el Key

Existe ocasiones donde el array no tiene un campo que identifique a los elementos, en esas ocasiones, podemos utilizar el Index del array como Key o podemos utilizar alguna librería que nos genere un UUID dinámico como la siguiente: https://www.npmjs.com/package/uuid.

Acerca de este libro

Aplicaciones reactivas con React, NodeJS & MongoDB

Todo lo que acabas de ver en este artículo es solo una pequeña parte del libro Aplicaciones reactivas con React, NodeJS & MongoDB, El libro más completo en español para aprender a crear aplicaciones web completas con las tecnologías más potentes de la actualidad, desde el Frontend con React, hasta el Backend con un poderoso API REST con NodeJS y Express y persistiendo todo en MongoDB. te invito a que veas mi libro:

Ver libro
Todos los derechos reservados ©