Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um inglês mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      #thedivisor#The <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Clock</code> component below receives two props from its parent component: <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">color</code> and <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">time</code>. (The parent component’s code is omitted because it uses <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/state-a-components-memory">state</a>, which we won’t dive into just yet.)#thedivisor#Try changing the color in the select box below:#thedivisor#This example illustrates that <strong class="font-bold">a component may receive different props over time.</strong> Props are not always static! Here, the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">time</code> prop changes every second, and the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">color</code> prop changes when you select another color. Props reflect a component’s data at any point in time, rather than only in the beginning.#thedivisor#However, props are <a href="https://en.wikipedia.org/wiki/Immutable_object" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">immutable</a>—a term from computer science meaning “unchangeable”. When a component needs to change its props (for example, in response to a user interaction or new data), it will have to “ask” its parent component to pass it <em>different props</em>—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.#thedivisor#<strong class="font-bold">Don’t try to “change props”.</strong> When you need to respond to the user input (like changing the selected color), you will need to “set state”, which you can learn about in <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/state-a-components-memory">State: A Component’s Memory.</a>#thedivisor#<li class="leading-relaxed mb-1">To pass props, add them to the JSX, just like you would with HTML attributes.</li>
<li class="leading-relaxed mb-1">To read props, use the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">function Avatar({ person, size })</code> destructuring syntax.</li>
<li class="leading-relaxed mb-1">You can specify a default value like <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">size = 100</code>, which is used for missing and <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">undefined</code> props.</li>
<li class="leading-relaxed mb-1">You can forward all props with <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;Avatar {...props} /&gt;</code> JSX spread syntax, but don’t overuse it!</li>
<li class="leading-relaxed mb-1">Nested JSX like <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">&lt;Card&gt;&lt;Avatar /&gt;&lt;/Card&gt;</code> will appear as <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Card</code> component’s <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">children</code> prop.</li>
<li class="leading-relaxed mb-1">Props are read-only snapshots in time: every render receives a new version of props.</li>
<li class="leading-relaxed mb-1">You can’t change props. When you need interactivity, you’ll need to set state.</li>#thedivisor#This <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Gallery</code> component contains some very similar markup for two profiles. Extract a <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Profile</code> component out of it to reduce the duplication. You’ll need to choose what props to pass to it.