Самый безобидный вариант, который я смог найти работы с promise 🥪Есть
контекст, который шарит
promise:
export const TodoListProvider = ({ children }) => {
const [promise, setPromise] = useState(() => fetchTodos());
const value = useMemo(() => ({ promise, set: setPromise }), [promise])
return (
<TodoListContext value={value}>
{children}
</TodoListContext>
)
}
Есть хук обертка:
export const useSuspendedTodoList = () => {
const todoListContext = use(TodoListContext);
const todoList = use(todoListContext.promise);
return todoList
}
Есть компонент, который это использует
import { useSuspendedTodoList } from "@/utils/contexts"
export const TodoPanel = () => {
const todoList = useSuspendedTodoList()
return <div>{todoList.length}</div>
}
В рут файле это выглядит вот так:
export const App = () => (
<TodoListProvider>
<Suspense fallback={<div>Loading panel...</div>}>
<TodoPanel />
</Suspense>
</TodoListProvider>
);
Ну и где вы, хейтеры контекста ✈️ ? А если без шуток, это адекватный вариант на сегодня, как хотя бы можно переиспользовать
promise, но проблема в том, а что дальше ? Я вижу
suspense, как
initial pending для компонента, я не хочу больше его вызывать. Я могу в панель даже добавить новый хук
useActionState для формы, но а потом самое интересное, мне надо будет рефечнуть данные, есть тоже просто прекрасный
костыль лайфхак, мы еще можем добавить
startTransition и это будет работать
😉Дополним хук:
export const useSuspendedTodoList = () => {
const todoListContext = use(TodoListContext);
const todoList = use(todoListContext.promise);
return [todoList, () => todoListContext.set(fetchTodos())]
}
И теперь допишем компонент:
export const TodoPanel = () => {
const [todoList, refetch] = useSuspendedTodoList()
const [isPending, startTransition] = useTransition()
const onRefetchClick = () => {
startTransition(() => {
refetch()
})
}
return <div>
{isPending && <div>Loading...</div>}
{todoList.length}
<button onClick={onRefetchClick}>refetch</button>
</div>
}
Раз все работает, что же ты ноешь ? Вопрос максимально правильный, тут два варианта или я дед, который отказывается принимать новое, или же команда
react просто пихнула куча фич для
next, которые люди придумали, как минимально адаптировать их под
csr.
Как итог, я лично не могу понять выгоду использовать сейчас данное апи совсем, надеюсь они докрутят его. Это мы еще не затронули тему
глобал кеша и
ревалидации или чего пострашнее
👻