From b621d47e962ffbc88dd60cfc1933e63dc7a7ed82 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Wed, 3 Sep 2025 12:11:50 -0400
Subject: [PATCH] Remove deprecated loremflickr placeholder images

The previous examples used a service called loremflickr.com to link to  placeholder images. Since that service is now down, I updated them to reference placecats.com instead, which we already use in other examples as well. placecats doesn't have the same random cat feature so I roughly approximated it in the example code.

Closes #7966
---
 .../learn/manipulating-the-dom-with-refs.md   |  83 +++++--
 src/content/reference/react/StrictMode.md     | 219 +++++++++---------
 2 files changed, 173 insertions(+), 129 deletions(-)

diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index fe1443d7ae0..2d1ee86851d 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -247,13 +247,13 @@ export default function CatFriends() {
       <nav>
         <button onClick={() => scrollToCat(catList[0])}>Neo</button>
         <button onClick={() => scrollToCat(catList[5])}>Millie</button>
-        <button onClick={() => scrollToCat(catList[9])}>Bella</button>
+        <button onClick={() => scrollToCat(catList[8])}>Bella</button>
       </nav>
       <div>
         <ul>
           {catList.map((cat) => (
             <li
-              key={cat}
+              key={cat.id}
               ref={(node) => {
                 const map = getMap();
                 map.set(cat, node);
@@ -263,7 +263,7 @@ export default function CatFriends() {
                 };
               }}
             >
-              <img src={cat} />
+              <img src={cat.imageUrl} />
             </li>
           ))}
         </ul>
@@ -273,11 +273,22 @@ export default function CatFriends() {
 }
 
 function setupCatList() {
-  const catList = [];
-  for (let i = 0; i < 10; i++) {
-    catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
+  const catCount = 10;
+  const catList = new Array(catCount)
+  for (let i = 0; i < catCount; i++) {
+    let imageUrl = '';
+    if (i < 5) {
+      imageUrl = "https://placecats.com/neo/320/240";
+    } else if (i < 8) {
+      imageUrl = "https://placecats.com/millie/320/240";
+    } else {
+      imageUrl = "https://placecats.com/bella/320/240";
+    }
+    catList[i] = {
+      id: i,
+      imageUrl,
+    };
   }
-
   return catList;
 }
 
@@ -876,12 +887,30 @@ export default function CatFriends() {
   );
 }
 
-const catList = [];
-for (let i = 0; i < 10; i++) {
-  catList.push({
+const catCount = 10;
+const catList = new Array(catCount);
+for (let i = 0; i < catCount; i++) {
+  const bucket = Math.floor(Math.random() * catCount) % 2;
+  let imageUrl = '';
+  switch (bucket) {
+    case 0: {
+      imageUrl = "https://placecats.com/neo/250/200";
+      break;
+    }
+    case 1: {
+      imageUrl = "https://placecats.com/millie/250/200";
+      break;
+    }
+    case 2:
+    default: {
+      imageUrl = "https://placecats.com/bella/250/200";
+      break;
+    }
+  }
+  catList[i] = {
     id: i,
-    imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
-  });
+    imageUrl,
+  };
 }
 
 ```
@@ -961,7 +990,7 @@ export default function CatFriends() {
             behavior: 'smooth',
             block: 'nearest',
             inline: 'center'
-          });            
+          });
         }}>
           Next
         </button>
@@ -993,12 +1022,30 @@ export default function CatFriends() {
   );
 }
 
-const catList = [];
-for (let i = 0; i < 10; i++) {
-  catList.push({
+const catCount = 10;
+const catList = new Array(catCount);
+for (let i = 0; i < catCount; i++) {
+  const bucket = Math.floor(Math.random() * catCount) % 2;
+  let imageUrl = '';
+  switch (bucket) {
+    case 0: {
+      imageUrl = "https://placecats.com/neo/250/200";
+      break;
+    }
+    case 1: {
+      imageUrl = "https://placecats.com/millie/250/200";
+      break;
+    }
+    case 2:
+    default: {
+      imageUrl = "https://placecats.com/bella/250/200";
+      break;
+    }
+  }
+  catList[i] = {
     id: i,
-    imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
-  });
+    imageUrl,
+  };
 }
 
 ```
diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md
index 1af02ccd165..4a7db874841 100644
--- a/src/content/reference/react/StrictMode.md
+++ b/src/content/reference/react/StrictMode.md
@@ -224,7 +224,7 @@ li {
 
 There is a mistake in the code above. However, it is easy to miss because the initial output appears correct.
 
-This mistake will become more noticeable if the `StoryTray` component re-renders multiple times. For example, let's make the `StoryTray` re-render with a different background color whenever you hover over it: 
+This mistake will become more noticeable if the `StoryTray` component re-renders multiple times. For example, let's make the `StoryTray` re-render with a different background color whenever you hover over it:
 
 <Sandpack>
 
@@ -859,12 +859,12 @@ root.render(<App />);
 ```js src/App.js active
 import { useRef, useState } from "react";
 
-export default function AnimalFriends() {
+export default function CatFriends() {
   const itemsRef = useRef([]);
-  const [animalList, setAnimalList] = useState(setupAnimalList);
-  const [animal, setAnimal] = useState('cat');
+  const [catList, setCatList] = useState(setupCatList);
+  const [cat, setCat] = useState('neo');
 
-  function scrollToAnimal(index) {
+  function scrollToCat(index) {
     const list = itemsRef.current;
     const {node} = list[index];
     node.scrollIntoView({
@@ -873,61 +873,60 @@ export default function AnimalFriends() {
       inline: "center",
     });
   }
-  
-  const animals = animalList.filter(a => a.type === animal)
-  
+
+  const cats = catList.filter(c => c.type === cat)
+
   return (
     <>
       <nav>
-        <button onClick={() => setAnimal('cat')}>Cats</button>
-        <button onClick={() => setAnimal('dog')}>Dogs</button>
+        <button onClick={() => setCat('neo')}>Neo</button>
+        <button onClick={() => setCat('millie')}>Millie</button>
       </nav>
       <hr />
       <nav>
-        <span>Scroll to:</span>{animals.map((animal, index) => (
-          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+        <span>Scroll to:</span>{cats.map((cat, index) => (
+          <button key={cat.src} onClick={() => scrollToCat(index)}>
             {index}
           </button>
         ))}
       </nav>
       <div>
         <ul>
-          {animals.map((animal) => (
-              <li
-                key={animal.src}
-                ref={(node) => {
-                  const list = itemsRef.current;
-                  const item = {animal: animal, node}; 
-                  list.push(item);
-                  console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
-                  if (list.length > 10) {
-                    console.log('❌ Too many animals in the list!');
-                  }
-                  return () => {
-                    // 🚩 No cleanup, this is a bug!
-                  }
-                }}
-              >
-                <img src={animal.src} />
-              </li>
-            ))}
-          
+          {cats.map((cat) => (
+            <li
+              key={cat.src}
+              ref={(node) => {
+                const list = itemsRef.current;
+                const item = {cat: cat, node};
+                list.push(item);
+                console.log(`✅ Adding cat to the map. Total cats: ${list.length}`);
+                if (list.length > 10) {
+                  console.log('❌ Too many cats in the list!');
+                }
+                return () => {
+                  // 🚩 No cleanup, this is a bug!
+                }
+              }}
+            >
+              <img src={cat.src} />
+            </li>
+          ))}
         </ul>
       </div>
     </>
   );
 }
 
-function setupAnimalList() {
-  const animalList = [];
+function setupCatList() {
+  const catList = [];
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+    catList.push({type: 'neo', src: "https://placecats.com/neo/320/240?" + i});
   }
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+    catList.push({type: 'millie', src: "https://placecats.com/millie/320/240?" + i});
   }
 
-  return animalList;
+  return catList;
 }
 
 ```
@@ -1001,12 +1000,12 @@ root.render(
 ```js src/App.js active
 import { useRef, useState } from "react";
 
-export default function AnimalFriends() {
+export default function CatFriends() {
   const itemsRef = useRef([]);
-  const [animalList, setAnimalList] = useState(setupAnimalList);
-  const [animal, setAnimal] = useState('cat');
+  const [catList, setCatList] = useState(setupCatList);
+  const [cat, setCat] = useState('neo');
 
-  function scrollToAnimal(index) {
+  function scrollToCat(index) {
     const list = itemsRef.current;
     const {node} = list[index];
     node.scrollIntoView({
@@ -1015,61 +1014,60 @@ export default function AnimalFriends() {
       inline: "center",
     });
   }
-  
-  const animals = animalList.filter(a => a.type === animal)
-  
+
+  const cats = catList.filter(c => c.type === cat)
+
   return (
     <>
       <nav>
-        <button onClick={() => setAnimal('cat')}>Cats</button>
-        <button onClick={() => setAnimal('dog')}>Dogs</button>
+        <button onClick={() => setCat('neo')}>Neo</button>
+        <button onClick={() => setCat('millie')}>Millie</button>
       </nav>
       <hr />
       <nav>
-        <span>Scroll to:</span>{animals.map((animal, index) => (
-          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+        <span>Scroll to:</span>{cats.map((cat, index) => (
+          <button key={cat.src} onClick={() => scrollToCat(index)}>
             {index}
           </button>
         ))}
       </nav>
       <div>
         <ul>
-          {animals.map((animal) => (
-              <li
-                key={animal.src}
-                ref={(node) => {
-                  const list = itemsRef.current;
-                  const item = {animal: animal, node} 
-                  list.push(item);
-                  console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
-                  if (list.length > 10) {
-                    console.log('❌ Too many animals in the list!');
-                  }
-                  return () => {
-                    // 🚩 No cleanup, this is a bug!
-                  }
-                }}
-              >
-                <img src={animal.src} />
-              </li>
-            ))}
-          
+          {cats.map((cat) => (
+            <li
+              key={cat.src}
+              ref={(node) => {
+                const list = itemsRef.current;
+                const item = {cat: cat, node};
+                list.push(item);
+                console.log(`✅ Adding cat to the map. Total cats: ${list.length}`);
+                if (list.length > 10) {
+                  console.log('❌ Too many cats in the list!');
+                }
+                return () => {
+                  // 🚩 No cleanup, this is a bug!
+                }
+              }}
+            >
+              <img src={cat.src} />
+            </li>
+          ))}
         </ul>
       </div>
     </>
   );
 }
 
-function setupAnimalList() {
-  const animalList = [];
+function setupCatList() {
+  const catList = [];
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+    catList.push({type: 'neo', src: "https://placecats.com/neo/320/240?" + i});
   }
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+    catList.push({type: 'millie', src: "https://placecats.com/millie/320/240?" + i});
   }
 
-  return animalList;
+  return catList;
 }
 
 ```
@@ -1127,12 +1125,12 @@ root.render(
 ```js src/App.js active
 import { useRef, useState } from "react";
 
-export default function AnimalFriends() {
+export default function CatFriends() {
   const itemsRef = useRef([]);
-  const [animalList, setAnimalList] = useState(setupAnimalList);
-  const [animal, setAnimal] = useState('cat');
+  const [catList, setCatList] = useState(setupCatList);
+  const [cat, setCat] = useState('neo');
 
-  function scrollToAnimal(index) {
+  function scrollToCat(index) {
     const list = itemsRef.current;
     const {node} = list[index];
     node.scrollIntoView({
@@ -1141,62 +1139,61 @@ export default function AnimalFriends() {
       inline: "center",
     });
   }
-  
-  const animals = animalList.filter(a => a.type === animal)
-  
+
+  const cats = catList.filter(c => c.type === cat)
+
   return (
     <>
       <nav>
-        <button onClick={() => setAnimal('cat')}>Cats</button>
-        <button onClick={() => setAnimal('dog')}>Dogs</button>
+        <button onClick={() => setCat('neo')}>Neo</button>
+        <button onClick={() => setCat('millie')}>Millie</button>
       </nav>
       <hr />
       <nav>
-        <span>Scroll to:</span>{animals.map((animal, index) => (
-          <button key={animal.src} onClick={() => scrollToAnimal(index)}>
+        <span>Scroll to:</span>{cats.map((cat, index) => (
+          <button key={cat.src} onClick={() => scrollToCat(index)}>
             {index}
           </button>
         ))}
       </nav>
       <div>
         <ul>
-          {animals.map((animal) => (
-              <li
-                key={animal.src}
-                ref={(node) => {
-                  const list = itemsRef.current;
-                  const item = {animal, node};
-                  list.push({animal: animal, node});
-                  console.log(`✅ Adding animal to the map. Total animals: ${list.length}`);
-                  if (list.length > 10) {
-                    console.log('❌ Too many animals in the list!');
-                  }
-                  return () => {
-                    list.splice(list.indexOf(item));
-                    console.log(`❌ Removing animal from the map. Total animals: ${itemsRef.current.length}`);
-                  }
-                }}
-              >
-                <img src={animal.src} />
-              </li>
-            ))}
-          
+          {cats.map((cat) => (
+            <li
+              key={cat.src}
+              ref={(node) => {
+                const list = itemsRef.current;
+                const item = {cat: cat, node};
+                list.push(item);
+                console.log(`✅ Adding cat to the map. Total cats: ${list.length}`);
+                if (list.length > 10) {
+                  console.log('❌ Too many cats in the list!');
+                }
+                return () => {
+                  list.splice(list.indexOf(item));
+                  console.log(`❌ Removing cat from the map. Total cats: ${itemsRef.current.length}`);
+                }
+              }}
+            >
+              <img src={cat.src} />
+            </li>
+          ))}
         </ul>
       </div>
     </>
   );
 }
 
-function setupAnimalList() {
-  const animalList = [];
+function setupCatList() {
+  const catList = [];
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'cat', src: "https://loremflickr.com/320/240/cat?lock=" + i});
+    catList.push({type: 'neo', src: "https://placecats.com/neo/320/240?" + i});
   }
   for (let i = 0; i < 10; i++) {
-    animalList.push({type: 'dog', src: "https://loremflickr.com/320/240/dog?lock=" + i});
+    catList.push({type: 'millie', src: "https://placecats.com/millie/320/240?" + i});
   }
 
-  return animalList;
+  return catList;
 }
 
 ```
@@ -1244,7 +1241,7 @@ Now on inital mount in StrictMode, the ref callbacks are all setup, cleaned up,
 
 Without Strict Mode, it was easy to miss the bug until you clicked around to app to notice broken features. Strict Mode made the bugs appear right away, before you push them to production.
 
---- 
+---
 ### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}
 
 React warns if some component anywhere inside a `<StrictMode>` tree uses one of these deprecated APIs: