State Update Patterns and Immutability

function UserProfile() {
  const [user, setUser] = useState({
    name: 'John',
    age: 30,
    email: 'john@example.com',
    address: { city: 'NYC', country: 'USA' }
  });
  
  // ❌ Wrong: Direct mutation doesn't trigger re-render
  const updateNameBad = () => {
    user.name = 'Jane';
    setUser(user); // Same reference, React won't re-render!
  };
  
  // ✅ Correct: Create new object with spread
  const updateName = (name) => {
    setUser(prev => ({ ...prev, name }));
  };
  
  // ✅ Update multiple properties
  const updateProfile = () => {
    setUser(prev => ({
      ...prev,
      name: 'Jane',
      age: 31,
      email: 'jane@example.com'
    }));
  };
  
  // ✅ Dynamic property name
  const updateField = (field, value) => {
    setUser(prev => ({ ...prev, [field]: value }));
  };
  
  // ✅ Merge with another object
  const applyUpdates = (updates) => {
    setUser(prev => ({ ...prev, ...updates }));
  };
  
  // ✅ Remove property
  const removeEmail = () => {
    setUser(prev => {
      const { email, ...rest } = prev;
      return rest;
    });
  };
  
  // ✅ Conditional property
  const updateWithOptionalField = (includeEmail) => {
    setUser(prev => ({
      ...prev,
      name: 'Updated',
      ...(includeEmail && { email: 'new@example.com' })
    }));
  };
  
  return <div>{user.name}</div>;
}

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Task 1', completed: false },
    { id: 2, text: 'Task 2', completed: true }
  ]);
  
  // ✅ Add new todo
  const addTodo = (text) => {
    const newTodo = { id: Date.now(), text, completed: false };
    setTodos(prev => [...prev, newTodo]);
  };
  
  // ✅ Remove todo by id
  const removeTodo = (id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  };
  
  // ✅ Update todo text
  const updateTodoText = (id, newText) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, text: newText } : todo
    ));
  };
  
  // ✅ Toggle completed status
  const toggleTodo = (id) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };
  
  // ✅ Insert at beginning
  const prependTodo = (text) => {
    const newTodo = { id: Date.now(), text, completed: false };
    setTodos(prev => [newTodo, ...prev]);
  };
  
  // ✅ Insert at specific position
  const insertTodoAt = (index, text) => {
    const newTodo = { id: Date.now(), text, completed: false };
    setTodos(prev => [
      ...prev.slice(0, index),
      newTodo,
      ...prev.slice(index)
    ]);
  };
  
  // ✅ Sort immutably
  const sortByText = () => {
    setTodos(prev => [...prev].sort((a, b) => a.text.localeCompare(b.text)));
  };
  
  // ✅ Clear completed
  const clearCompleted = () => {
    setTodos(prev => prev.filter(todo => !todo.completed));
  };
  
  // ✅ Mark all as completed
  const completeAll = () => {
    setTodos(prev => prev.map(todo => ({ ...todo, completed: true })));
  };
  
  return <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}

function UserProfile() {
  const [user, setUser] = useState({
    name: 'John',
    profile: {
      bio: 'Developer',
      social: {
        twitter: '@john',
        github: 'john'
      }
    },
    settings: {
      theme: 'light',
      notifications: {
        email: true,
        push: false
      }
    }
  });
  
  // Update deeply nested property (manual spread - verbose!)
  const updateTwitter = (newHandle) => {
    setUser(prev => ({
      ...prev,
      profile: {
        ...prev.profile,
        social: {
          ...prev.profile.social,
          twitter: newHandle
        }
      }
    }));
  };
  
  // Update multiple nested properties
  const updateNotifications = (email, push) => {
    setUser(prev => ({
      ...prev,
      settings: {
        ...prev.settings,
        notifications: {
          ...prev.settings.notifications,
          email,
          push
        }
      }
    }));
  };
  
  return <div>{user.name}</div>;
}

import { useState } from 'react';
import { useImmer } from 'use-immer';

// Option 1: use-immer hook (recommended)
function UserProfileWithImmer() {
  const [user, updateUser] = useImmer({
    name: 'John',
    profile: {
      bio: 'Developer',
      social: { twitter: '@john', github: 'john' }
    },
    settings: {
      theme: 'light',
      notifications: { email: true, push: false }
    }
  });
  
  // ✅ Write "mutating" code, Immer makes it immutable
  const updateTwitter = (newHandle) => {
    updateUser(draft => {
      draft.profile.social.twitter = newHandle;
    });
  };
  
  const updateNotifications = (email, push) => {
    updateUser(draft => {
      draft.settings.notifications.email = email;
      draft.settings.notifications.push = push;
    });
  };
  
  // Complex update with array manipulation
  const addHobby = (hobby) => {
    updateUser(draft => {
      if (!draft.profile.hobbies) {
        draft.profile.hobbies = [];
      }
      draft.profile.hobbies.push(hobby);
    });
  };
  
  return <div>{user.name}</div>;
}

