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("Таймер"); // Выведет время, затраченное на выполнение цикла

import { useState } from 'react';

function Button({ title }) {
  console.log('[Button] Render');
  return <button type="button">{title}</button>;
}

function Form() {
  const [name, setName] = useState('');
  const handleChangeName = (event) => setName(event.target.value);

  console.log('[Form] Render');

  return (
    <form>
      <input name="firstName" value={name} onChange={handleChangeName} />
      <Button title="Ok" />
    </form>
  );
}

const express = require('express');
const expressWs = require('express-ws');

const app = express();
const wsApp = expressWs(app);

const allMessages = [];

// Открываем урл для соединений
app.ws('/chat', (ws, _) => {

    // Подписываемся на сообщения от клиентов
    ws.on('message', (message) => {

        // Сохраняем сообщение в виде исходного объекта
        allMessages.push(JSON.parse(message));

        // Рассылаем сообщение всем остальным подключенным клиентам
        wsApp.getWss().clients.forEach((client) => {
            client.send(message.toString());
        });
    });
});

const ws = new WebSocket('ws://localhost:8000/chat');

// Подписываемся на сообщения от сервера
ws.onmessage = (event) => {
    const message = JSON.parse(event.data);
};

// Отправляем новое сообщение на сервер
const sendMessage = (message) => {
   ws.send(JSON.stringify(message));
}

export async function List() {
  const data = (await fetch('https://dummyjson.com/products/search?limit=10').then((res) => res.json()));
  console.log('[List] Server Component Render');

  return (
    <ul>
      {data.products.map((product) => (
          <li key={product.id}>
            {product.id}: <b>{product.title}</b>
          </li>
       ))}
    </ul>
  );
}

type ComponentType = 'list' | 'searchedList';

export function Switcher({ ListComponent, SearchedListComponent }: Props) {
  const [type, setType] = useState<ComponentType>('list');

  const handleClick = (newType: ComponentType) => () => setType(newType);

  return (
    <section>
      <div>
        <button onClick={handleClick('list')}>List</button>
        <button onClick={handleClick('searchedList')}>Searched List</button>
      </div>
      {type === 'list' ? ListComponent : SearchedListComponent}
    </section>
  );
}

<Switcher
  // серверный компонент
  ListComponent={<List />}
  // клиентский компонент
  SearchedListComponent={<SearchedList />}
/>

5:I["(app-pages-browser)/./node_modules/next/dist/client/link.js",...
6:I["(app-pages-browser)/...
7:I["(app-pages-browser)/...
2:{"name":"","env":"Server","owner":null}
1:D"$2"
4:{"name":"About","env":"Server","owner":null}
3:D"$4"
3:["$","div",null,{"className":"page_page__bHvK0","children":...
...

'use client';
import { useState } from 'react';
import { search } from './searchAction';

export function SearchedList({ fetchInitialData }: Props) {
  const [searchText, setSearchText] = useState('');
  const [data, setData] = useState<SearchResponce | null>(null);

  const handleChangeSearch = (event) => setSearchText(event.target.value);

  const handleClick = async () => {
    const result = await search(searchText);
    setData(result);
  };

  return (
    <section>

      <div>
        <input name="search" onChange={handleChangeSearch} value={searchText} />
        <button type="submit" onClick={handleClick}>Search</button>
      </div>
      {data && (
        <ul>
          {data.products.map((product) => (
            ...
         ))}
        </ul>
      )}
    </section>
  );
}

'use server';

export const search = async (query: string) => {
  console.log('[SearchedList] Server Action');
  const data = (await fetch(`https://dummyjson.com/products/search?limit=10&q=${query}`).then((res) => res.json()));
  return data;
};

0:["$@1",["development",null]]
1:{"products":[{"id":101,"title":"Apple AirPods Max Silver","description":"The...

import { search } from './searchAction';

export function SearchedList() {
  const fetchInitialData = search('');

  return (
    <Suspense fallback="Loading...">
      <SearchedListBase fetchInitialData={fetchInitialData} />
    </Suspense>
  );
}

type Props = {
  fetchInitialData: Promise<SearchResponce>;
};

export function SearchedList({ fetchInitialData }: Props) {
  const initialData = use(fetchInitialData);
  const [data, setData] = useState<SearchResponce>(initialData);
  ...
}