The Weird Things About React

So today we're going to talk about the weird things about react I'm Nick short introduction. Yes, I work on Serenity we use it's basically think of us like notional Confluence but actually enter an encrypted and of course we use react react native actually in this case, so we compiled weapons and react native or IOS and Android app and I'm also an accurate tutor so you can find some courses for me and depending on who's asking. I need a consultant the freelance. So yeah, if you need some help feel free to reach out enough about me. Well not totally like let's actually dig in my journey started with like I think 0.12 or 0.13 with react and that time was awesome. You know you had to you had this like create component class and through Act was very clear and and everything was good. Really enjoyed it and 0.14 came along and these were good times and then then came the first warning sign what why not one point. Oh, yeah, and but they made this blog posts this like really really long blog post. About why they're doing this and basically explaining December and so on and I feel like okay. So the probably I mean, why are they doing this? They must be guilty or they must see that they're doing something wrong and putting a lot of dedication in it. And so I'm fine with that. Let's move on and after that the world was okay again, you know, 16 17 18 things are good. Yeah, the world is awesome. And one thing that I really loved about react was the official talks twitter.com and you can really find a lot of like great content there that you don't find on react. Yes, or she or so, let me give you free examples. I'm gonna run through this quickly and then get to more weird stuff. So did you know that you actually can use the key prop to remount components? This is a fantastic one. It's it's You don't find this anywhere. Well. There's one place. So what does this mean like short brief example? If you this application, it's very simple has button. You can Generate random ideas and we directly put it on the some component whatever as a key prop and we put this ID that changes but the thing is If we change let's say the content the actual content is EDC and we change it to GHI. What's happening is the component will remount. And like I when I forget this out, I don't know if someone told it to me or so like I was like wow, this is a magic tool this like, I mean, you probably shouldn't use it all the time. But like sometimes it's really handy, you know, if you have someone else's component and they actually screwed up the use effect you can use this to like give it a fresh start and Of course on the official docs, I learned that this actually is occasion to do it's not documented but they think like this is a use case where that's fine. So the best in math bash mentioned that if you have this like main detail situation, it's it's good to use. It's not sure because I think it since it's undocumented. Yeah. I don't know I think people would not get what's happening and then might be weirded out but the good thing is I replied. Hey, why not added to the docs and and thanks to our Angel Dan he realized. Hey, he he's doing it probably. Yeah, and I don't know if you have seen them, but the new debate the dogs they are amazing like they are so good and and they have so many examples and and tutorials that you can go through and they really really like dig in one level deeper and teach you a lot. And it's it's yeah, this is this basically half the solution of like how to use react one more example. There's one more way to avoid use affected David in the morning hasn't shown. And this is like flashing you yeah, what you can do with it is you can run flash sync and then set some sets Date Update in there. And what it will do is we'll actually like commit it to the Dom. But again, it's like before you paint it. So what you can do is you can use it instead of this use layered effect and scroll for example to the last message if you're having a chat application, so it's a quite nice. It comes from Rick Tom. So if you're using react native, it doesn't work, but it's the last little trick. So the main question is like how did David not know about this and the thing is It wasn't on Twitter. It was on YouTube. But as it was a coding session that Dan did yeah that was recorded. And then so someone in my react Workshop told me about it and I figured it out. So I felt obligated to to like put it there. So I asked them. Why are we not adding this to the new beta talks? And he replied there's with a couple of good reasons why you actually don't want to do it so flushing might not be the right tool for the job. But at least now it's there on Twitter and you can find it. Yeah, last example is about like since Rick 18 you can return undefined in your components. And so basically this would be a valid app. This is a validirect component now and when this came out there was this like line, I think it was a paragraph and then a line in the commit lock and so on and I feel like okay, but why I really want to know like why you're doing this to me like returning now was actually completely fine a really enjoyed the The Experience here and and the API and it total sense and there was nothing no reasoning like what the heck is going on. Luckily Ricky a couple of days later on Twitter posted because people were actually asking what's going on he replied. Yeah, we'll answer this and then again a couple of days more later he actually did and when he did do it in the second thing that you start to read Because this is where often the why is explained now the working group so I think and the working group is basically where they like make the proposals but you also find a lot of like content and then in the discussions of the reasoning why are certain things why are API changes the way they are and what what is the the reasoning behind it? So the good thing is like the whole documentation thing was weird, but I think we we getting there like solving in the battle beet detox a Grace a great and the working group is in is amazing solution to understand. Why more So let's move on completely different topic composition. And the composition story in react is also really really weird. It started for me with mixins with you was there when they were mixing? Wow, not that many. Okay. So mixins where it's like thing that you could put in your create class component and in enabled awesome features like angulus, or I think we had to do it because of angular two-way data binding so you could directly connect state to your input and you don't have to go for just like cycle. Yeah. It was It was kind of weird but and actually didn't use it too much but in some cases and we had like many more before mimo a pure and the mix in was amazing, but then something happened another blog post. And what does it mean? Well, it's gone so they figured out like yeah, they think mixing are. Harmful and could buy mixins as we're gonna deprecate them. Awesome. Let's update the code base. We actually go to The solution higher order components and I was totally hype back then like I love them. I was this is exactly at the time where we're like really digged into functional programming. So higher order functions in the all this kind of stuff like wow. The only problem is like if you build large applications with it, it got so convoluted and complicated. It was like basically completely unmaintainable and it was good for Consulting. I got Geeks were like developers jumped off the project two weeks before the release and then you could make good money with it, but maybe maybe not for your own projects. So there was no blog post but at least there's an update to read me a free compose. Where was announced that that yeah, you should not use it and you should move on so we got rid of all the hooks again. Well, almost we still kept memo on photograph memo. I understand photograph. I wish it would just be part of it. But okay. I understand. We don't want to be actually don't know I have to ask some some of them on Twitter and then we learn by forward drive still exists I search for it. I haven't found it. So where do we move from high order components? Yeah, we still have to figure out this composition where we had to figure out this composition problem and then we went on to something that I I really really hated. And that was random props. Oh boy. The nesting there it was so painful. And yeah, I'm really glad we got rid of it and only good part that I remember that that's left of this time. At least for me is like I installed this plugin in vs code that this color rise all my parentheses and brackets because the only way to like manage the convoluted deepness structure of my components back then So we got our savior everyone remembers this hopefully hooks is I mean what isn't what is an amazing about them? Stateful functions who does not want to have stateful functions, you know, it's yeah. You can't Loop them. You can have them conditional. So okay, there's some downsides but Yeah in general. They're pretty good except when you try to explain that to someone like backend engineer that usually has working with stateless functions, which is like the normal default. Yeah, and they are not too happy about it. But then you already very excited about the conversation and tell them about your non-extendable classes that you deprecated with your stateful functions. And yeah, if you then move on to GSX, you basically lost a friend because they don't understand it all what we're doing there. But hooks are great. They are very clear. They should be used in a react function a digital start with use and they should not use conditionally. Well, except on Twitter you learn it's all a lie because you can use use context actually conditional the link will scream at you, but you can you should not and I'm not encouraging you to do it, but you can Okay, so the talks a soft like the complete composition story. I don't know like it feels like I'm happy with folks. I'm I dig it and the new proposal as we just heard also looks interesting. Let's see where we go. But it seems like we're not we're not done yet change is still incoming. Let's move on to something completely different need exports, you know, I love an impact Sports and I love like consistency. I love that all the teams that I've worked with a couple years back where like we all agreed like named exports is the best experience the auto completion for importing stuff is amazing because these code can really like you just start typing it and it can find it in other modules and and automatically Imports your component or your function or whatever. And we had a consistent code base and then reactly as it came along and everything was screwed again, because Rick lazy actually requires you to use the default export. And yeah. By then at this point so basically what happened is like again a lot of discussion in teams. How do we do this? Like do we move everything now back to default exports because when I have consistency or only react components and and and a lot of discussions and but this time you feel like okay the grass must be green on the other side. So you start to look into angular and you start to like which version are they actually using and then you see want to four and you feel like okay. It's the same story. Let's go back. So you go back to react and you dig deeper and you actually figure out You can actually use reactly Easy with named exports. It's just it's very clumsy, but it's possible. So maybe you still have your your discussion about default exports on components and at least in our case, this is what happened. But even if you have to like if you want to Lazy load an external component that is just an index, but at least you can do it. It's amazing awesome. And yeah, but you the default expert still makes sense because I mean if you use next remix, they still want you to do use the default export. So it makes sense to at least stay contest consistent so that that at least but this little trick at least solved my problem in that case so it's weird. But okay. Let's move on next big topic typescript. I love types. I'm a big typescript fan. I love other things more but typescript is great. So let's talk about the react types. Well, how do we type area component? Obviously you it's very clear you have react.function component and and in the type parameter generics you put in the props. That's awesome. But then actually it's too annoying and too long. So you're rather run a use react.fc and I really really enjoy when there are multiple ways of doing the same thing. This is great and I will soon put up a proposal in JavaScript that also adds Alias for function namely fun. Thank you and you can add yours if you want to. Yeah. So this is how you type a react component except when you actually realize that a lot of like typescript experts that are doing react tell you don't do it. Don't do it this way don't use reactors here like, okay. and the interesting thing is The main problem that like, I mean, there's some other smaller issues everyone has their dialect concerns. But like the one thing that comes up consistently is the implicit children. I will explain it in a bit. But basically what they tell you is like you should do this instead. You should just Type the function with like if props is your props and and that's it. Okay, the vastly good. What is the problem then? Well the problem and if you're working with tune yours for example, and you see code base they just do what would everyone else is doing in the code base and then eventually they learn the figure it out there is react.fc so they come up to you and they they have they're really shining they're happy because they they have a proposal for the code base how to improve it. Yeah, and then they found something and then you can discourage them. The only thing that you can do. Well you shouldn't use it and you start to explain it and yeah, yeah and Yeah, you're not lost another half hour on nothing. But the thing is and then this question comes like but why does it existence and then the only thing you can do is just this let's move on to another topic. Yeah. But then the unimaginable thing happened. What happened the with direct 18 types? They also made a breaking change and they removed the implicit children. Wow. I was I was excited. It's like fantastic and I was really really happy. Why is this thing? Why is this relevant? So Let's say you have a component and now we're can use react dot FC again. And you're using children in there. Now, you explicitly have to mention it. I mean you can still make it optional if you want to have optional children, but yours can make it mandatory. So what does this mean? Basically here? I have children in my components. Pretty nice, but if you do this here, so someone is using your component and they're doing this here typescript will scream at them like you need to pass in children. And of course, it doesn't make sense always but if you creating like pop over or model component the whole thing without children makes like almost no sense. So this is where it's kind of useful and especially the other way around it's even better. If you're not expecting any children, you don't do anything with them then you can basically tell hey, I I don't want children if you pass this in like show me an era. So if you do this so good if you do this as someone that is in using this component typescript will scream at you that are don't pass in children. Uh-huh. And this is exactly like my mental model of like a type system. And I mean you can also I feel validated by reading it Wikipedia. The aim is to prevent operations expecting a certain kind of value from being used with values. We should operation does not make sense. Yes. We want to make sure that everything makes sense. Awesome. So this change was amazing. I enjoyed it. Perfect. Let's move on. And a best part about it is they even built the code mode who has ever heard of our code mod or chest cold shift. Not too many people. So basically this is a script that you can run away whole base and it fixes all your braking changes. This is the year and it's it's not actually just regular Expressions, but it works on the EST. So it's actually it's pretty smart. And and this makes it really really nice to use and and that means also like it works like almost 100% of the time it should actually be 100% of the time except you're doing something really really weird. Yeah and what this did so I ran this over my cool piece after upgrading through activating awesome awesome awesome, and then this happened so this group did this basically going from react FC props. We going to react so we do like type parameter. Okay, I can live with that. That's probably the easiest way for them to like move on and fix it. But there's like one little thing that really bugged me. I'm not using children in here. What do you mean you're you're adding props with Children Here? Okay, so must be mistake. Obviously like the cold water is broken or whatever and you start to dig a bit and you see props with children as optional children again. and I feel like Haven't you learned nothing? It's like why why are you doing this to me? Again? It's like at least name. It props with optional children. This would have been like just a little thing. It's just mind it Mighty tiny. Tiny details that that yeah. That I don't have to get emotional about it. You know, it's yeah. So I promise not to talk about use effect, but let's do one more thing about use effect. So we all know you should clean up you use the fact because then it can cause problems now in the future, especially I mean, this is clearly a memory leak, so I want to show you something that I haven't proposed to my team yet, but like I gonna I wanted to do but you know time and it definitely going to do this so I dig them. And one thing that I thought of is like, you know, maybe we can enforce people to actually always write the cleanup effect the cleanup function because then it becomes more obvious that you actually should do it. So I ticked into how can I overwrite the react types? And I found this basically I copied the react types directly from the direct types and I created an index.d.ts file and this allows you to override the react module use effect. And this is basically the signature and the thing that I want to do now is I don't just like remove the option to like not return a function in use effect. So we just take away the void and I yeah, I'll show you in a second what this means and then it was like I felt obligated to like actually fix the naming because I mean come on E everywhere in the dark. It says like a cleanup function and here it's Destructor people will be so confused about this. So let's call it clean up function and let let's actually call it use effect callback and not effect callback. Okay, and what this does if you have this function that you have seen before that doesn't return this use effect that doesn't return a function in the function. This will actually scream at you again. And yes, you have sometimes use effect where you actually don't want to do anything in the cleanup function, but at least in our case, it's cool because they're so rare that I think it would be better. So you kind of force people to actually do it. And yes, they could do this here, but in a code review, this is easier to point out and easier to find and and you can you can find things. So I think this is I don't know if this will will fly but at least I want to try it. You know, I'm I'm having fun patching things. Which makes me I'm over time, but soon we're done one more thing warnings. My love and hate relationship to warnings. So who of us seen this year, you know, you're doing a state updates that is in a component that actually has been unmounted already and so on and I think this is actually useful. I really enjoy this. I like this. This is great. The thing is It's not great if it's coming from a package, you know, because he can't do anything about it. Yeah, if you're ready on the latest version, of course, you can make a reproducible issue about it. And yeah, they are they are and but it's like it's still bugging your console. And I mean, this is a real world situation. We have we have been there for weeks. We run the latest package versions with everything and so on and this was our experience every time trying to debug something with console lock. This was like too warnings. I was like Really annoyed like coming from packages that can do nothing about it. This is where it starts Our God, so Yeah. and then if like okay, I have to do something about it a research a bit and did you know that you can actually patch console log? Love this and once I figure this out actually should have done the adult thing and like talk to my team and this cast with them how to how can fix our warnings and hide them and immediately at least for some time. But then I created this script. This is a lot more fun. So you if you put this in your code base, what what does it do? Yeah, and they You can then copy and paste it later just come up to me and it will send it to a post it on Twitter. So this script overrides console log and after 72 milliseconds, it just clears it out. Okay, this is not perfect. But a good prank is is it should be like long enough the it should be there long enough that they can see it and they're not immediately taking action but Annoying enough that it's that it's like exactly that in not taking action. It's really annoying. This is this is part of a good and of course, I invested more because I really wanted to make sure people don't find it. So this is the same script but written in a way that if this search for console for log or for Clear, they will not find it. Um, yeah, so please take this I put some effort in, you know, please take this and prank your team with it. And if you make improvements, you know, I have some ideas like if the content of the log is longer than you can keep it around for a bit longer and and if it's shorter then then the timer should be short. So if you do this in feel free to come up to me and like we can do some code sharing let's let's Embrace open source. Yeah. So MIT license Feel free to take it. So and then I went back to the adult thing, you know, so actually found like okay, let's talk to the team and we're gonna patch our console log and oh console one and console error and then if I like, okay, I should do something for you as well. And I really need to release something at the at conferences this fall. So I created react reduced stress actually today. We launched 2.0 and what it allows you to do is there's an API you can get this you can input this function. So it's really on npm. It's a thing, you know, you can get suppress console warnings and then you can for hooks order unique key in a list use native driver. This is direct native on set native props. You can actually suppress the warnings. And what does it give you peace of mind in your console? Excellent. So last thing for real who of you use a strict mode. Wow, why? Okay, don't worry just kidding, but What are the reasons so? The first ones are just like ledgery stuff. So okay. We got rid of the latches and stuff already. So while you are here well because of this double rendering and yes, I understand. Yeah, they want to bring in this off-screen thing and they couldn't do the breaking change in between. Otherwise, we had 19. So it's better to do it right away with 18. And yeah, they are and but The problem so that this is basically these are the last two points. The problem is people don't get it. This is like real conversation from a friend of mine and me trying to explain me that react in react 18 now renders twice and he just lost a day and then a couple of swear words that I had to black out and I mean, he was frustrated. He just used his react and it doesn't read the blog post and whatnot and so on these is just the user. and if I was like, I mean create not have Like meat is experience easier, like what like console Locke would have solved this and we have console locks for everything but not this come on. Come on. I mean even if you like if you don't have the death tools, we directly point you like you should install the devtools come on and not not the warning. So this time I actually did the adult thing. I created an issue on the react on Direct repository. It's theirs since a bit more than a month and no reaction, but that's okay. I can live with it because I've reacted you stress. So what I can do is I obviously can create a new feature in react with you stress which so let's import it and then we will see it we get react with react. No, we can't reduce stress as a component from react. We do stress we can edit as a component in there. And what it does is it gives you exactly this warning it tells you like? Hey, there's this double rendering and there's a link to the official docs explaining you why this is actually relevant. And yeah, I hope this helps a bunch of Juniors of yours to like not lose a day or two or three. Let's talk about the features of it because again, I put some love in it comes with snds never heard of it. Yeah strict mode detection system strict mode detection system. I stole or like it's open source. I got directly from the react code base. What are they doing? The catching console locks to figure actually in these tests if you're strict Motors active. So I took the whole thing basically used it in reduced stress. And yeah more love I put in it actually has dark mode support. So the red color on the lock it's different and it has support for modern browsers. So no internet explorers Safari. um Yeah, and that basically leads me to the conclusion of today. What should you take away from all of this weird? Can yeah Mumble Bumble today came up with fear like you should read the new docs. You should read the working group because it's really really helpful. You should definitely like honor me in like pranking your team with a console lock update, and you should install reduce stress. This is profit and about me personally. I I mean react it's really weird in some cases, but I learned a lot on the way and it actually has been quite a right and I will stick around for office you will future and continue to rant and patch things and have fun and make graph. I hope you enjoyed this talk and thank you very much for listening.