🧊 siberia can code - это канал для frontend разработчиков. Здесь вы найдете самые новые и популярные технологии в сфере frontend разработки. Если вам интересно быть в курсе последних трендов и узнавать об инновационных подходах к веб-разработке, то этот канал идеально подойдет вам. Вы сможете узнать о новейших инструментах, библиотеках, и подходах к созданию интерактивных и удобных пользовательских интерфейсов. Подписывайтесь на наш канал и не упустите возможность быть в центре событий. Дополнительную информацию и полезные материалы вы можете найти по следующим ссылкам: https://boosty.to/siberiacancode, https://www.youtube.com/@siberiacancode, https://www.twitch.tv/siberiacancode, https://github.com/siberiacancode.
24 Jan, 15:01
24 Jan, 04:48
23 Jan, 05:52
22 Jan, 08:30
22 Jan, 07:02
18 Jan, 17:52
18 Jan, 13:33
18 Jan, 09:02
17 Jan, 12:43
16 Jan, 09:02
14 Jan, 12:34
12 Jan, 14:50
12 Jan, 14:35
12 Jan, 06:39
11 Jan, 13:23
08 Jan, 10:48
08 Jan, 10:46
05 Jan, 08:05
04 Jan, 13:27
04 Jan, 04:53
04 Jan, 04:46
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>
);
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>
}04 Jan, 04:06
const usersPromise = fetchUsers();
export const Users({ children }}) {
const users = use(usersPromise);
const globalUsersPromise = fetchUsers();
export const Users() {
const [usersPromise, setUsersPromise] = useState(globalUsersPromise);
03 Jan, 10:29
03 Jan, 10:00
03 Jan, 09:52
02 Jan, 09:34
31 Dec, 17:09
31 Dec, 16:01
30 Dec, 12:59
30 Dec, 12:59
29 Dec, 07:13
28 Dec, 11:54
28 Dec, 07:27
28 Dec, 05:00
26 Dec, 11:43
26 Dec, 11:35
26 Dec, 04:17
25 Dec, 08:00
25 Dec, 03:52
24 Dec, 07:29
24 Dec, 07:24
22 Dec, 10:00
22 Dec, 08:44
21 Dec, 06:49
20 Dec, 20:53
20 Dec, 17:47
20 Dec, 15:30
20 Dec, 13:14
20 Dec, 12:18
20 Dec, 12:15
20 Dec, 12:00
20 Dec, 08:08
20 Dec, 08:06
20 Dec, 05:12
19 Dec, 06:55
19 Dec, 06:25
06 Dec, 16:46
06 Dec, 07:03
06 Dec, 03:06
04 Dec, 03:14
03 Dec, 11:04
02 Dec, 05:50
02 Dec, 04:19
01 Dec, 11:15
01 Dec, 08:16
30 Nov, 08:00
29 Nov, 03:43
28 Nov, 16:05
28 Nov, 07:05
27 Nov, 16:08
26 Nov, 17:17
26 Nov, 09:49
23 Nov, 20:50
23 Nov, 16:36
23 Nov, 16:21
23 Nov, 10:15
23 Nov, 06:37
22 Nov, 03:50
20 Nov, 08:28
18 Nov, 16:49
18 Nov, 16:14
18 Nov, 09:13
17 Nov, 06:51
16 Nov, 07:27
15 Nov, 18:04
15 Nov, 18:01
15 Nov, 14:07
14 Nov, 14:02
14 Nov, 07:53
14 Nov, 05:22
14 Nov, 05:19
13 Nov, 07:40
13 Nov, 00:37
12 Nov, 05:27
12 Nov, 03:58
08 Nov, 08:01
08 Nov, 06:38
03 Nov, 10:06
02 Nov, 16:00
02 Nov, 04:19
01 Nov, 09:54
31 Oct, 07:42
31 Oct, 07:15
31 Oct, 07:03
29 Oct, 04:46
19 Oct, 14:22
18 Oct, 05:48
18 Oct, 05:46
14 Oct, 03:56
10 Oct, 05:57
08 Oct, 04:09
07 Oct, 09:06
06 Oct, 05:26
04 Oct, 07:33
04 Oct, 05:29
02 Oct, 07:11
01 Oct, 18:51
01 Oct, 05:08
30 Sep, 02:36
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
![Max для своих [Hustle in silence] Telegram Channel](/avatar/1869/1869258776.jpg)
