React Hook Form with Vijit Ail - RRU 269

Welcome to React round Up. I'm your host for today, Jack Harrington, and with me is the incomparable TJ. Van Toll. Hey, hey everybody, and our guest for today is veget i E. Can you tell us a little about your background and why you are of interest to the React round Up audience.

So my name is Vigit and I'm a software engineer from Mumbai, India. I have been working with React and reacting with you for the past couple of years and recently I also started working with not js. When I'm not at work, you will find me writing guides and articles for Medium, log Rocket and my personal blog.

So yeah, that is pretty much.

That's awesome. So I know you recently wrote a blog post on React took form. It's a personal favorite of mine when you tell us a little bit rather it so yeah.

So React hook form is basically a library that helps you handle and manage state of the font like in a very easy and clear way.

Yeah, very cool. So does that can include things like validation?

Yeah, it includes validation of state management like form data management, and it has like it has a great developer experience and one of the cool things I like about React took form is that it has isolated rerenders, so when a data in the form changes, so only that particular component or input changes and not the whole form.

So that's a huge plus on the performance side.

Yeah, and even to take a step back, I've always found it interesting how React really doesn't give you much. You could argue it doesn't really give you much of anything for handling forms, which I mean like there's two

Correct, So like when I was starting out. I started with reducs form I guess so like I didn't know that there was other options. So for me, reducts was a go to library when it came to state management. But as I explored more than I realized that, okay, so I don't need the whole state like the form state to be in the global states. So I decided that, okay, cool, so I need to look out for a new library. So then I looked up Formic. So Formic was a great,

And yeah, the only.

Part of React hook form is that it does not work with class components out of the box, so you have to create a you know, a rapper or something like that.

Are you using a lot of class components.

Not really like currently, like the code base currently I'm working on it much has everything on function components.

Issue.

Yeah yeah, yeah, so can you tell folks who haven't actually tried out React to form, like, so, what are the basic mechanics of using this?

So, like you can just use the use like it has use form hook.

So the use form hook basically returns an object with the a registered function as set values function values object and the errors and ceter So these are the basic ones. And so if you want to you know, get data from an input you just passed the you just destructure the registered object on that input and it will just do its own magic. So that is like a very basic implementation.

Nice.

Right, you don't have any use a wrapper component or anything like that.

Nice. And does it work with stuff like material, UI or components like that if you were using.

Those, Yeah, it does work with material Like any third party component that has ref that exposes the ref, you can pretty much use React hook form with it. But in some cases we don't usually get the option to use ref. So you can use the controller component or the use controller hook of React hook phone. Yeah, and that will do the trick for you.

So I remember from the documentation there were some really good examples of all of the systems working together, so it's very well documented that way.

Yeah, the documentation is really nice, and they have like they have the API difference of every every component, every hook that they have, and it's very very well explained and detailed there. So like your single source of truth would be the documentation.

Nice.

And I'm really interested in the performance aspect of this because I've just been kind of producing the react took forms because in my head, like the two big players in the react form world are formic in React took form, or at least those are the two that seem to come up to them in it. It sounds like which you said, like performance was the main sort of differentiating feature for you. So I'm curious, like, did you what

Yeah, So I'll tell your story.

So I got this you know form which had over twenty twenty four twenty five inputs, so and there was no library being used there, so it was just a I think it was a custom book with the US reducer or used it, I think. And what was happening is every time you know, press the keyboard on any input, so the whole form rendered, and the form was quite heavy, like it had twenty five inputs in there, and every time you pressed a key the whole form would lag.

You would visibly see it. So it was the worst.

So then I had to take a call, so like I migrated from that custom hook to the React hook form.

Nice. So for folks who are in your like doing the kind of stuff that you did with reducs and forums managed in reducts, does using something like reactric form preclude using reducts? Can you use the two together?

Yeah?

Yeah, you can definitely use them together. And you know, they both have different functions. So for example, if you think, if my like, the real question is do you want your form state to be global or not? If you like, if you want it to be global, you can go with reducts form not a problem. But but in most cases the I think the form states should be local, like should be local to that particular component.

And so React hook form just does a job for you.

So you use reactric form then to manage the local form, and then once it's done or saved or canceled, then you'd fire off an action to reducces, say this is the new state that kind of thing. Okay, well, very nice.