// Option 2: Manual Immer with produce
import produce from 'immer';

function UserProfileManualImmer() {
  const [user, setUser] = useState({...});
  
  const updateTwitter = (newHandle) => {
    setUser(prev => produce(prev, draft => {
      draft.profile.social.twitter = newHandle;
    }));
  };
  
  return <div>{user.name}</div>;
}

import { useImmer } from 'use-immer';

function TeamManager() {
  const [teams, updateTeams] = useImmer([
    {
      id: 1,
      name: 'Engineering',
      members: [
        { id: 101, name: 'Alice', role: 'Lead', skills: ['React', 'Node'] },
        { id: 102, name: 'Bob', role: 'Dev', skills: ['Python'] }
      ]
    }
  ]);
  
  // Update nested member's skill
  const addSkill = (teamId, memberId, skill) => {
    updateTeams(draft => {
      const team = draft.find(t => t.id === teamId);
      if (team) {
        const member = team.members.find(m => m.id === memberId);
        if (member) {
          member.skills.push(skill);
        }
      }
    });
  };
  
  // Update member role
  const updateMemberRole = (teamId, memberId, newRole) => {
    updateTeams(draft => {
      const team = draft.find(t => t.id === teamId);
      if (team) {
        const member = team.members.find(m => m.id === memberId);
        if (member) {
          member.role = newRole;
        }
      }
    });
  };
  
  // Without Immer (compare complexity):
  const addSkillManual = (teamId, memberId, skill) => {
    setTeams(prev => prev.map(team =>
      team.id === teamId
        ? {
            ...team,
            members: team.members.map(member =>
              member.id === memberId
                ? { ...member, skills: [...member.skills, skill] }
                : member
            )
          }
        : team
    ));
  };
  
  return <div>Teams</div>;
}

// ❌ Denormalized: Nested, hard to update
const denormalizedState = {
  posts: [
    {
      id: 1,
      title: 'Post 1',
      author: { id: 10, name: 'Alice', email: 'alice@example.com' },
      comments: [
        { id: 101, text: 'Nice!', author: { id: 10, name: 'Alice', email: 'alice@example.com' } },
        { id: 102, text: 'Cool', author: { id: 11, name: 'Bob', email: 'bob@example.com' } }
      ]
    },
    {
      id: 2,
      title: 'Post 2',
      author: { id: 11, name: 'Bob', email: 'bob@example.com' },
      comments: []
    }
  ]
};

// Problem: To update Alice's email, must find and update in multiple places!

// ✅ Normalized: Flat, single source of truth
const normalizedState = {
  users: {
    byId: {
      10: { id: 10, name: 'Alice', email: 'alice@example.com' },
      11: { id: 11, name: 'Bob', email: 'bob@example.com' }
    },
    allIds: [10, 11]
  },
  posts: {
    byId: {
      1: { id: 1, title: 'Post 1', authorId: 10, commentIds: [101, 102] },
      2: { id: 2, title: 'Post 2', authorId: 11, commentIds: [] }
    },
    allIds: [1, 2]
  },
  comments: {
    byId: {
      101: { id: 101, text: 'Nice!', authorId: 10, postId: 1 },
      102: { id: 102, text: 'Cool', authorId: 11, postId: 1 }
    },
    allIds: [101, 102]
  }
};

// Easy update: Change Alice's email in ONE place
const updateUserEmail = (userId, newEmail) => {
  setState(prev => ({
    ...prev,
    users: {
      ...prev.users,
      byId: {
        ...prev.users.byId,
        [userId]: { ...prev.users.byId[userId], email: newEmail }
      }
    }
  }));
};

function BlogApp() {
  const [state, setState] = useState({
    posts: { byId: {}, allIds: [] },
    comments: { byId: {}, allIds: [] },
    users: { byId: {}, allIds: [] }
  });
  
  // Add post
  const addPost = (post) => {
    setState(prev => ({
      ...prev,
      posts: {
        byId: { ...prev.posts.byId, [post.id]: post },
        allIds: [...prev.posts.allIds, post.id]
      }
    }));
  };
  
  // Remove post
  const removePost = (postId) => {
    setState(prev => {
      const { [postId]: removed, ...remainingPosts } = prev.posts.byId;
      return {
        ...prev,
        posts: {
          byId: remainingPosts,
          allIds: prev.posts.allIds.filter(id => id !== postId)
        }
      };
    });
  };
  
  // Update post
  const updatePost = (postId, updates) => {
    setState(prev => ({
      ...prev,
      posts: {
        ...prev.posts,
        byId: {
          ...prev.posts.byId,
          [postId]: { ...prev.posts.byId[postId], ...updates }
        }
      }
    }));
  };
  
  // Get post with author (selector pattern)
  const getPostWithAuthor = (postId) => {
    const post = state.posts.byId[postId];
    const author = state.users.byId[post.authorId];
    return { ...post, author };
  };
  
  return <div>Blog</div>;
}

