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: https://twitter.com/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