The Most Hated React Code!

Key Takeaways

this picture has been floating on the internet the past few days and a lot of people hate the code that is presented here so in this video I'm going to talk about some of the common arguments I will explain my point of view and at the end I will explain why I think the direction that react and Nyx are taking is in fact a great [Music] Direction my name is Mos and I've helped millions of people Advance their software engineering skills through this Channel and my online school code with.com so back to this picture to give you some context this picture is part of the nexj conference that was held last week now if you're are not familiar with nextjs it's basically a framework for building full stack applications with react on the front end and node on the back end so if you're a react developer you know that you can build the front end using react but to build the back end you have to use a separate backend framework like expressjs d Jango Ruby on Rails asp.net core and so on now with nextjs we can build both the front end and back end within the same project using the same language and the same set of tools now if you want to learn nextjs I have a couple of tutorials here on this channel and comprehensive courses on my website Cod with.com so what are the arguments against this code so here's the code that you saw in the slide here we have a react component called bookmark that renders a button with an icon and here we have a relatively new feature called a server action and that is this function you see here it's called a server action meaning it's an action or a function that gets executed on the server so when this button is clicked this piece of code is executed and as a result a bookmark is inserted into the database now a lot of people are arguing that this is like PHP but it took us 20 years to get back to where PHP was 20 years ago but this is not a valid argument argument because PHP runs entirely on the backend but here we have full power of front end and backend development now the second argument is that this code is vulnerable to SQL injection attacks a SQL injection attack is a kind of attack where a hacker can send SQL instructions to our application and do crazy things like inserting data deleting data and so on now this happens when we build SQL instructions dynamically using string concatenation so in this example we're building a SQL statement for inserting a bookmark into the bookmark table now because we're building this statement using string concatenation a hacker can send this input to our application and change our statement to something like this so in addition to inserting a bookmark they're also deleting all the users from the user table now the way we can prevent this is by using parameterized SQL statements so we Define our SQL statement with parameters which are placeholders for values what the user sends will be inserted into these placeholders so with this technique a hacker cannot change a SQL statement because it's fixed okay now the example that they were presenting at the next year's conference is using versel postgress package this page clearly explains that our SQL queries are constructed with the SQL template literal tag this function translates your query into a native postgress parameterized query to help prevent SQL injections so the argument that this code is vulnerable to SQL injection attacks is invalid now the third argument is that this code violates the separation of concerns principle but what is separation of concerns and why does it matter well separation of concerns is a fundamental design principle in software engineering it's suggests that by separating concerns we can make our code better organized more maintainable and potentially more reusable in this case we have some presentation code like the button and the icon mixed up with database related code so yes this code does violate the separation of concerns principle so to improve this the first thing we can do is take out this function outside of this component so I'm going to cut this code now let's define a function called add bookmark here we should give this a parameter called slug now back to our component here we pass an arrow function and call add bookmark so look the end result is cleaner and more maintainable now we could take this further and move this function at bookmark outside of this module and put it into a separate module but in this case I prefer to keep it here because realistically this is part of the implementation of this component so we are not going to get any extra value in terms of maintainability by moving these two lines of code into a separate file or module however if this component was more complex if it had hundreds of lines of code and if our database related code was more complicated yes then it would make sense to take this function and put it into a separate module the separation of concerns principle doesn't care how we should separate concerns it only suggests that by separating concerns we can make our code better organized more maintained and more reusable how we separate concerns is up to us and we have to decide on a caseby casee basis sometimes different functions within the same module sometimes different modules sometimes different folders sometimes different projects what I want you to take away from this video is that software engineering is not black and white you cannot take a principle and blindly apply it to solve every problem every problem is different so in this example I prefer to keep this function with in this module now the other argument is that we should not write SQL code in our components to start with and that is a fair argument the good thing is that server actions are not tied to this SQL function so here we can use an object relational mapper like Prisma and that's what I personally prefer as well so these were some of the common arguments now let me explain why I think the direction that nextjs is taking is in fact a great Direction so look before server actions if we wanted to implement this functionality first we would have to manually create an API endpoint for adding a bookmark then we would have to handle the click event of this button in our click Handler we would have to use the fetch API or a library like AXS to make an HTTP call to the back end most of the time this process is Trivial and very repetitive now let me take you a few steps back you know that when we call a function the control of execution moves from one place to another but to make this happen some magic has to happen under the hood that is invisible to us we don't have to worry about it these days right I learned this almost 20 years ago when I was coding in assembly now in most applications at some point the front end needs to talk to the back end so far we have been in charge of making that communication happen but nextjs is trying to free us from having to do so just like we don't have to think about how the control of execution moves from one place to another when we call a function so server actions allow the client code like this button to communicate with the back end without worrying about the transport without worrying about the HTTP protocol without worrying about creating API and points using the right HTTP verb like put post delete and without worrying about including the right data in the request server actions are going to take care of all that complexity so we can focus on solving real business problems so that was my take on this code if you enjoyed this video please like and share it with others and also make sure to subscribe to my channel for more videos like this