<div style="position: relative; z-index: 1;">
    <div style="position: absolute; z-index: 2;">Перекрывает</div>
    <div style="position: absolute; z-index: 1;">Перекрываемый</div>
</div>

<div style="position: relative">
    <div style="position: absolute; z-index: -1">Содержимое фона</div>
    Основное содержимое блока
</div>

<style>
    #content-1 { color: red; height: 18px }
    #new-context { margin-top: -12px }
    #content-2 { color: blue; height: 18px }
    #content-3 { color: green; margin-top: -12px } 
</style>

<div id="main" style="position: relative; z-index: 1;">
    <div id="content-1" style="position: relative; z-index: 10;">#content-1</div>
    <div id="new-context" style="opacity: 0.7;">
        <div id="content-2" style="position: relative; z-index: 200;">#content-2</div>
        <div id="content-3" style="position: relative; z-index: 100;">#content-3</div>
    </div>
</div>

"dependencies": {
  "express": "^4.17.1",
  "mongoose": "^5.9.10"
}

"devDependencies": {
  "eslint": "^7.2.0",
  "jest": "^26.0.1"
}

"peerDependencies": {
  "react": "18.x"
}

export function FormUseActionState() {
  const [result, formAction] = useActionState(submitForm, null);

  return (
    <form action={formAction}>
      <h2>Form With useActionState</h2>
      <input name="title" />

      <button type="submit">Save!</button>
    </form>
  );
}

'use server';

export const submitForm = (prevState: string | null, form: FormData) => {
  return form.get('title')?.toString() || '';
};

const [result, formAction, isPending] = useActionState(submitForm, null);

const { pending } = useFormStatus();

const [optimisticResult, setOptimisticResult] = useState(store);

... = useActionState(async (__: string | null, formData: FormData) => {
    setOptimisticResult((prevState) => ({
      title: formData.get('title')?.toString() || prevState.title,
      description: formData.get('description')?.toString() || prevState.description,
    }));

    await saveData(formData);

    return 'ok';
  }, null);

const [optimisticResult, setOptimisticResult] = useOptimistic(store);

  ... = useActionState(async (__: string | null, formData: FormData) => {
    setOptimisticResult((prevState) => ({
      title: formData.get('title')?.toString() || prevState.title,
      description: formData.get('description')?.toString() || prevState.description,
    }));

    await saveData(formData);

    return 'ok';
  }, null);

const [optimisticResult, setOptimisticResult] = useOptimistic(store);

  ... = useActionState(async (__: string | null, formData: FormData) => {
    setOptimisticResult((prevState) => ({
      title: formData.get('title')?.toString() || prevState.title,
      description: formData.get('description')?.toString() || prevState.description,
    }));

    try {
      await saveData(formData);
    } catch (e) {
      return 'not ok';
    }

    return 'ok';
  }, null);

const [optimisticResult, setOptimisticResult] = useOptimistic(store);

console.group("Группа");
  console.log("Внутри группы");
  console.group("Подгруппа");
    console.log("Внутри подгруппы");
  console.groupEnd();
console.groupEnd();

console.assert(1 === 2, "Неправильно!");  // Выведет "Неправильно!", если утверждение ложное

console.count("Метка"); // Выведет "Метка: 1"
console.count("Метка"); // Выведет "Метка: 2"

console.time("Таймер"); // Задаём таймеру метку
for(let i = 0; i < 1000000; i++) {}  // Некий код, который занимает время
console.timeEnd("Таймер"); // Выведет время, затраченное на выполнение цикла