WEBVTT 1 00:00:06.639 --> 00:00:09.320 Welcome to React round Up. I'm your host for today, 2 00:00:09.400 --> 00:00:13.560 Jack Harrington, and with me is the incomparable TJ. Van Toll. Hey, 3 00:00:13.720 --> 00:00:17.000 hey everybody, and our guest for today is veget i E. 4 00:00:17.600 --> 00:00:19.320 Can you tell us a little about your background and 5 00:00:19.519 --> 00:00:22.679 why you are of interest to the React round Up audience. 6 00:00:23.320 --> 00:00:26.640 So my name is Vigit and I'm a software engineer 7 00:00:26.679 --> 00:00:29.679 from Mumbai, India. I have been working with React and 8 00:00:29.719 --> 00:00:31.879 reacting with you for the past couple of years and 9 00:00:32.079 --> 00:00:35.159 recently I also started working with not js. When I'm 10 00:00:35.359 --> 00:00:37.920 not at work, you will find me writing guides and 11 00:00:38.039 --> 00:00:41.880 articles for Medium, log Rocket and my personal blog. 12 00:00:42.039 --> 00:00:43.719 So yeah, that is pretty much. 13 00:00:44.079 --> 00:00:48.679 That's awesome. So I know you recently wrote a blog 14 00:00:48.840 --> 00:00:51.759 post on React took form. It's a personal favorite of 15 00:00:51.799 --> 00:00:52.960 mine when you tell us a little bit rather it 16 00:00:53.240 --> 00:00:54.439 so yeah. 17 00:00:54.479 --> 00:00:59.200 So React hook form is basically a library that helps 18 00:00:59.240 --> 00:01:02.280 you handle and manage state of the font like in 19 00:01:02.280 --> 00:01:04.120 a very easy and clear way. 20 00:01:04.239 --> 00:01:07.280 Yeah, very cool. So does that can include things like validation? 21 00:01:07.879 --> 00:01:13.400 Yeah, it includes validation of state management like form data management, 22 00:01:13.599 --> 00:01:17.519 and it has like it has a great developer experience 23 00:01:17.799 --> 00:01:20.280 and one of the cool things I like about React 24 00:01:20.319 --> 00:01:24.920 took form is that it has isolated rerenders, so when 25 00:01:25.599 --> 00:01:28.400 a data in the form changes, so only that particular 26 00:01:28.439 --> 00:01:31.120 component or input changes and not the whole form. 27 00:01:31.200 --> 00:01:35.719 So that's a huge plus on the performance side. 28 00:01:35.840 --> 00:01:37.959 Yeah, and even to take a step back, I've always 29 00:01:37.959 --> 00:01:42.159 found it interesting how React really doesn't give you much. 30 00:01:42.719 --> 00:01:44.120 You could argue it doesn't really give you much of 31 00:01:44.159 --> 00:01:48.439 anything for handling forms, which I mean like there's two 32 00:01:48.879 --> 00:01:50.680 like anything else. Right, you can look at it like, oh, 33 00:01:50.719 --> 00:01:53.599 that's a positive because it enables this ecosystem of things, 34 00:01:53.799 --> 00:01:56.159 but it could also be construed as a negative because 35 00:01:56.159 --> 00:01:58.480 if you just went straight to the React documentation right 36 00:01:58.519 --> 00:02:01.079 and you looked for building a form, you probably woth 37 00:02:01.159 --> 00:02:03.719 walk away from that pretty disappointed because it's it's not 38 00:02:03.840 --> 00:02:07.560 really gonna do a whole ton for you. So I'm curious, 39 00:02:07.599 --> 00:02:10.240 like what forms are? What sort of forms are you building? 40 00:02:10.439 --> 00:02:13.719 Like what made you like drawn to React form? Maybe 41 00:02:13.719 --> 00:02:15.120 you could just lay out a little bit of like 42 00:02:15.400 --> 00:02:17.879 the form landscape of React, like what are there other 43 00:02:17.919 --> 00:02:22.159 options you explored other things? Because I think we could 44 00:02:22.879 --> 00:02:25.319 there's a lot we could potentially cover with this because 45 00:02:25.319 --> 00:02:26.199 there's a lot out there. 46 00:02:26.319 --> 00:02:29.960 Correct, So like when I was starting out. I started 47 00:02:29.960 --> 00:02:34.719 with reducs form I guess so like I didn't know 48 00:02:34.759 --> 00:02:37.439 that there was other options. So for me, reducts was 49 00:02:37.479 --> 00:02:40.159 a go to library when it came to state management. 50 00:02:40.560 --> 00:02:43.560 But as I explored more than I realized that, okay, 51 00:02:43.599 --> 00:02:46.599 so I don't need the whole state like the form 52 00:02:46.639 --> 00:02:50.599 state to be in the global states. So I decided that, okay, cool, 53 00:02:50.919 --> 00:02:53.759 so I need to look out for a new library. 54 00:02:53.960 --> 00:02:58.319 So then I looked up Formic. So Formic was a great, 55 00:02:58.680 --> 00:03:01.080 great library for me, like it worked like. I used 56 00:03:01.080 --> 00:03:04.319 to install that on pretty much every project that I 57 00:03:04.439 --> 00:03:08.520 worked on until I found React hook form that was 58 00:03:09.000 --> 00:03:11.719 even more like. I found it even more better in 59 00:03:11.800 --> 00:03:15.039 terms of performance and developer experience. Now, when I was 60 00:03:15.080 --> 00:03:18.400 working with form the thing was that I had to use, uh, 61 00:03:18.960 --> 00:03:22.800 the rapper for a Formic component higher ordered component. So 62 00:03:23.240 --> 00:03:25.639 I thought that, okay, maybe this could be this could 63 00:03:25.639 --> 00:03:29.360 be much better. And then I started looking around and 64 00:03:29.560 --> 00:03:33.560 I found this great library, React hook form that that 65 00:03:33.960 --> 00:03:36.080 just like that was very great one. 66 00:03:36.599 --> 00:03:38.439 And yeah, the only. 67 00:03:38.479 --> 00:03:40.680 Part of React hook form is that it does not 68 00:03:41.159 --> 00:03:43.879 work with class components out of the box, so you 69 00:03:43.960 --> 00:03:46.719 have to create a you know, a rapper or something 70 00:03:46.759 --> 00:03:46.960 like that. 71 00:03:47.199 --> 00:03:49.199 Are you using a lot of class components. 72 00:03:49.240 --> 00:03:53.039 Not really like currently, like the code base currently I'm 73 00:03:53.039 --> 00:03:57.039 working on it much has everything on function components. 74 00:03:58.240 --> 00:03:58.599 Issue. 75 00:03:58.680 --> 00:04:01.280 Yeah yeah, yeah, so can you tell folks who haven't 76 00:04:01.319 --> 00:04:03.479 actually tried out React to form, like, so, what are 77 00:04:03.520 --> 00:04:05.280 the basic mechanics of using this? 78 00:04:05.639 --> 00:04:09.159 So, like you can just use the use like it 79 00:04:09.199 --> 00:04:11.000 has use form hook. 80 00:04:11.439 --> 00:04:15.599 So the use form hook basically returns an object with 81 00:04:15.879 --> 00:04:22.120 the a registered function as set values function values object 82 00:04:22.959 --> 00:04:26.720 and the errors and ceter So these are the basic ones. 83 00:04:27.240 --> 00:04:30.560 And so if you want to you know, get data 84 00:04:30.600 --> 00:04:34.120 from an input you just passed the you just destructure 85 00:04:34.120 --> 00:04:37.480 the registered object on that input and it will just 86 00:04:37.720 --> 00:04:40.240 do its own magic. So that is like a very 87 00:04:40.240 --> 00:04:41.240 basic implementation. 88 00:04:41.680 --> 00:04:41.959 Nice. 89 00:04:42.199 --> 00:04:45.120 Right, you don't have any use a wrapper component or 90 00:04:45.160 --> 00:04:46.000 anything like that. 91 00:04:46.680 --> 00:04:49.439 Nice. And does it work with stuff like material, UI 92 00:04:49.600 --> 00:04:51.639 or components like that if you were using. 93 00:04:51.480 --> 00:04:55.439 Those, Yeah, it does work with material Like any third 94 00:04:55.480 --> 00:04:59.720 party component that has ref that exposes the ref, you 95 00:04:59.759 --> 00:05:02.639 can pretty much use React hook form with it. But 96 00:05:02.879 --> 00:05:06.800 in some cases we don't usually get the option to 97 00:05:07.079 --> 00:05:11.600 use ref. So you can use the controller component or 98 00:05:11.639 --> 00:05:15.639 the use controller hook of React hook phone. Yeah, and 99 00:05:15.759 --> 00:05:17.600 that will do the trick for you. 100 00:05:18.040 --> 00:05:20.279 So I remember from the documentation there were some really 101 00:05:20.319 --> 00:05:23.800 good examples of all of the systems working together, so 102 00:05:24.120 --> 00:05:25.560 it's very well documented that way. 103 00:05:25.800 --> 00:05:29.959 Yeah, the documentation is really nice, and they have like 104 00:05:30.040 --> 00:05:35.079 they have the API difference of every every component, every 105 00:05:35.120 --> 00:05:39.040 hook that they have, and it's very very well explained 106 00:05:39.079 --> 00:05:42.480 and detailed there. So like your single source of truth 107 00:05:42.519 --> 00:05:43.600 would be the documentation. 108 00:05:44.519 --> 00:05:44.800 Nice. 109 00:05:44.920 --> 00:05:47.920 And I'm really interested in the performance aspect of this 110 00:05:48.000 --> 00:05:50.439 because I've just been kind of producing the react took 111 00:05:50.560 --> 00:05:53.720 forms because in my head, like the two big players 112 00:05:53.759 --> 00:05:57.439 in the react form world are formic in React took form, 113 00:05:57.519 --> 00:05:59.360 or at least those are the two that seem to 114 00:05:59.360 --> 00:06:01.600 come up to them in it. It sounds like which 115 00:06:01.639 --> 00:06:04.720 you said, like performance was the main sort of differentiating 116 00:06:05.240 --> 00:06:08.879 feature for you. So I'm curious, like, did you what 117 00:06:08.959 --> 00:06:12.439 were using to like benchmarker determine those performance problems? Were 118 00:06:12.480 --> 00:06:14.959 you using like benchmarks numbers or was it bad enough 119 00:06:14.959 --> 00:06:19.120 that like it was even like visibly noticeable in your applications. 120 00:06:19.480 --> 00:06:21.360 Yeah, So I'll tell your story. 121 00:06:21.439 --> 00:06:25.480 So I got this you know form which had over 122 00:06:25.519 --> 00:06:29.399 twenty twenty four twenty five inputs, so and there was 123 00:06:29.439 --> 00:06:31.879 no library being used there, so it was just a 124 00:06:32.480 --> 00:06:35.160 I think it was a custom book with the US 125 00:06:35.800 --> 00:06:38.839 reducer or used it, I think. And what was happening 126 00:06:38.920 --> 00:06:42.519 is every time you know, press the keyboard on any input, 127 00:06:43.240 --> 00:06:47.120 so the whole form rendered, and the form was quite heavy, 128 00:06:47.399 --> 00:06:50.839 like it had twenty five inputs in there, and every 129 00:06:50.839 --> 00:06:53.879 time you pressed a key the whole form would lag. 130 00:06:54.040 --> 00:06:57.199 You would visibly see it. So it was the worst. 131 00:06:57.279 --> 00:07:00.800 So then I had to take a call, so like 132 00:07:01.199 --> 00:07:05.560 I migrated from that custom hook to the React hook form. 133 00:07:05.759 --> 00:07:09.399 Nice. So for folks who are in your like doing 134 00:07:09.399 --> 00:07:12.279 the kind of stuff that you did with reducs and 135 00:07:12.399 --> 00:07:16.959 forums managed in reducts, does using something like reactric form 136 00:07:17.160 --> 00:07:19.879 preclude using reducts? Can you use the two together? 137 00:07:20.240 --> 00:07:20.439 Yeah? 138 00:07:20.480 --> 00:07:23.680 Yeah, you can definitely use them together. And you know, 139 00:07:24.000 --> 00:07:26.680 they both have different functions. So for example, if you think, 140 00:07:27.000 --> 00:07:29.279 if my like, the real question is do you want 141 00:07:29.279 --> 00:07:31.759 your form state to be global or not? If you like, 142 00:07:31.879 --> 00:07:33.920 if you want it to be global, you can go 143 00:07:34.000 --> 00:07:37.439 with reducts form not a problem. But but in most 144 00:07:37.480 --> 00:07:41.000 cases the I think the form states should be local, 145 00:07:41.120 --> 00:07:43.160 like should be local to that particular component. 146 00:07:43.439 --> 00:07:46.360 And so React hook form just does a job for you. 147 00:07:46.720 --> 00:07:50.000 So you use reactric form then to manage the local form, 148 00:07:50.040 --> 00:07:53.519 and then once it's done or saved or canceled, then 149 00:07:53.519 --> 00:07:56.639 you'd fire off an action to reducces, say this is 150 00:07:56.680 --> 00:08:00.000 the new state that kind of thing. Okay, well, very nice. 151 00:08:00.199 --> 00:08:02.600 I'm curious. I keep coming back to the performance aspect 152 00:08:02.600 --> 00:08:07.360 of this. But for the isolated like re render stuff 153 00:08:08.120 --> 00:08:11.120 that's is that just built into the way react hook 154 00:08:11.160 --> 00:08:13.959 form works. Is there something you have to be like 155 00:08:14.319 --> 00:08:17.600 careful of of how you approach things, or like are 156 00:08:17.600 --> 00:08:20.120 there any sort of like foot guns or things to 157 00:08:20.160 --> 00:08:22.319 be aware of or does it kind of just is 158 00:08:22.319 --> 00:08:24.160 that just sort of the design that it works in 159 00:08:24.199 --> 00:08:26.000 that isolated sort of way. 160 00:08:26.480 --> 00:08:30.519 Yeah, reactok form is built with performance in mind. So 161 00:08:30.920 --> 00:08:35.559 it uses uncontrolled inputs, right, it leverages ref so that 162 00:08:35.639 --> 00:08:39.600 the whole component does not rerender us only that particular input. 163 00:08:39.919 --> 00:08:40.360 I see. 164 00:08:40.679 --> 00:08:45.039 So, and I'm guessing, like, does does formic work more 165 00:08:45.159 --> 00:08:47.480 or yeah? Does formic work more on like a controlled 166 00:08:47.519 --> 00:08:52.159 basis then where it's actually having to then adapt like 167 00:08:52.320 --> 00:08:55.360 sort of rerender based off like each key pressor to 168 00:08:55.480 --> 00:08:56.960 like each change that sort of thing. 169 00:08:57.039 --> 00:09:01.399 Yeah, Yeah, formic does that. Formic rerenders on every change. 170 00:09:01.840 --> 00:09:04.440 Like it's been a while since I used phoming, so 171 00:09:04.679 --> 00:09:06.200 like I don't know the currents. 172 00:09:06.320 --> 00:09:09.120 Yeah, and it's interesting too because I think it I'm 173 00:09:09.120 --> 00:09:11.399 guessing it sort of depends on what you're building, right, 174 00:09:11.440 --> 00:09:15.360 because that you're considerations for building a log in form, 175 00:09:15.519 --> 00:09:18.000 like chances are like you're not going to hit any 176 00:09:18.039 --> 00:09:21.200 performance issues on a username and a passwords sort of thing. 177 00:09:21.320 --> 00:09:24.200 But I think with forms specifically, like it's totally reasonable 178 00:09:24.240 --> 00:09:27.759 they have forms with twenty some inputs. I've worked on 179 00:09:28.159 --> 00:09:30.679 big insurance apps in the past, and those things are 180 00:09:30.720 --> 00:09:35.320 just absolute monsters, right, So it's it's those are like 181 00:09:35.440 --> 00:09:38.679 real world, real considerations. So it's I don't know. I 182 00:09:38.679 --> 00:09:40.200 don't know if there's a question here. I'm just sort 183 00:09:40.240 --> 00:09:43.360 of interested in the different approaches these libraries are taking. 184 00:09:43.519 --> 00:09:45.559 Yeah, I think it'd be interesting to talk about controlled 185 00:09:45.639 --> 00:09:48.799 versus uncontrolled, because I don't know if everybody is up 186 00:09:48.840 --> 00:09:51.799 to speed on that. So a controlled input is when 187 00:09:52.360 --> 00:09:53.759 and this is what you see kind of in that 188 00:09:53.879 --> 00:09:58.919 traditional React walkthrough, which is like you've got use date, 189 00:09:59.159 --> 00:10:01.159 you know, which would be have your state of your 190 00:10:01.240 --> 00:10:03.879 text field right, and you have value equals and that 191 00:10:03.960 --> 00:10:06.080 value and then on change you go and set the 192 00:10:06.080 --> 00:10:09.200 state and all that, and that would be a controlled input, right, 193 00:10:09.240 --> 00:10:11.120 and then uncontrolled input is where you just have a 194 00:10:11.159 --> 00:10:13.840 ref and you got a ref to that that component, 195 00:10:14.200 --> 00:10:16.120 and then when you need the value, you just go 196 00:10:16.159 --> 00:10:19.039 to the ref dot current dot value whatever it is, 197 00:10:19.279 --> 00:10:21.320 and you get the value and then there you go. 198 00:10:21.480 --> 00:10:25.200 And there's a big speed boost in using those uncontrolled components. 199 00:10:25.200 --> 00:10:28.039 And actually in the React documentation they now recommend that. 200 00:10:28.159 --> 00:10:31.279 So if if that's the basic mechanism of reactive form 201 00:10:31.360 --> 00:10:34.519 is to do that with uncontrolled inputs, that's actually really cool. 202 00:10:34.720 --> 00:10:37.279 Yeah, yeah, And I think also too for beginners, like 203 00:10:37.639 --> 00:10:40.519 if anybody here hasn't tried building a form and React 204 00:10:40.559 --> 00:10:45.639 without any libraries, it's it's a worthwhile effort to do once, 205 00:10:45.720 --> 00:10:49.559 probably only once, just to see how painful it can get. 206 00:10:49.679 --> 00:10:51.840 Cause it sounds like you say, like, oh, you like 207 00:10:52.000 --> 00:10:54.000 use state and then like you need an un change 208 00:10:54.080 --> 00:10:56.919 handler that updates the state, and like you do it 209 00:10:56.919 --> 00:10:59.919 for one form control and it's like, oh, okay, whatever, 210 00:11:00.039 --> 00:11:02.639 But then you work in a real app that has 211 00:11:02.960 --> 00:11:05.200 once you get to like three or four fields on 212 00:11:05.240 --> 00:11:09.440 a form, you instantly realize like okay, like I do 213 00:11:09.519 --> 00:11:11.679 not want to type this anymore. I'm either going to 214 00:11:11.720 --> 00:11:14.240 make a mistake or like, I'm going to lose my 215 00:11:14.360 --> 00:11:17.559 mind typing all of this out. So I think that's 216 00:11:17.639 --> 00:11:20.879 what leads you to the Google searches that brings us 217 00:11:20.919 --> 00:11:23.679 to a library like this, because it just gets it 218 00:11:23.679 --> 00:11:26.320 gets monotonous at any sort of scale whatsoever. 219 00:11:26.639 --> 00:11:30.600 Oh yeah, there's validation, and then there's also managing dirty 220 00:11:30.639 --> 00:11:34.120 state and errors. You know, it's not an error until 221 00:11:34.159 --> 00:11:36.919 somebody puts in the wrong value and then it's dirty 222 00:11:36.960 --> 00:11:39.120 and it's an error and all. And you have to 223 00:11:39.120 --> 00:11:41.360 do this on a per field basis. It's a huge, 224 00:11:42.000 --> 00:11:43.360 huge pain. Yeah. 225 00:11:43.440 --> 00:11:46.559 Actually that leads me to a question. So with re form, 226 00:11:46.679 --> 00:11:49.559 is it only about the like logic end of things. 227 00:11:49.559 --> 00:11:52.600 Does it help you presentationally at all? Like, well does it? 228 00:11:52.919 --> 00:11:54.799 Or is that totally up to you, Like will it 229 00:11:54.840 --> 00:11:59.279 help with where you place validation messages or anything like that? 230 00:12:00.080 --> 00:12:04.879 Not really, Like it does not help with any presentation side, 231 00:12:04.960 --> 00:12:08.240 but it does give you the independence to you know, 232 00:12:08.399 --> 00:12:12.080 work with whatever design you got and you can access 233 00:12:12.200 --> 00:12:15.840 the errors object from the you know, used formbook and 234 00:12:15.879 --> 00:12:18.799 then you know you just placed wherever you don't want 235 00:12:18.799 --> 00:12:20.480 the error to be displayed. 236 00:12:20.600 --> 00:12:23.200 Do you have any libraries you've used or you've recommend 237 00:12:23.240 --> 00:12:25.039 for that sort of thing, because I think probably for 238 00:12:25.120 --> 00:12:28.120 most people you need a form like this almost to 239 00:12:28.159 --> 00:12:30.000 me sounds like one part of the problem, right, Like 240 00:12:30.039 --> 00:12:32.279 I need like the plumbing under the hood, But then 241 00:12:32.919 --> 00:12:35.279 I also want my inputs to look good. I want 242 00:12:35.679 --> 00:12:38.480 air messages to show up logically, because I mean we 243 00:12:38.519 --> 00:12:41.120 could almost have a full conversation on the UX side 244 00:12:41.120 --> 00:12:44.279 of like how forms are supposed to work, right, because 245 00:12:44.279 --> 00:12:46.639 that can come into play too, and libraries can somewhat 246 00:12:46.679 --> 00:12:48.639 help with that. So I'm curious what you've used in 247 00:12:48.679 --> 00:12:50.360 the past for that sort of thing, and if you 248 00:12:50.399 --> 00:12:52.000 have any recommendations. 249 00:12:52.279 --> 00:12:55.559 So I've worked with material Ui before, like I have 250 00:12:55.759 --> 00:13:00.000 used material Ui Bootstrap and yeah, also Bulma. So these 251 00:13:00.120 --> 00:13:03.279 libraries help with the presentation site. So you can simply 252 00:13:03.320 --> 00:13:07.039 integrate reac hook foam with these you know, UI liabilities, 253 00:13:07.360 --> 00:13:09.120 and it is pretty seamless. 254 00:13:09.159 --> 00:13:12.720 And and I think I think these hook libraries, I 255 00:13:12.720 --> 00:13:16.600 think both hook form and form it They're they're tiny, 256 00:13:16.679 --> 00:13:19.240 aren't they like that? Do people have to be worried 257 00:13:19.240 --> 00:13:22.440 about file size of this? I'm pretty sure they're small. 258 00:13:22.759 --> 00:13:26.320 Yeah, the yag hook foam has like yeah, has a 259 00:13:26.440 --> 00:13:30.480 very tiny size, like I think it's file six sky. 260 00:13:31.000 --> 00:13:33.639 Oh yeah, that's that's tiny. 261 00:13:34.519 --> 00:13:36.559 Yeah. Bundle Phobia I think puts it at twenty four, 262 00:13:36.559 --> 00:13:39.759 which is still like super light. Bundle Phobia is a 263 00:13:39.799 --> 00:13:41.840 great site for doing that kind of stuff. 264 00:13:41.919 --> 00:13:43.840 I love that name, bundle Phobia. 265 00:13:43.919 --> 00:13:49.159 Bundle Phobia, yeah, absolutely, So you went from reducts to hooks, right, 266 00:13:49.519 --> 00:13:52.080 and tell us a little bit about that that migration 267 00:13:52.200 --> 00:13:54.320 for you, because I think it is a very different 268 00:13:54.399 --> 00:13:57.679 model of thinking about how you manage and structure and 269 00:13:57.720 --> 00:13:59.440 store state right right. 270 00:13:59.519 --> 00:14:04.120 So, like like any other bigner developer, I decided straight 271 00:14:04.159 --> 00:14:08.320 away that I wanted to use reducts because everywhere I 272 00:14:08.360 --> 00:14:12.120 looked online everyone was like, okay, you if you're using React, 273 00:14:12.159 --> 00:14:15.559 you also need a state management library like reducts or morbids. 274 00:14:15.679 --> 00:14:20.240 So I was so okay, I was like ticket, let's okay, fine, 275 00:14:20.279 --> 00:14:20.919 let's go with it. 276 00:14:21.399 --> 00:14:22.759 Let's go with reducts. 277 00:14:22.799 --> 00:14:25.879 And I pretty much started with there, and then I've 278 00:14:26.200 --> 00:14:29.799 like gott into this form problem, like I didn't like 279 00:14:29.840 --> 00:14:31.879 I had to write the form myself. 280 00:14:31.919 --> 00:14:34.600 So I was like, okay, let's go with the reducts form. 281 00:14:34.600 --> 00:14:38.080 Because it is you know, compatible, So I choose that, 282 00:14:38.720 --> 00:14:42.559 and then after that I was like, then then I 283 00:14:42.639 --> 00:14:45.879 realized that, Okay, I don't need reducts for every project 284 00:14:45.879 --> 00:14:50.200 that I work on, so I can use context, right, 285 00:14:50.360 --> 00:14:54.919 I can use context. So then yeah, then I sort 286 00:14:54.960 --> 00:14:58.879 of changed my thought process into you know, think statement 287 00:14:58.960 --> 00:15:02.399 management from a component level instead of a global level. 288 00:15:02.679 --> 00:15:05.559 School. Yeah, and were there anything? Was there any learning 289 00:15:05.559 --> 00:15:07.240 that you had to do to make that happen? Like, 290 00:15:07.440 --> 00:15:09.720 were there any like, oh, yeah, I have to rethink 291 00:15:09.759 --> 00:15:12.519 my thinking about how I would do this versus that. 292 00:15:13.000 --> 00:15:16.519 Not really like I just you know, I've just been 293 00:15:16.559 --> 00:15:20.320 through a couple of guides on those topics like how 294 00:15:20.360 --> 00:15:24.480 to structure your React project or how to organize your 295 00:15:24.480 --> 00:15:25.000 React code. 296 00:15:25.559 --> 00:15:28.279 So those those sort of topics. 297 00:15:28.759 --> 00:15:29.840 Yeah, that is it. 298 00:15:30.320 --> 00:15:34.120 See it said you have some React Native experience as well, 299 00:15:34.279 --> 00:15:38.000 So I'm curious what the form world is like there, 300 00:15:38.000 --> 00:15:40.840 because it looks like reacts hook forms websites as they 301 00:15:40.960 --> 00:15:43.840 run on React Native as well. So are you using 302 00:15:43.879 --> 00:15:47.720 the same library on the web and native. How does 303 00:15:47.720 --> 00:15:48.480 all that work? 304 00:15:49.159 --> 00:15:49.399 Yes? 305 00:15:49.519 --> 00:15:52.240 Yes, so on the native world as well. Like I 306 00:15:52.360 --> 00:15:55.759 used to work with formic, but then I switch to 307 00:15:55.919 --> 00:16:00.200 use form this React hook form and the ideal is 308 00:16:00.240 --> 00:16:03.840 that you cannot use ref directly, so you had to 309 00:16:03.960 --> 00:16:06.960 use Unfortunately, you had to use the controller higher order 310 00:16:07.039 --> 00:16:08.960 component for that in reacty to do. 311 00:16:09.240 --> 00:16:13.039 And so what does that mean, Like you're like, is 312 00:16:13.080 --> 00:16:17.200 it like registering what the components are? So like because 313 00:16:17.200 --> 00:16:19.759 I imagine like the part that and I did some 314 00:16:19.840 --> 00:16:21.840 native stuff for a while too, but this still blows 315 00:16:21.840 --> 00:16:24.720 my mind. But like something about the act of like 316 00:16:24.840 --> 00:16:29.360 React talking to like native Valus and native anderid controls. 317 00:16:29.399 --> 00:16:32.720 I imagine what like this is like wrapping it so 318 00:16:32.840 --> 00:16:36.919 that format knows how to talk to those React native controls. 319 00:16:37.000 --> 00:16:39.679 That more or less am I'm making things up? 320 00:16:39.919 --> 00:16:43.440 Yeah, like the same thing, only because like the controller, 321 00:16:44.039 --> 00:16:47.919 like in React to your the native inputs have these 322 00:16:48.639 --> 00:16:53.200 props like on change, text, on blur, et cetera. So 323 00:16:53.279 --> 00:16:57.639 these work like these do the same job as your 324 00:16:57.879 --> 00:16:59.200 web web component. 325 00:16:59.480 --> 00:17:01.240 So so that is pretty much it. 326 00:17:01.440 --> 00:17:06.160 And uh basically controller has this uh rend render prop 327 00:17:06.400 --> 00:17:09.559 render prop which gives you these value on change, these 328 00:17:10.039 --> 00:17:13.799 properties like on change and value of that particular field, 329 00:17:14.559 --> 00:17:18.400 and then you can just simply map those field to 330 00:17:18.599 --> 00:17:19.319 your component. 331 00:17:19.480 --> 00:17:23.160 Like for example, your input can have a name and yeah, 332 00:17:23.200 --> 00:17:26.000 so important part is that the controller must have a 333 00:17:26.319 --> 00:17:30.400 name property. Otherwise the uh uh, the form wouldn't know 334 00:17:30.440 --> 00:17:31.240 which field it is. 335 00:17:31.559 --> 00:17:34.440 That's meant so I'm curious the React native application that 336 00:17:34.480 --> 00:17:37.160 you're working on, is it the same form as the 337 00:17:37.200 --> 00:17:38.519 one that you had on the web? 338 00:17:39.359 --> 00:17:39.680 No? 339 00:17:39.680 --> 00:17:43.480 No, no, you don't have that much inputs in that 340 00:17:43.519 --> 00:17:45.680 form like simple log in, logout. 341 00:17:45.880 --> 00:17:49.400 Yeah, all right, because I think it's great the idea 342 00:17:49.480 --> 00:17:53.720 of sharing business logic code like validation and how the 343 00:17:53.759 --> 00:17:57.000 forms work together, independencies and the configuration of that and 344 00:17:57.039 --> 00:18:01.200 sharing that between React and React Native. I would love 345 00:18:01.279 --> 00:18:05.240 to see that because that's the point, right. Yeah. 346 00:18:05.319 --> 00:18:07.640 Yeah. I worked back in a few years ago. I 347 00:18:07.680 --> 00:18:09.839 worked on the Native script team and we were like 348 00:18:09.920 --> 00:18:13.079 a kind of sort of competitor with React Native, and 349 00:18:13.640 --> 00:18:15.680 we had some stuff in that space as well, And 350 00:18:16.319 --> 00:18:19.759 that was always the dream. It's the reality is it's 351 00:18:20.319 --> 00:18:23.519 it can work, but it has to be like the right, 352 00:18:24.000 --> 00:18:26.519 it's got to be an app that's like relatively simple, 353 00:18:26.599 --> 00:18:28.400 Like it's got to be complex enough that you're actually 354 00:18:28.720 --> 00:18:32.240 getting some value out of sharing code, but it also 355 00:18:32.359 --> 00:18:36.599 can't be so complex because once you start needing things 356 00:18:36.680 --> 00:18:39.799 customized for each platform, then the value of sharing that 357 00:18:39.920 --> 00:18:43.640 code can kind of fall apart. So we had some 358 00:18:43.680 --> 00:18:46.039 success stories. We had some people that were doing it, 359 00:18:46.440 --> 00:18:49.799 but they were like the like I guess, like load 360 00:18:49.799 --> 00:18:53.920 to mid complexity, sorts of situations where it tended to 361 00:18:53.920 --> 00:18:56.960 work out the best. But it's interesting stuff and I 362 00:18:57.599 --> 00:19:00.799 still find it cool, like it even, like I said, 363 00:19:00.799 --> 00:19:02.079 I've worked in this world for a while, and even 364 00:19:02.119 --> 00:19:04.359 when I see websites for this and they say can 365 00:19:04.400 --> 00:19:07.279 work on web native, that still just strikes me as 366 00:19:07.400 --> 00:19:10.160 really really fun because how cool is it that you 367 00:19:10.200 --> 00:19:12.119 can learn this library and then you go over to 368 00:19:12.160 --> 00:19:14.880 your iOS or Android A development and it's like, oh, hey, 369 00:19:14.920 --> 00:19:17.519 I already know how to do forms here, Like that's 370 00:19:17.720 --> 00:19:18.400 kind of cool. 371 00:19:18.480 --> 00:19:21.759 Actually yeah, And there are component libraries out there nowadays 372 00:19:21.799 --> 00:19:26.359 that supposedly are cross react and react native, so that 373 00:19:26.400 --> 00:19:27.279 could be really cool. 374 00:19:27.519 --> 00:19:30.680 We have more questions, so we talked about react to forms. 375 00:19:30.720 --> 00:19:32.519 You said you work on other stuff. Are there any 376 00:19:32.559 --> 00:19:36.079 other topics you're you're interested in that you've been writing about. 377 00:19:36.160 --> 00:19:37.519 You're passionate about. 378 00:19:37.519 --> 00:19:40.759 Love work with Like, have you guys worked with type before? 379 00:19:41.279 --> 00:19:43.640 Could you say it again? I have? 380 00:19:44.640 --> 00:19:47.960 So it's basically so I've used the type or with 381 00:19:48.000 --> 00:19:50.880 the React and you do so like it's like a 382 00:19:51.200 --> 00:19:55.599 you know, a model layer for communicating with the Esquelite database, 383 00:19:55.880 --> 00:20:00.480 so you can use objects to represent data uh in 384 00:20:00.640 --> 00:20:01.279 the jaws. 385 00:20:01.440 --> 00:20:03.160 So nice. And this would be on the client side, 386 00:20:03.720 --> 00:20:05.160 Yeah nice. 387 00:20:05.440 --> 00:20:09.640 Like type pretty much works on every plant, like on 388 00:20:10.720 --> 00:20:14.200 client as well and as well as on the server 389 00:20:14.319 --> 00:20:20.400 with as well and the Mango deb I think, so yeah. 390 00:20:20.119 --> 00:20:22.960 So very cool. Does it have typescript bindings so it's 391 00:20:22.960 --> 00:20:25.160 actually like strongly typed if you want them? 392 00:20:25.559 --> 00:20:25.839 Yeah? 393 00:20:25.920 --> 00:20:26.160 Nice? 394 00:20:26.240 --> 00:20:27.880 It has it has type. 395 00:20:28.480 --> 00:20:29.440 Do you do any typescript? 396 00:20:29.960 --> 00:20:30.079 Uh? 397 00:20:30.200 --> 00:20:30.279 Not? 398 00:20:31.000 --> 00:20:35.160 So I'm curious type orm Like this is like I'm 399 00:20:35.519 --> 00:20:37.039 I'm just trying to think of how I use this 400 00:20:37.119 --> 00:20:39.400 in a real world app. Right, So I'm building my 401 00:20:40.279 --> 00:20:44.359