Skip to content

fix: global mutation avoided addressing issue #7497 #7630

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.

Sign up for GitHub

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

Closed
wants to merge 1 commit into from
Closed

fix: global mutation avoided addressing issue #7497 #7630

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
42 changes: 24 additions & 18 deletions src/content/learn/updating-arrays-in-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);

Expand All @@ -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 => (
Expand Down Expand Up @@ -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
Expand All @@ -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('');
}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
);
Expand All @@ -1267,11 +1269,12 @@ export default function TaskApp() {
setTodos([
...todos,
{
id: nextId++,
id: nextId,
title: title,
done: false
}
]);
setNextId(nextId + 1);
}

function handleChangeTodo(nextTodo) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down