fix: global mutation avoided except for first example to make a point, addresses issue#7497

Author: TheCaptain1810

src/content/learn/updating-arrays-in-state.md

@@ -106,9 +106,8 @@ Now it works correctly:
 ```js
 import { useState } from 'react';
 
-let nextId = 0;
-
 export default function List() {
+  const [nextId, setNextId] = useState(0);
   const [name, setName] = useState('');
   const [artists, setArtists] = useState([]);
 
@@ -122,8 +121,9 @@ export default function List() {
       <button onClick={() => {
         setArtists([
           ...artists,
-          { id: nextId++, name: name }
+          { id: nextId, name: name }
         ]);
+        setNextId(nextId + 1);
       }}>Add</button>
       <ul>
         {artists.map(artist => (
@@ -343,14 +343,14 @@ In this example, the Insert button always inserts at the index `1`:
 ```js
 import { useState } from 'react';
 
-let nextId = 3;
 const initialArtists = [
   { id: 0, name: 'Marta Colvin Andrade' },
   { id: 1, name: 'Lamidi Olonade Fakeye'},
   { id: 2, name: 'Louise Nevelson'},
 ];
 
 export default function List() {
+  const [nextId, setNextId] = useState(3);
   const [name, setName] = useState('');
   const [artists, setArtists] = useState(
     initialArtists
@@ -362,11 +362,12 @@ export default function List() {
       // Items before the insertion point:
       ...artists.slice(0, insertAt),
       // New item:
-      { id: nextId++, name: name },
+      { id: nextId, name: name },
       // Items after the insertion point:
       ...artists.slice(insertAt)
     ];
     setArtists(nextArtists);
+    setNextId(nextId + 1);
     setName('');
   }
 
@@ -466,14 +467,14 @@ In this example, two separate artwork lists have the same initial state. They ar
 ```js
 import { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },
   { id: 2, title: 'Terracotta Army', seen: true },
 ];
 
 export default function BucketList() {
+  const [nextId, setNextId] = useState(3);
   const [myList, setMyList] = useState(initialList);
   const [yourList, setYourList] = useState(
     initialList
@@ -573,14 +574,14 @@ With this approach, none of the existing state items are being mutated, and the
 ```js
 import { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },
   { id: 2, title: 'Terracotta Army', seen: true },
 ];
 
 export default function BucketList() {
+  const [nextId, setNextId] = useState(3);
   const [myList, setMyList] = useState(initialList);
   const [yourList, setYourList] = useState(
     initialList
@@ -669,14 +670,14 @@ Here is the Art Bucket List example rewritten with Immer:
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },
   { id: 2, title: 'Terracotta Army', seen: true },
 ];
 
 export default function BucketList() {
+  const [nextId, setNextId] = useState(3);
   const [myList, updateMyList] = useImmer(
     initialList
   );
@@ -1088,24 +1089,25 @@ import { useState } from 'react';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
 
-let nextId = 3;
 const initialTodos = [
   { id: 0, title: 'Buy milk', done: true },
   { id: 1, title: 'Eat tacos', done: false },
   { id: 2, title: 'Brew tea', done: false },
 ];
 
 export default function TaskApp() {
+  const [nextId, setNextId] = useState(3);
   const [todos, setTodos] = useState(
     initialTodos
   );
 
   function handleAddTodo(title) {
     todos.push({
-      id: nextId++,
+      id: nextId,
       title: title,
       done: false
     });
+    setNextId(nextId + 1);
   }
 
   function handleChangeTodo(nextTodo) {
@@ -1251,14 +1253,14 @@ import { useState } from 'react';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
 
-let nextId = 3;
 const initialTodos = [
   { id: 0, title: 'Buy milk', done: true },
   { id: 1, title: 'Eat tacos', done: false },
   { id: 2, title: 'Brew tea', done: false },
 ];
 
 export default function TaskApp() {
+  const [nextId, setNextId] = useState(3);
   const [todos, setTodos] = useState(
     initialTodos
   );
@@ -1267,11 +1269,12 @@ export default function TaskApp() {
     setTodos([
       ...todos,
       {
-        id: nextId++,
+        id: nextId,
         title: title,
         done: false
       }
     ]);
+    setNextId(nextId + 1);
   }
 
   function handleChangeTodo(nextTodo) {
@@ -1422,24 +1425,25 @@ import { useImmer } from 'use-immer';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
 
-let nextId = 3;
 const initialTodos = [
   { id: 0, title: 'Buy milk', done: true },
   { id: 1, title: 'Eat tacos', done: false },
   { id: 2, title: 'Brew tea', done: false },
 ];
 
 export default function TaskApp() {
+  const [nextId, setNextId] = useState(3);
   const [todos, setTodos] = useState(
     initialTodos
   );
 
   function handleAddTodo(title) {
     todos.push({
-      id: nextId++,
+      id: nextId,
       title: title,
       done: false
     });
+    setNextId(nextId + 1);
   }
 
   function handleChangeTodo(nextTodo) {
@@ -1604,26 +1608,27 @@ import { useImmer } from 'use-immer';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
 
-let nextId = 3;
 const initialTodos = [
   { id: 0, title: 'Buy milk', done: true },
   { id: 1, title: 'Eat tacos', done: false },
   { id: 2, title: 'Brew tea', done: false },
 ];
 
 export default function TaskApp() {
+  const [nextId, setNextId] = useState(3);
   const [todos, updateTodos] = useImmer(
     initialTodos
   );
 
   function handleAddTodo(title) {
     updateTodos(draft => {
       draft.push({
-        id: nextId++,
+        id: nextId,
         title: title,
         done: false
       });
     });
+    setNextId(nextId + 1);
   }
 
   function handleChangeTodo(nextTodo) {
@@ -1792,26 +1797,27 @@ import { useImmer } from 'use-immer';
 import AddTodo from './AddTodo.js';
 import TaskList from './TaskList.js';
 
-let nextId = 3;
 const initialTodos = [
   { id: 0, title: 'Buy milk', done: true },
   { id: 1, title: 'Eat tacos', done: false },
   { id: 2, title: 'Brew tea', done: false },
 ];
 
 export default function TaskApp() {
+  const [nextId, setNextId] = useState(3);
   const [todos, updateTodos] = useImmer(
     initialTodos
   );
 
   function handleAddTodo(title) {
     updateTodos(draft => {
       draft.push({
-        id: nextId++,
+        id: nextId,
         title: title,
         done: false
       });
     });
+    setNextId(nextId + 1);
   }
 
   function handleChangeTodo(nextTodo) {