I'm curious. I keep coming back to the performance aspect of this. But for the isolated like re render stuff that's is that just built into the way react hook form works. Is there something you have to be like careful of of how you approach things, or like are there any sort of like foot guns or things to be aware of or does it kind of just is that just sort of the design that it works in that isolated sort of way.

Yeah, reactok form is built with performance in mind. So it uses uncontrolled inputs, right, it leverages ref so that the whole component does not rerender us only that particular input.

I see.

So, and I'm guessing, like, does does formic work more or yeah? Does formic work more on like a controlled basis then where it's actually having to then adapt like sort of rerender based off like each key pressor to like each change that sort of thing.

Yeah, Yeah, formic does that. Formic rerenders on every change. Like it's been a while since I used phoming, so like I don't know the currents.

Yeah, and it's interesting too because I think it I'm guessing it sort of depends on what you're building, right, because that you're considerations for building a log in form, like chances are like you're not going to hit any performance issues on a username and a passwords sort of thing. But I think with forms specifically, like it's totally reasonable

Yeah, I think it'd be interesting to talk about controlled versus uncontrolled, because I don't know if everybody is up

Yeah, yeah, And I think also too for beginners, like if anybody here hasn't tried building a form and React without any libraries, it's it's a worthwhile effort to do once, probably only once, just to see how painful it can get.

Oh yeah, there's validation, and then there's also managing dirty state and errors. You know, it's not an error until somebody puts in the wrong value and then it's dirty and it's an error and all. And you have to do this on a per field basis. It's a huge, huge pain. Yeah.

Actually that leads me to a question. So with re form, is it only about the like logic end of things. Does it help you presentationally at all? Like, well does it? Or is that totally up to you, Like will it help with where you place validation messages or anything like that?

Not really, Like it does not help with any presentation side, but it does give you the independence to you know, work with whatever design you got and you can access the errors object from the you know, used formbook and then you know you just placed wherever you don't want the error to be displayed.

Do you have any libraries you've used or you've recommend for that sort of thing, because I think probably for most people you need a form like this almost to me sounds like one part of the problem, right, Like I need like the plumbing under the hood, But then

So I've worked with material Ui before, like I have used material Ui Bootstrap and yeah, also Bulma. So these libraries help with the presentation site. So you can simply integrate reac hook foam with these you know, UI liabilities, and it is pretty seamless.

And and I think I think these hook libraries, I think both hook form and form it They're they're tiny, aren't they like that? Do people have to be worried about file size of this? I'm pretty sure they're small.

Yeah, the yag hook foam has like yeah, has a very tiny size, like I think it's file six sky.

Oh yeah, that's that's tiny.

Yeah. Bundle Phobia I think puts it at twenty four, which is still like super light. Bundle Phobia is a great site for doing that kind of stuff.

I love that name, bundle Phobia.

Bundle Phobia, yeah, absolutely, So you went from reducts to hooks, right, and tell us a little bit about that that migration for you, because I think it is a very different model of thinking about how you manage and structure and store state right right.

So, like like any other bigner developer, I decided straight away that I wanted to use reducts because everywhere I looked online everyone was like, okay, you if you're using React, you also need a state management library like reducts or morbids. So I was so okay, I was like ticket, let's okay, fine, let's go with it.

Let's go with reducts.

And I pretty much started with there, and then I've like gott into this form problem, like I didn't like I had to write the form myself.

So I was like, okay, let's go with the reducts form.

Because it is you know, compatible, So I choose that, and then after that I was like, then then I realized that, Okay, I don't need reducts for every project that I work on, so I can use context, right, I can use context. So then yeah, then I sort of changed my thought process into you know, think statement management from a component level instead of a global level.

School. Yeah, and were there anything? Was there any learning that you had to do to make that happen? Like, were there any like, oh, yeah, I have to rethink my thinking about how I would do this versus that.

Not really like I just you know, I've just been through a couple of guides on those topics like how to structure your React project or how to organize your React code.

So those those sort of topics.

Yeah, that is it.

See it said you have some React Native experience as well, So I'm curious what the form world is like there, because it looks like reacts hook forms websites as they run on React Native as well. So are you using the same library on the web and native. How does all that work?

Yes?

Yes, so on the native world as well. Like I used to work with formic, but then I switch to use form this React hook form and the ideal is that you cannot use ref directly, so you had to use Unfortunately, you had to use the controller higher order component for that in reacty to do.

