1 00:00:02,120 --> 00:00:03,963 Now let's talk about simplifications 2 00:00:03,963 --> 00:00:06,310 and what else we could do. 3 00:00:06,310 --> 00:00:10,320 Now you could definitely try to outsource more Logic. 4 00:00:10,320 --> 00:00:13,860 You could try to build individual input components 5 00:00:13,860 --> 00:00:16,900 which contained some validation logic or whatever. 6 00:00:16,900 --> 00:00:19,440 You could build an overall form component 7 00:00:19,440 --> 00:00:21,280 which handles a lot of that. 8 00:00:21,280 --> 00:00:23,980 You could build more custom hooks, 9 00:00:23,980 --> 00:00:28,000 which for example, return entirely pre-configured inputs 10 00:00:28,000 --> 00:00:29,140 or forms. 11 00:00:29,140 --> 00:00:31,570 And attached you'll find an article on that 12 00:00:31,570 --> 00:00:34,250 which might also be interesting to you 13 00:00:34,250 --> 00:00:37,450 where we also build a complete use form hook 14 00:00:37,450 --> 00:00:39,940 which even spits out readily configured 15 00:00:39,940 --> 00:00:42,933 input elements which you can use in JSX. 16 00:00:43,930 --> 00:00:46,610 I want to focus on the basics here, though, 17 00:00:46,610 --> 00:00:48,707 and that is already a long module. 18 00:00:48,707 --> 00:00:51,110 For me, it mattered to explain 19 00:00:51,110 --> 00:00:53,860 how we can use what we learned about React 20 00:00:53,860 --> 00:00:56,290 to build great user experiences 21 00:00:56,290 --> 00:00:59,490 and to build forms and form behaviors 22 00:00:59,490 --> 00:01:01,250 that make sense to our users. 23 00:01:01,250 --> 00:01:03,490 That feel good to our users. 24 00:01:03,490 --> 00:01:06,510 And at the same time, I, of course, also wanted to show you 25 00:01:06,510 --> 00:01:09,920 that this can lead to a lot of unnecessary code 26 00:01:09,920 --> 00:01:11,800 and therefore building something like this 27 00:01:11,800 --> 00:01:16,070 custom use input hook can reduce code duplication 28 00:01:16,070 --> 00:01:18,555 and allows us to reuse Logic 29 00:01:18,555 --> 00:01:20,140 even though we now, of course, 30 00:01:20,140 --> 00:01:23,460 still have some replicated code, 31 00:01:23,460 --> 00:01:26,320 but it is distinct enough, I would argue. 32 00:01:26,320 --> 00:01:29,150 Nonetheless, you can dive into building more 33 00:01:29,150 --> 00:01:30,630 elaborate custom hooks 34 00:01:30,630 --> 00:01:33,653 and this attached article might be interesting for that. 35 00:01:34,720 --> 00:01:38,081 In addition, there also are third-party libraries 36 00:01:38,081 --> 00:01:40,220 that could be interesting to you. 37 00:01:40,220 --> 00:01:41,883 For example, Formik. 38 00:01:42,900 --> 00:01:45,622 Formik is a very popular third-party library 39 00:01:45,622 --> 00:01:47,620 for working with forms 40 00:01:47,620 --> 00:01:49,690 and you can dive into the official docs 41 00:01:49,690 --> 00:01:51,750 to learn more about it. 42 00:01:51,750 --> 00:01:54,530 It's not really using hooks that much, 43 00:01:54,530 --> 00:01:57,330 it's more using components 44 00:01:57,330 --> 00:02:01,950 and patterns we know from older versions of React, 45 00:02:01,950 --> 00:02:02,850 so to say. 46 00:02:02,850 --> 00:02:05,590 But nonetheless, it's a great library 47 00:02:05,590 --> 00:02:07,480 when it comes to rendering forms 48 00:02:07,480 --> 00:02:10,513 and dealing with more complex forms and validation. 49 00:02:11,360 --> 00:02:13,350 Again, you can explore the official docs 50 00:02:13,350 --> 00:02:14,810 to learn how it works. 51 00:02:14,810 --> 00:02:17,379 The core idea is that you don't have to write much 52 00:02:17,379 --> 00:02:19,520 state management logic 53 00:02:19,520 --> 00:02:22,640 but that instead you write your validation logic, 54 00:02:22,640 --> 00:02:24,320 you define your fields, 55 00:02:24,320 --> 00:02:26,690 and then let Formik do the rest. 56 00:02:26,690 --> 00:02:30,330 A little bit as we did it with our custom-use input hook. 57 00:02:30,330 --> 00:02:34,980 There we also focused on passing in the validation logic 58 00:02:34,980 --> 00:02:38,240 and the hook then manages the state for us. 59 00:02:38,240 --> 00:02:41,160 Formik then just has more use cases 60 00:02:41,160 --> 00:02:43,280 and outsources even more Logic, 61 00:02:43,280 --> 00:02:47,340 or allows us to outsource even more Logic to it. 62 00:02:47,340 --> 00:02:49,990 So that might definitely be worth a look. 63 00:02:49,990 --> 00:02:51,630 Now for this course though, 64 00:02:51,630 --> 00:02:54,190 I'm happy with this approach. 65 00:02:54,190 --> 00:02:56,010 You again got more practice 66 00:02:56,010 --> 00:02:58,180 with working with custom hooks, 67 00:02:58,180 --> 00:03:01,670 and you really see what's going on behind the scenes. 68 00:03:01,670 --> 00:03:04,290 Now you are definitely well prepared 69 00:03:04,290 --> 00:03:06,070 to handle the forms and user input 70 00:03:06,070 --> 00:03:08,420 in your next project, and of course 71 00:03:08,420 --> 00:03:11,564 we are also going to work a bit more with forms 72 00:03:11,564 --> 00:03:13,569 in the course projects you'll find 73 00:03:13,569 --> 00:03:15,313 in the rest of this course.