React 18

Update Logic with Immer

• Updating arrays and objects without mutation can get a little bit complicated and repetitive.
• You can use the immer library to simplify the update logic
• Immer is a library that can help us update objects and arrays in a more concise and mutable way.
• Install Immer

npm i immer@9.0.19

• Import produce

import produce from "immer"

• Update logic

setBugs(produce(draft => {
	const bug = draft.find(bug => bug.id === 1);
	if(bug) bug.fixed = true;
}))

• Draft is a proxy object that record the changes, we're going to apply to the array. So we are free to mutate or modify, just like your regular JavaScript object.