Что будет в React 18?

const fetchPostHistory = id => fetch(`/users/${id}/posts`);
 
const UserCard = ({Id, Name}) => {
 
    const [postHistory] = useState(() => fetchPostHistory(Id));
 
    <div>
        <h1>{Name}</h1>
        <React.Suspense fallback="Loading...">
            <UserPostHistoryList posts={postHistory} />
            <ReportUserLink id={Id} />
        </React.Suspense>
    </div>
};

В этом примере ни компоненты UserPostHistory, ни ReportUserLink не появятся, пока данные истории сообщений пользователя не будут получены из сети. Это уже хорошо работает во многих ситуациях, но реализация React 17 имеет некоторые особенности.

Если вы зарегистрируете эффекты каждого компонента, вы увидите, что компонент ReportUserLink отрисовывался во время загрузки сообщений, даже если в этот момент он не виден. Используя объяснение параллелизма из более раннего, можно объяснить, почему: как только React начал рендеринг дерева компонентов, у него не было возможности остановиться, даже если человек может заметить, что ReportUserLink является избыточным, пока postHistory заполняется.

Приостановка более мощная в React 18. Новая версия называется «Конкурентная приостановка»; предыдущая реализация теперь называется Legacy Suspense. Это решает проблему в приведенном выше примере: рендеринг одного и того же кода с включенным параллелизмом не позволит средству рендеринга достичь , пока идет выборка данных.

Регистрация эффектов каждого компонента покажет, что ReportUserLink фиксируется только после того, как доступна история сообщений. React прерывает рендеринг, когда достигает UserPostHistoryList, и ему нужно дождаться загрузки данных. После завершения сетевого вызова React возобновляет рендеринг остальной части поддерева Suspense.

Эта возможность помогает избежать расточительной работы, от которой ваши пользователи никогда не получат выгоды. Это также решает несколько проблем с приостановкой, когда компоненты могут иметь эффекты запуска раньше, чем вы ожидали. Наконец, это решение обеспечивает автоматическую гарантию поступления данных в том порядке, в котором они были запрошены. Вам не нужно беспокоиться об условиях гонки, поскольку рендеринг прерывается во время выборки данных.

Переходы

Переходы — это новая функция с поддержкой одновременного выполнения. Этот API — способ сообщить React об относительных приоритетах обновлений пользовательского интерфейса. «Переход» — это относительно низкоприоритетное обновление, такое как переключение между основными экранами. Обновления, такие как повторная визуализация в ответ на ввод с клавиатуры и другие взаимодействия с пользователем, считаются более срочными.

Пометка обновления как перехода имеет несколько эффектов на то, как React подходит к его выполнению. React будет использовать возможности прерывания рендеринга параллелизма, чтобы приостановить обновление, если в середине появится более срочное обновление. Это поможет вашему пользовательскому интерфейсу реагировать на пользовательский ввод во время рендеринга, уменьшая заикание и рывки.

Переходы полезны в самых разных ситуациях: обновление панели уведомлений в заголовке вашего приложения, управление обновлениями боковой панели и изменение других вспомогательных функций вашего пользовательского интерфейса — все это хорошие кандидаты. Они также хорошо работают для асинхронных действий, предпринимаемых в ответ на вводимые пользователем данные, например, в классическом случае с панелью поиска, которая обновляется по мере того, как пользователь вводит текст.

Это может быть трудно сделать правильно в React — без тщательного устранения дребезга часто ощущается заметное отставание, поскольку обновления, вызванные получением новых результатов, временно блокируют основной поток от обработки ввода с клавиатуры. В React 18 вы можете использовать переход, чтобы пометить эти обновления как низкоприоритетные.

API startTransition() инкапсулирует обновления состояния в виде переходов:

import {startTransition} from "react";
 
const Component = () => {
 
    const [searchQuery, setSearchQuery] = useState("");
    const [searchResults, setSearchResults] = useState({});
 
    /**
     * State updates within the transition function are low-priority
     */
    startTransition(() => {
        setSearchResults({text: "Search Result 1"});
    });
 
};

import {useTransition} from "react";
 
const Component = () => {
 
    const [searchQuery, setSearchQuery] = useState("");
    const [searchResults, setSearchResults] = useState({});
 
    const [isSearching, startSearchResultsTransition] = useTransition();
 
    startSearchResultsTransition(() => {
        setSearchResults({text: "Search Result 1"});
    });
 
    return (
        <div>
            <input onChange={setSearchQuery} value={searchQuery} />
            <SearchResults results={searchResults} />
            {(isSearching && "(Searching...)")}
        </div>
    );
 
};

const Component = () => {
    const [results, setResults] = useState([]);
    const deferredResults = useDeferredResults(results, {timeoutMs: 5000});
    return <ResultsGrid results={deferredResults} />;
};

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryCount, setQueryCount] = useState("");
 
    /**
     * Two state updates, only one re-render
     */
    setQuery("demo");
    setQueryCount(queryCount + 1);
 
};

const Component = () => {
 
    const [query, setQuery] = useState("");
    const [queryCount, setQueryCount] = useState("");
 
    const handleSearch = query => {
       fetch(query).then(() => {
 
            /**
             * Force commit and update the DOM
             */
            flushSync(() => setQuery(query));
 
            setQueryCount(1);
 
        });
    }
 
};

// OLD
import {hydrate} from "react-dom";
hydrate(<App />, document.getElementById("root"));
 
// NEW
import {hydrateRoot} from "react-dom/client";
hydrateRoot(document.getElementById("root"), <App />);