Simplifying Deep Updates with Immer’s produce

Showcase using Immer’s produce function to handle a complex state update that involves nested objects and arrays, highlighting the improved readability and maintainability.
import produce from 'immer';

const initialState = {
    user: {
        name: 'Alice',
        age: 30,
        address: {
            street: '123 Main St',
            city: 'Anytown'
    tasks: [
        { id: 1, text: 'Buy milk', done: false },
        { id: 2, text: 'Write report', done: true }

const nextState = produce(initialState, draft => {
    // Updating a deeply nested value = 'New City';
    // Adding to a nested array
    draft.tasks.push({ id: 3, text: 'Call Bob', done: false });
    // Updating an item inside a nested array
    const taskToComplete = draft.tasks.find(task => === 1);
    if(taskToComplete) {
        taskToComplete.done = true;

This example uses Immer's produce function to immutably update a complex state object. The 'initialState' represents some user data and a list of tasks. Within the produce function's 'draft', we update the city of the user's address, push a new task into the tasks array, and find a specific task to mark it as done. The original 'initialState' is not mutated, and 'nextState' is a new, updated, immutable state.