• react’s diffing algorithm for tree conversions
  • adding element to end of list → only needs to insert at end
  • adding element to beginning → inefficient because react mutates every child
• keys → identifiers to help react know which items have been modified/added/removed
• Map() allows you to create new arrays populated with the results of calling a transformation function on every element.
• Rendering lists on official React docs website dives deeper into how to display multiple similar components from a collection of data, providing examples of both filtering and transformations.
• React keys on official docs offers a comprehensive set of memotecnic rules to reinforce how to use keys properly.

practice assignment

1. value of newDesserts

   const desserts = [
     {
       title: 'Chocolate Cake',
       description: 'Chocolate cake is a cake flavored with melted chocolate',
       calories: 500,
     }
   ];
   
   const newDesserts = desserts.map((dessert) => {
     return {
       title: dessert.title.toUpperCase(),
       // mapping output merges the previous object values after the title is re-defined, it has no effect and the title is still as before
       ...dessert,
       kCal: dessert.calories / 1000,
     };
   });
   
   // returns
   [
     {
       title: 'Chocolate Cake',
       description: 'Chocolate cake is a cake flavored with melted chocolate',
       calories: 500,
       kCal: 0.5,
     }
   ]
   

2. how to access dynamic data inside JSX from render function

   wrapping variable in {}

3. potential problems with using a randomizer function that generates an integer number from 0 to 10 as a key for your list items, having a list of only eight items

   • collision may occur
   • re-render will cause randomizer to generate different values - causing issues with internal state of component

4. react warnings

   // key per list item is missing
   {todos.map((todo, index) => (
     <ToDo id={todo.id} />
   ))}
   
   // keys are the same for all items
   {todos.map((todo, index) => (
     <ToDo key=”myKey” id={todo.id} />
   ))}
   

5. potential problem with using index as key

   if order of items changes performance and state can be negatively impacted