amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-21 19:31:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use const where applicable in examples for keeping components pure (#7819)

Browse Source
This commit is contained in:
Aakansha Doshi
2025-06-02 22:06:20 +05:30
committed by GitHub
parent 06965de1d0
commit e90179047b
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/content/learn/keeping-components-pure.md
View File

@@ -175,7 +175,7 @@ function Cup({ guest }) {
}
export default function TeaGathering() {
let cups = [];
const cups = [];
for (let i = 1; i <= 12; i++) {
cups.push(<Cup key={i} guest={i} />);
}
@@ -245,7 +245,7 @@ Rendering is a *calculation*, it shouldn't try to "do" things. Can you express t
```js src/Clock.js active
export default function Clock({ time }) {
let hours = time.getHours();
const hours = time.getHours();
if (hours >= 0 && hours <= 6) {
document.getElementById('time').className = 'night';
} else {
@@ -307,7 +307,7 @@ You can fix this component by calculating the `className` and including it in th
```js src/Clock.js active
export default function Clock({ time }) {
let hours = time.getHours();
const hours = time.getHours();
let className;
if (hours >= 0 && hours <= 6) {
className = 'night';
@@ -606,14 +606,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
let initialStories = [
const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];
export default function App() {
let [stories, setStories] = useState([...initialStories])
let time = useTime();
const [stories, setStories] = useState([...initialStories])
const time = useTime();
// HACK: Prevent the memory from growing forever while you read docs.
// We're breaking our own rules here.
@@ -702,14 +702,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
let initialStories = [
const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];
export default function App() {
let [stories, setStories] = useState([...initialStories])
let time = useTime();
const [stories, setStories] = useState([...initialStories])
const time = useTime();
// HACK: Prevent the memory from growing forever while you read docs.
// We're breaking our own rules here.
@@ -770,7 +770,7 @@ Alternatively, you could create a _new_ array (by copying the existing one) befo
```js src/StoryTray.js active
export default function StoryTray({ stories }) {
// Copy the array!
let storiesToDisplay = stories.slice();
const storiesToDisplay = stories.slice();
// Does not affect the original array:
storiesToDisplay.push({
@@ -794,14 +794,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
let initialStories = [
const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];
export default function App() {
let [stories, setStories] = useState([...initialStories])
let time = useTime();
const [stories, setStories] = useState([...initialStories])
const time = useTime();
// HACK: Prevent the memory from growing forever while you read docs.
// We're breaking our own rules here.