Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 93177e6c #533

Merged
merged 3 commits into from
Apr 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/MDX/TeamMember.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export function TeamMember({
<ExternalLink
aria-label="React on Twitter"
href={`https://twitter.com/${twitter}`}
className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
<IconTwitter className="pe-1" />
{twitter}
</ExternalLink>
Expand All @@ -90,7 +90,7 @@ export function TeamMember({
<ExternalLink
aria-label="GitHub Profile"
href={`https://github.com/${github}`}
className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
<IconGitHub className="pe-1" /> {github}
</ExternalLink>
</div>
Expand All @@ -99,7 +99,7 @@ export function TeamMember({
<ExternalLink
aria-label="Personal Site"
href={`https://${personal}`}
className="hover:text-primary dark:text-primary-dark flex flex-row items-center">
className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center">
<IconLink className="pe-1" /> {personal}
</ExternalLink>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ This reference page covers advanced topics and requires familiarity with the con

One of the key concepts that makes React, _React_ is _purity_. A pure component or hook is one that is:

* **Idempotent** – You [always get the same result everytime](/learn/keeping-components-pure#purity-components-as-formulas) you run it with the same inputs – props, state, context for component inputs; and arguments for hook inputs.
* **Idempotent** – You [always get the same result every time](/learn/keeping-components-pure#purity-components-as-formulas) you run it with the same inputs – props, state, context for component inputs; and arguments for hook inputs.
* **Has no side effects in render** – Code with side effects should run [**separately from rendering**](#how-does-react-run-your-code). For example as an [event handler](/learn/responding-to-events) – where the user interacts with the UI and causes it to update; or as an [Effect](/reference/react/useEffect) – which runs after render.
* **Does not mutate non-local values**: Components and Hooks should [never modify values that aren't created locally](#mutation) in render.

Expand Down Expand Up @@ -70,7 +70,7 @@ function Dropdown() {

## Components and Hooks must be idempotent {/*components-and-hooks-must-be-idempotent*/}

Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result everytime](learn/keeping-components-pure) you run that piece of code with the same inputs.
Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result every time](learn/keeping-components-pure) you run that piece of code with the same inputs.

This means that _all_ code that runs [during render](#how-does-react-run-your-code) must also be idempotent in order for this rule to hold. For example, this line of code is not idempotent (and therefore, neither is the component):

Expand Down
Loading