Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Conceitos, termos ou referências devem ser mantidas em inglês.
      3. Apenas transcreva o artigo para português brasileiro, dentro de seu contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      In this lesson, we will cover keys in React. Keys are special props for our components and we’ll learn why they are used.#thedivisor#This section contains a general overview of topics that you will learn in this lesson.#thedivisor#<li>Learn what keys are in React and why it needs them.</li>
    <li>Identify examples of good and bad key usage in React applications.</li>#thedivisor#In the upcoming lessons as you learn more about the internal workings of React, more specifically the rerendering process, you will understand the importance of keys. For now, we will keep it short.#thedivisor#In the previous lesson on rendering lists, we used the <code>.map()</code> method to iterate over an array of data and return a list of elements. Now imagine, if any of the items in the list were to change, how would React know which item to update?#thedivisor#If the list were to change, one of two things <em>should</em> happen:#thedivisor#<li>we completely re-render the entire list, or:</li>
    <li>we hunt down the specific items that were changed and only re-render those.</li>#thedivisor#Assuming we want to hunt down that one specific item that was changed and NOT re-render the entire list. We need something to track that specific item. We can track down a specific item by using a <code>key</code>.#thedivisor#When the list is updated for whatever reason, (either from a server or a user interaction), React matches the <code>keys</code> of each of the previous list items to the updated list. If there were any changes, React will only update the items that have changed.#thedivisor#As long as <code>keys</code> remain consistent and unique, React can handle the DOM effectively and efficiently.#thedivisor#We will be using <code>props</code> here, and you will learn more about them in the next lesson. For now, you just need to know that <code>props</code> are arguments that are passed into components.#thedivisor#Keys are passed into the component or a DOM element as a prop. You should already be familiar with the syntax.#thedivisor#<span id="keys-from-data">Now that we know the syntax, the next question is: what should be used as a key? Ideally, they should be some identifier that is unique to each item in the list. Most databases assign a unique id to each entry, so you shouldn’t have to worry about assigning an id yourself. If you are defining data yourself, it is good practice to assign a unique <code>id</code> to each item. You can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID" target="_blank" rel="noopener noreferrer">crypto.randomUUID() function</a> to generate a unique id. Let’s look at an example:</span>#thedivisor#<span id="index-as-key">Additionally, if you’re sure the list will remain unchanged throughout the application’s life,  you can use the array index as a key. However, this is not recommended since it can lead to confusing bugs if the list changes when items are deleted, inserted, or rearranged. You will learn more about this in the assignment section’s linked article.</span>#thedivisor#<span id="anti-pattern">Keys are straightforward to use, though there is an anti-pattern you should be aware of. Keys should never be generated on the fly. Using <code>key={Math.random()}</code> or <code>key={crypto.randomUUID()}</code> <em>while</em> rendering the list defeats the purpose of the key, as now a new <code>key</code> will get created for every render of the list. As shown in the above example, <code>key</code> should be inferred from the data itself.</span>#thedivisor#Don’t fret if some of the terms covered in the lesson don’t make sense yet. What’s crucial right now is knowing how to use keys effectively in React. As mentioned earlier, the more you learn about React, the more you will understand the importance of keys. Furthermore, using keys is not limited to rendering lists. You might encounter use cases where keys are needed, we’ll leave that for you to discover.#thedivisor#<li>
        <p>Read this <a href="https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key" target="_blank" rel="noopener noreferrer">section on keys in the React docs</a>.</p>
      </li>
      <li>
        <p>Watch this short video demonstrating <a href="https://youtu.be/xlPxnc5uUPQ" target="_blank" rel="noopener noreferrer">index as key being an anti-pattern</a>.</p>
      </li>#thedivisor#Read this <a href="https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key" target="_blank" rel="noopener noreferrer">section on keys in the React docs</a>.#thedivisor#Watch this short video demonstrating <a href="https://youtu.be/xlPxnc5uUPQ" target="_blank" rel="noopener noreferrer">index as key being an anti-pattern</a>.#thedivisor#The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.