Об’єкти у State

user.settings.theme = "dark";

const updatedUser = { ...user };

updatedUser.settings.theme = "dark";

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
  },
}));

setUser((currentUser) => ({
  ...currentUser,
  name: "Марія",
}));

setUser({
  ...user,
  name: "Марія",
});

import { useState } from "react";

export default function UserProfile() {
  const [user, setUser] = useState({
    name: "Олена",
    email: "olena@example.com",
    settings: {
      theme: "light",
      notifications: true,
    },
  });

  function handleNameChange(event) {
    const newName = event.target.value;

    setUser((currentUser) => ({
      ...currentUser,
      name: newName,
    }));
  }

  function handleThemeChange(event) {
    const newTheme = event.target.value;

    setUser((currentUser) => ({
      ...currentUser,
      settings: {
        ...currentUser.settings,
        theme: newTheme,
      },
    }));
  }

  function handleNotificationsChange(event) {
    const areNotificationsEnabled = event.target.checked;

    setUser((currentUser) => ({
      ...currentUser,
      settings: {
        ...currentUser.settings,
        notifications: areNotificationsEnabled,
      },
    }));
  }

  return (
    <section>
      <h2>Профіль користувача</h2>

      <label>
        Ім’я:
        <input
          type="text"
          value={user.name}
          onChange={handleNameChange}
        />
      </label>

      <br />

      <label>
        Тема:
        <select value={user.settings.theme} onChange={handleThemeChange}>
          <option value="light">Світла</option>
          <option value="dark">Темна</option>
        </select>
      </label>

      <br />

      <label>
        <input
          type="checkbox"
          checked={user.settings.notifications}
          onChange={handleNotificationsChange}
        />
        Отримувати сповіщення
      </label>

      <pre>{JSON.stringify(user, null, 2)}</pre>
    </section>
  );
}

setUser((currentUser) => ({
  ...currentUser,
  name: "Марія",
}));

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
  },
}));

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
    notifications: false,
  },
}));

import { useState } from "react";

export default function SettingsForm() {
  const [settings, setSettings] = useState({
    theme: "light",
    language: "uk",
    notifications: true,
  });

  function handleSettingChange(event) {
    const { name, value, type, checked } = event.target;
    const nextValue = type === "checkbox" ? checked : value;

    setSettings((currentSettings) => ({
      ...currentSettings,
      [name]: nextValue,
    }));
  }

  return (
    <form>
      <label>
        Тема:
        <select
          name="theme"
          value={settings.theme}
          onChange={handleSettingChange}
        >
          <option value="light">Світла</option>
          <option value="dark">Темна</option>
        </select>
      </label>

      <br />

      <label>
        Мова:
        <select
          name="language"
          value={settings.language}
          onChange={handleSettingChange}
        >
          <option value="uk">Українська</option>
          <option value="en">English</option>
        </select>
      </label>

      <br />

      <label>
        <input
          name="notifications"
          type="checkbox"
          checked={settings.notifications}
          onChange={handleSettingChange}
        />
        Отримувати сповіщення
      </label>

      <pre>{JSON.stringify(settings, null, 2)}</pre>
    </form>
  );
}

[name]: nextValue

{
  theme: nextValue
}

const [account, setAccount] = useState({
  profile: {
    contact: {
      email: "olena@example.com",
    },
  },
});

setAccount((currentAccount) => ({
  ...currentAccount,
  profile: {
    ...currentAccount.profile,
    contact: {
      ...currentAccount.profile.contact,
      email: "new@example.com",
    },
  },
}));

setUser((currentUser) => ({
  ...currentUser,
  name: "Андрій",
}));

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
  },
}));

user.settings.theme = "dark";

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
  },
}));

setUser((currentUser) => {
  const nextUser = { ...currentUser };

  nextUser.settings.theme = "dark";

  return nextUser;
});

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
  },
}));

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    theme: "dark",
  },
}));

setUser((currentUser) => ({
  ...currentUser,
  settings: {
    ...currentUser.settings,
    theme: "dark",
  },
}));

setUser({
  ...user,
  name: "Олена",
});

setUser((currentUser) => ({
  ...currentUser,
  name: "Олена",
}));

setState((currentState) => ({
  ...currentState,
  nestedObject: {
    ...currentState.nestedObject,
    property: newValue,
  },
}));

setState((currentState) => ({
  ...currentState,
  firstLevel: {
    ...currentState.firstLevel,
    secondLevel: {
      ...currentState.firstLevel.secondLevel,
      property: newValue,
    },
  },
}));