And so what does that mean, Like you're like, is it like registering what the components are? So like because I imagine like the part that and I did some native stuff for a while too, but this still blows my mind. But like something about the act of like React talking to like native Valus and native anderid controls. I imagine what like this is like wrapping it so that format knows how to talk to those React native controls. That more or less am I'm making things up?

Yeah, like the same thing, only because like the controller, like in React to your the native inputs have these props like on change, text, on blur, et cetera. So these work like these do the same job as your web web component.

So so that is pretty much it.

And uh basically controller has this uh rend render prop render prop which gives you these value on change, these properties like on change and value of that particular field, and then you can just simply map those field to your component.

Like for example, your input can have a name and yeah, so important part is that the controller must have a name property. Otherwise the uh uh, the form wouldn't know which field it is.

That's meant so I'm curious the React native application that you're working on, is it the same form as the one that you had on the web?

No?

No, no, you don't have that much inputs in that form like simple log in, logout.

Yeah, all right, because I think it's great the idea of sharing business logic code like validation and how the forms work together, independencies and the configuration of that and sharing that between React and React Native. I would love to see that because that's the point, right. Yeah.

Yeah. I worked back in a few years ago. I worked on the Native script team and we were like a kind of sort of competitor with React Native, and we had some stuff in that space as well, And

Actually yeah, And there are component libraries out there nowadays that supposedly are cross react and react native, so that could be really cool.

We have more questions, so we talked about react to forms. You said you work on other stuff. Are there any other topics you're you're interested in that you've been writing about. You're passionate about.

Love work with Like, have you guys worked with type before?

Could you say it again? I have?

So it's basically so I've used the type or with the React and you do so like it's like a you know, a model layer for communicating with the Esquelite database, so you can use objects to represent data uh in the jaws.

So nice. And this would be on the client side, Yeah nice.

Like type pretty much works on every plant, like on client as well and as well as on the server with as well and the Mango deb I think, so yeah.

So very cool. Does it have typescript bindings so it's actually like strongly typed if you want them?

Yeah?

Nice?

It has it has type.

Do you do any typescript?

Uh?

Not?

So I'm curious type orm Like this is like I'm I'm just trying to think of how I use this in a real world app. Right, So I'm building my React app. I've got my form and I need to push I'm building an insurance form, so I need people's like name, address, that sort of thing, and then presumably

So like, are you talking about the client side or the server side? Right?

Potentially both, I've because type of M is is it entirely what you said, it works on both hands of things?

Yeah, yeah, yeah right.

So on the client side, like in general, what you do is you have some tables like in your database, and you have the columns. So you can create an object, right, which is called an entity to represent those tables. Right, So if you have a user's table, you can create a user entity and have properties like name, password and

Method, gotcha. So it's kind of helping with some of the boiler plates so that you don't have to like wire all of that up yourself.

Right.

So here the main uh, like the main problem that type OM solves on the client, on the reactitive world is that you don't have to write.

The raw scual queries yourself.

So as a front end developer, I don't need to write scale queries like directly. So basically type om gives you, you know, ability to write insert into database, like communicated with database without having to write queries.

Oh it's interesting. I didn't even think about this from like a React native perspective, but I guess like when you're in React Native, you could have the database right there right like you don't have to hit a back end to do it. So that's actually kind of cool. If you get generated it itself, you're like instantaneously working with the database without any extra.

Work, right Yeah, particularly if you want like a cash or something like that and you want to manage that, this is a really nice way to do that in a kind of a strongly type way and then get you know, structured the data on the client just as well as you do on the back end. It's pretty cool and it works on native script.

Yeah, oh yeah, there you go. So then this this sort of fascinates me a little bit. So if you're working with like a local SQL based database, is that are you working on that like in a cash sort of setting or are you eventually taking that that data and then like persisting it to a back end as well, and how does that interaction work?

Yes, so we usually store like it as a cash as a local storage mainly for you know, better providing better user experience. So you know, whenever the user you push some data, we first stored in dealal database right and then you know, once he has a stable connection, we then push it to our server.

So that's how it works.

So it just basically helps you in plodding better user experience and users don't have to wait for that data to be pushed like it can be. It can happen in a background, background service or synchronously back around.

And does type O RM help with that specifically or it is something else that handles like the sinking of the database.

No type on and does not do that out of the box.

