The react-router v7 Data Hook Secrets You Need to Know!

Описание: Today we go over most of the data fetching/submitting hooks in Remix like useFetcher, useSubmit, Form, useNavigation, useFetchers and more. I show you how to implement optimistic UI, pending state and tRPC-like fetchers in Remix

👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together.

📌 Stay Connected:
Twitter:   / alemtuzlak  
GitHub: https://github.com/AlemTuzlak
Company Github: https://github.com/forge-42

⏱️ Timestamps:
00:00 - Intro
00:18 - Understanding form submissions
01:42 - GET requests
02:02 - POST requests
02:35 - Why formData over json
03:04 - useSubmit under the hood
03:39 - useFetcher under the hood
03:52 - browser history stack explained
04:58 - useFetcher behavior with history stack
05:18 - form submission behavior without useFetcher
06:16 - going over useNavigation & useSubmit hooks
06:56 - going over useFetcher
07:14 - similarities between useSubmit & useFetcher
07:38 - when I use each
08:37 - fetcher keys
10:10 - Form vs fetcher.Form
11:11 - fetcher.submit vs submit from useSubmit
11:40 - fetcher.load
12:09 - other fetcher properties
13:04 - useNavigation hook
13:35 - useFetchers hook
14:17 - practical part
14:24 - optimistic UI setup
16:34 - implementing optimistic UI
16:55 - explaining how it works
17:31 - pending state
18:28 - Form behavior example
19:00 - when to use which approach
19:26 - browser history stack explanation
20:02 - using fetcher keys in action
23:06 - the part where you think it's the outro but it's not
23:10 - creating tRPC-like fetchers
25:32 - the real outro

🔖 Tags:
Remix framework, Vite, Remix Vite, web development, frontend development, Remix tutorial, coding tutorial, Remix Vite tutorial, open source, coding community, remix framework tutorial