If I was starting to learn React (forms) today, this what I would use

I've been working with React for more than 7 years. And never have I felt writing code for small to medium scale apps this cleaner. Yes! We're talking about no more useState or useEffect hooks for smaller forms. No more manually calling the API to get the data again. But an easier, and simple flow that involves using the React Router capabilities. In this video, we're going to learn how to use React router's loader functions, Form component, and route action functions to replace useState and useEffect hooks effectively. This results in lesser imperative code, more flexibility, and simpler usage of forms. Please note that this approach does come with a cost of more API (backend) calls, however, since they're only going to be on user actions (on writes to the database in the end, instead of the read operations which are more frequent), it is still a very optimized approach. However, this is, just like all software engineering patters, by no means a "universal solution for all". Enterprise apps may not want to have that to enable customized error displays, complex business logic, and what not.
Btw, since you've already read this all, consider subscribing the channel :)

GitHub code repository (switch to the `start-forms` branch to follow along):
https://github.com/code-with-ahsan/pr...

Timestamps:
00:00 - Introduction
00:50 - Showing off the app
01:21 - Showing off the frontend and backend code
03:33 - Showing Loading Glitch
04:18 - Explanation of the Route Actions approach
06:18 - Running the app and the backend
07:12 - Creating the Contacts List Loader function
11:03 - Creating the Contact Details Loader function
13:48 - Intro to Route Actions
14:38 - Implementing Create Contact Route Action with Form component
21:17 - Implementing Delete Contact Route Action
29:55 - Handing URL with non-existent contact
32:05 - Outro

⭐ Link to the Practical React Essentials (Urdu/Hindi) course:
https://codewithahsan.dev/pre

💖 Become a supporter :
https://buymeacoffee.com/codewithahsan

🤝 Join the CodewithAhsan community:
https://codewithahsan.dev/discord

📰 Sign up for updates about the course:
https://codewithahsan.dev

🤯 Already an experienced dev? Watch my '4 full stack projects' video:
   • 4 JavaScript projects to get hired as...  

You can also find me on:
Twitter:   / codewith_ahsan  
GitHub: https://github.com/ahsanayaz
Facebook:   / codewithahsan  

Hashtags:
#react #reactrouter #reactutorial #reactroutertutorial #reactbeginners #reactpractice #reactjs #nextjs #webdev #webdevelopment #webdeveloper #reactrouterloader #reactrouteraction