function MutationExamples() {
  const [items, setItems] = useState([1, 2, 3]);
  const [user, setUser] = useState({ name: 'John', age: 30 });
  
  // ❌ WRONG: Mutations that don't trigger re-render
  const bad1 = () => {
    items.push(4);
    setItems(items); // Same reference!
  };
  
  const bad2 = () => {
    user.name = 'Jane';
    setUser(user); // Same reference!
  };
  
  const bad3 = () => {
    items.sort();
    setItems(items); // Mutated in place!
  };
  
  const bad4 = () => {
    const copy = user;
    copy.name = 'Jane';
    setUser(copy); // Shallow copy - same reference!
  };
  
  // ✅ CORRECT: Immutable updates
  const good1 = () => {
    setItems(prev => [...prev, 4]); // New array
  };
  
  const good2 = () => {
    setUser(prev => ({ ...prev, name: 'Jane' })); // New object
  };
  
  const good3 = () => {
    setItems(prev => [...prev].sort()); // Copy first, then sort
  };
  
  const good4 = () => {
    setUser(prev => ({ ...prev })); // Proper copy
  };
  
  return <div>Items: {items.length}</div>;
}

// ❌ WRONG: Mutation during render
function BadComponent({ data }) {
  const [processed, setProcessed] = useState([]);
  
  // BAD: Setting state during render!
  if (data.length > 0 && processed.length === 0) {
    setProcessed(data.map(transform)); // Causes infinite loop or warnings
  }
  
  return <div>{processed.length}</div>;
}

// ✅ CORRECT: Side effects in useEffect
function GoodComponent({ data }) {
  const [processed, setProcessed] = useState([]);
  
  useEffect(() => {
    setProcessed(data.map(transform));
  }, [data]);
  
  return <div>{processed.length}</div>;
}

// ✅ BETTER: Compute during render without state
function BestComponent({ data }) {
  const processed = useMemo(() => data.map(transform), [data]);
  
  return <div>{processed.length}</div>;
}

function OptimizedComponent() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: 'John', age: 30 });
  
  // ❌ Always creates new object, even if unchanged
  const updateUserBad = (newName) => {
    setUser(prev => ({ ...prev, name: newName }));
    // Even if newName === prev.name, creates new object!
  };
  
  // ✅ Bail out if unchanged
  const updateUserGood = (newName) => {
    setUser(prev => {
      if (prev.name === newName) {
        return prev; // Same reference, React skips re-render
      }
      return { ...prev, name: newName };
    });
  };
  
  // ✅ Bail out for primitive values (automatic)
  const incrementIfEven = () => {
    setCount(prev => {
      if (prev % 2 === 0) {
        return prev + 1;
      }
      return prev; // Same value, React bails out
    });
  };
  
  return <div>{user.name}: {count}</div>;
}

function TodoApp() {
  const [state, setState] = useState({
    todos: [],
    filter: 'all',
    sortBy: 'date',
    ui: { sidebarOpen: true, theme: 'light' }
  });
  
  // ❌ Creates entirely new object
  const toggleSidebarBad = () => {
    setState(prev => ({
      todos: [...prev.todos], // Unnecessary copy
      filter: prev.filter,
      sortBy: prev.sortBy,
      ui: { ...prev.ui, sidebarOpen: !prev.ui.sidebarOpen }
    }));
  };
  
  // ✅ Structural sharing - reuse unchanged parts
  const toggleSidebarGood = () => {
    setState(prev => ({
      ...prev, // Reuse todos, filter, sortBy references
      ui: { ...prev.ui, sidebarOpen: !prev.ui.sidebarOpen }
    }));
  };
  
  // ✅ Update only affected slice
  const updateFilter = (newFilter) => {
    setState(prev => ({ ...prev, filter: newFilter }));
    // todos, sortBy, ui maintain same references
  };
  
  return <div>Todos</div>;
}

// ❌ Monolithic state - sidebar toggle re-renders entire app
function BadApp() {
  const [state, setState] = useState({
    todos: [], // Rarely changes
    user: {}, // Rarely changes
    sidebarOpen: true, // Changes frequently
    currentView: 'list' // Changes frequently
  });
  
  // Every state change re-renders everything
  return <div>...</div>;
}

// ✅ Split state - localized re-renders
function GoodApp() {
  // Separate state by update frequency
  const [todos, setTodos] = useState([]);
  const [user, setUser] = useState({});
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [currentView, setCurrentView] = useState('list');
  
  // Or split into contexts for different concerns
  return (
    <UserContext.Provider value={user}>
      <TodoContext.Provider value={todos}>
        <UIContext.Provider value={{ sidebarOpen, currentView }}>
          <Content />
        </UIContext.Provider>
      </TodoContext.Provider>
    </UserContext.Provider>
  );
}

// Components using only UI state won't re-render when todos change
function Sidebar() {
  const { sidebarOpen } = useContext(UIContext);
  return <aside>{sidebarOpen && 'Sidebar'}</aside>;
}