ArchCase

Design · Practice · Interview

Loading…

Mutating state and props in React

Reactmid

Main had a simple TodoList that only rendered the array. A colleague from an OOP background sent a PR that adds interactivity: toggle, addTag, sort. It compiles, but QA complains that tasks "sometimes don't update". Walk the diff and find the mutations.

PR: lesson.tsx +21 −04 проблем

11 import { useState } from 'react'

33 interface Todo {

44 id: string

55 text: string

66 done: boolean

77 tags: string[]

88 }

1010 interface Props {

1111 initialTodos: Todo[]

1212 }

1313

1414 export function TodoList({ initialTodos }: Props) {

15- const [todos] = useState<Todo[]>(initialTodos)

15+ const [todos, setTodos] = useState<Todo[]>(initialTodos)

1616

17+ const toggleDone = (id: string) => {

18+ const todo = todos.find((t) => t.id === id)

19+ if (todo) {

20+ todo.done = !todo.done

21+ setTodos(todos)

22+ }

23+ }

24+

25+ const addTag = (id: string, tag: string) => {

26+ const todo = todos.find((t) => t.id === id)

27+ if (todo) {

28+ todo.tags.push(tag)

29+ setTodos([...todos])

30+ }

31+ }

32+

33+ const sortByText = () => {

34+ const sorted = todos.sort((a, b) => a.text.localeCompare(b.text))

35+ setTodos(sorted)

36+ }

37+

1738 return (

1839 <ul>

1940 {todos.map((t) => (

20- <li key={t.id}>

41+ <li key={t.id} onClick={() => toggleDone(t.id)}>

2142 {t.done ? '✓' : '○'} {t.text} [{t.tags.join(', ')}]

2243 </li>

2344 ))}

2445 </ul>

2546 )

2647 }

Шаг 1 из 6

What is immutability in React

React re-renders when it sees state changed. "Changed" is decided by `Object.is(prev, next)`: **by reference**, not by contents. That means: if you mutate an object/array and pass it back to setState, React concludes nothing changed — and won't re-render. The UI stays stale. Forbidden methods: `push`, `pop`, `shift`, `splice`, `sort`, `reverse`, direct assignment (`obj.field = x`). Walk the PR and find every mutation.