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:

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

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

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.

Keys

Acerca de este libro