---
title: 'The Most Hated React Code!'
source: 'https://youtube.com/watch?v=B5Kh0kZ-gA8'
video_id: 'B5Kh0kZ-gA8'
date: 2026-08-05
duration_sec: 491
---

# The Most Hated React Code!

> Source: [The Most Hated React Code!](https://youtube.com/watch?v=B5Kh0kZ-gA8)

## Summary

This video addresses the backlash against a code snippet shown at a Next.js conference, which uses server actions to insert a bookmark into a database. The creator, Mosh, defends the code against common criticisms, explains his perspective, and argues that the direction Next.js is taking is beneficial for developers.

### Key Points

- **Context of the Controversy** [00:01] — A code snippet from the Next.js conference sparked criticism online. The video aims to address common arguments against it and explain why the direction is actually great.
- **Introduction of Next.js** [00:15] — Next.js is a framework for building full-stack applications with React on the frontend and Node on the backend, allowing both to be built in the same project with the same language and tools.
- **The Code in Question** [01:12] — The code shows a React component 'Bookmark' that renders a button. It uses a server action, a function executed on the server, to insert a bookmark into the database when clicked.
- **Argument 1: It's Like PHP** [01:43] — Critics say this is like PHP, but the argument is invalid because PHP runs entirely on the backend, whereas this code combines frontend and backend development.
- **Argument 2: SQL Injection Vulnerability** [02:14] — The code is claimed to be vulnerable to SQL injection. However, the Vercel Postgres package uses parameterized queries via SQL template literal tags, preventing such attacks.
- **Argument 3: Violates Separation of Concerns** [03:43] — The code mixes presentation and database logic, violating the separation of concerns principle. However, the principle doesn't dictate how to separate; it's a case-by-case decision.
- **Improving the Code** [04:12] — To improve, extract the server action function outside the component, making it cleaner. Further separation into a separate module is optional based on complexity.
- **Alternative: Using ORMs** [06:06] — Server actions are not tied to SQL; one can use an ORM like Prisma, which is the creator's personal preference, addressing the concern about writing SQL in components.
- **Why the Direction is Great** [06:19] — Before server actions, developers had to manually create API endpoints, handle click events, and make HTTP calls. Server actions abstract away this complexity, letting developers focus on business logic.

### Conclusion

The video concludes that despite criticisms, server actions in Next.js represent a positive evolution, simplifying full-stack development by handling transport and API details automatically.

## Transcript

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
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
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 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
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 others and also make sure to subscribe to my channel for more videos like