Like for me, we had a separate table which you know, which mapped these entities to a bullion value like is syncd is one or zero? Like if it is SYNCD, then we don't sink it like like that.

That's really handy from a customer, Yeah, that's really handy from a customer perspective, you know, being able to have that offline mode and then work offline and then resink when you have connectivity. That's just absolutely one ful, right.

Yeah, so you don't have to show you know, no internet to your customer.

I imagine though, like there you probably do have to deal with like out of sync type of problems or like like you have in your apps. Are users like isolated in their own data? Like do you have to worry about like users potentially messing without the data and like how to deal with conflicts and stuff like that.

So usually we have like data like the local database does not have the ability to store data for multiple users like the currently Lobbin users that users that you have, only uh that users data would be available in the client set and for if suppose any like we don't SNK all the data to this server, only what we require. But in case that is you know there is a slight miss or inconsistency, that is just you know, you have to roll with it.

Yeah, it definitely makes it a lot easier because like those sorts of situations I've dealt with people in the past that are it's like, oh, we want our apps to totally work offline, and the situation is like it's a it's a group of employees that are all working on like some sort of dashboard, right, and they can all be messing with the same ones, and it's like okay, like you we can do this, but like what happens if employee A changes the order date and employee B

Wins, Yes, exactly, period right, make it easy time or picks?

Yeah the GD Is there any other pieces of tech, any other things you you think are interesting or want to discuss before we head into picks?

Well, can we talk about the back and stuff?

Like?

Sure?

Yeah?

So, like, are you guys familiar with nest JS the framework?

That'd be great. Yeah, we'll talk about that. Yeah, go for it. Oh okay, so I think you also have some experience with nest JS when you tell us about that.

So yeah, SOSJS is a back end frame, not just framework that you know, helps you organize your code and have strong typings on your services, so like which comes really handy when you have a lot of services and a lot of APIs and suddainly and also it has a great developer experience. Once again, you can isolate your code and you can have separate modules as for your business logic and yeah.

Cool. So this is for building your rest back end in node if that's what you want to do. Yeah, right, nice, and it makes it really easy to do that.

Yeah.

So basically nestjs has these boiler plate commands, so you just run a command for module and it would automatic it would create a module file for you. So it is inspired by Angular, right, it has syntax and decorators similar to Angular, and they have they have pretty much everything or you know covered in the library. If you want cash, if you want database, and the type ONEm is you know is the go to choice for handling database.

So if you're thinking about building your own rest API, instead of just going direct to like an express and building it down to the kind of base layer, you can use next js and level up there nice.

Right, right, And it's any e s T correct not any T, I swear.

Like two different things. Yes, It's like, if you're.

Building a front end React framework, you have to name it something that starts with R E, like remix, reducts react, and like if you're doing back end stuff, you gotta go an E. Apparently I did have a question though with nest is. Is there anything proprietary about it? Can you then take your back end and throw it up on like any back end or is there specific hosting requirements?

No, like there's no property license or anything like. You can create your own good base and just push it to Aw's or.

Any Okay, And they have cats all over their website, so there's that too.

That's always a win. Well, Wig, thank you for bringing some great stuff to us today, and I think that brings us around to picks. So Veg, you want to start us off and give your pick.

Yeah, So my pick would be Stephen Ryder's micro Services course. So he talks about micro services, not just in great detail in that course, so do check it out.

Fantastic DJ.

So I'm going to pick a game called Super Mario three D World for the Switch. It's a fun multiplayer game. It's it's basically just your classic Mario, right, I think that's that's they know what they're doing right there. There's not much curve balls, but it's it's just typical, like really well executed. It's a great multiplayer game. So I play with my kids. It's up to four people simultaneously playing Classic Mario and it's just you know, if you're

Yeah, I've been playing some Ratchet and Clank lately and I'm in a competition with my next door neighbor to see how can go faster. And unfortunately, my work has taken over my life, so I know, works, the responsibilities, I mean, always adulting. It's tough. So my pick for today is NX dot dev. It's a mono repo management system. It's it's really cool. So I've got a very small

Really cool, We're gonna have to do a show on mono repo's once please. That's uh. I have opinions, and I think it's one of those classic dev topics. Right everybody, Oh, you either like it or you hate.

It I think so. Yeah, absolutely all right, Well that's been wonderful. Thank you so much for coming on the podcast.

It's been a good experience coming to you.

Well, thanks everyone for joining us, and we'll see you next week.