The Most Hated React Code!

This picture has been floating on the Internet these past few days and has received a lot of criticism from the community. This is part of the Next.js conference that was held last week. A lot of people argue that the code presented in this slide is violating many of the best practices we've learned. In this video, I'll explain my point of view on these arguments and share why I think the direction that React and Next.js are taking is a great direction.
LEARN NEXT.JS
Next.js Tutorial for Beginners: • Next js Tutorial for B...
The Ultimate Next.js Course: codewithmosh.com/p/ultimate-n...
MORE FROM MOSH
Courses: codewithmosh.com
Blog: programmingwithmosh.com
Facebook: / programmingwithmosh
Twitter: / moshhamedani
#nextjs #reactjs #webdevelopment

[@incarnateTheGreat]

I appreciate that your perspective on this was well-thought out and considerate of what the Vercel/Next team has been trying to do. The whole Separation of Concerns principle now somewhat changes because of this ability to work within the confines of the component, which is something that hasn't really been much of a thing leading up to now. Things change, I suppose.

[@JWW_is_cool]

clear, concise, and easy to understand hope you can make such video that talks about some frontend tech in the future

[@AmirnajiRivaz]

Excellent clarification, as always clear, concise & to the point. Appreciate your efforts, keep up creating quality content man⚡

[@AmirGolmoradi]

Dear Mosh, I have learned everything I know so far from your KZbin courses, and I am grateful for your knowledge and expertise. I am eager to learn Java, Django, and NodeJs, and I trust your courses more than any others. Would you please consider updating your courses on these topics?

[@malikgenius4u]

awesome explanation mosh, i am in the middle of your Next.js course second part, and i remember my days of creating APIs in express.js and keeping the frondend and backend separate, this will speed up our development but one need to keep security in place while writing sql queries and do not let things slip away ..

[@akuoko_konadu]

Behold the React taint API is coming 🧙‍♂️

[@eligbuefelix7988]

Separation of concerns goes beyond splitting abstracting out functions. This is only applicable in very small projects and functions that require light computation.

[@lifebyvikk6751]

Mosh, I just want to say you are a good teacher and a software engineer and it makes me sad and jealous when I see you create fantastic courses but specifically for web Devs,how I wish you were on this side of data science and ML.

[@ademineshat]

Great video 🎉 With this we definitely will get a PHP course from Mosh to prove that PHP isn't what people say 😅

[@acodersjourney]

Thank you for being a beacon of knowledge in the vast sea of coding information. Your videos are a lifesaver!

[@nikhilsnayak3473]

This is the exact thing I was looking for some to talk ❤

[@maskman4821]

Great hints and tips 👍👍

[@averythin348]

Clear concise and easy to understand 👍👍

[@whonayem01]

Thanks for clarifying

[@waleedsharif618]

Could you possibly say should we use Create React App or Vite in production ?

[@cloudstrife7083]

Mosh what's your opinion about Javascript and React today in 2023 compared the others technology stack like Java and C#. Net ... I am a sysadmin linux/windows thinking about going back to programming after 25 years (was coding C++) was thinking about a strong year of study 15hr/a day of just JS/React I could reach junior intermediate level but is it still popular and have great career opportunity ? I am asking this because programming will allow me to develop a 100% remote career more easily than manging the cloud or system etc where you contact and have to meet more ppl

[@itsbrod]

Bruh waiting for this course to began

[@sunny_singh_rajput8970]

Hey Mosh, you are amazing and doing great work. I am a developer because of you. I have been watching your videos since the beginning. Please make some videos on Go language. Love You Buddy❣❣(from india)

[@ahnmebnsina381]

Do you have plan to update to server actions in your nextjs course?

[@evan0754]

Hi Mosh What Theme and font do you use in the vs code?

[@user-nd4sh5of2m]

Mosh, you are a great teacher. "Simplicity is the ultimate sophistication", I agree. Continue to make these wonderful courses. Thank you very much.

[@swapnilpatel3337]

It is safe code many people say its bad and bug not if your good developer please check agian because query write in ` ` function argument pass not string whole please check in your code and then say

[@zefikeritinaharry5981]

Dear Mosh, Can you make a PHP course?

[@css2165]

I hope you keep uploading like this. Love from bangladesh❤

[@fransiscowijaya]

your thumbnail just got more attractive, great style 😅

[@patriciorosso4226]

What if I want to unit test that component? suppose theres something wrong with that query and i end up discovering it due to testing... is that fine? i am asking for real

[@corexemelmedia2]

Should there be php, ci4, laravel course ??

[@mouradeljayi584]

Great explantion

[@corexemelmedia2]

Should there be php’s laravel and ci4 course

[@AaronAnnu]

Hi sir . Can you please make a video about manual testing ..??🙄🙄

[@Viyas-es3bj]

hello can you please post an oops related class and interfaces in javascript We're waiting for that.....

[@bullettime2808]

I guess a ton of people don't know about calling functions with template string in js

[@adambickford8720]

Congrats on discovering monolithic architecture; this is how we did it 20+ years ago before REST was the defacto standard. No, not just PHP, everything. Full server-side rendering/state/actions with a little jQuery (or whatever) where it was absolutely needed on the client. The upside to tight coupling is its productive, the downside is that its brittle. If your app is a 1-off you're going to completely rewrite? Great. If it's something that has to last through multiple years, tech shifts and dev teams? Not so much.

[@Sammy2100]

This reminds me of when I used classic ASP (VBScript) with jQuery twenty years ago.

[@alex_chugaev]

All the best practices went out of the window holding hands 😂

[@SeifCookz]

mosh,please reply,you are the reason i mastered python and i am learning html and c++,PLEASE,I LOVE YOU MAN!

[@programmingwithmosh]

That’s awesome to hear! Thank you!!

[@SeifCookz]

i am so delighted to meet my DREAM person!!!!,youve got me through python and c++,you saved me days@@programmingwithmosh

[@minimalsforlife740]

This means no need to use fetch or axios anymore?

[@ScaerieTale]

Spooky. I was literally just learning about how to use Axios last night. Anything that means I have to write less boilerplate is ok by me!

[@giannismentz3570]

Yeah man, this is awesome!!! Let me know when you use this, reply with your production URL, I'd like to ehm... see how good this is on your website... 🤣

[@asadullahaziz]

This is called abstraction. many complex and repetitive things that engineers used to do has been abstracted away in the past. This is just like that and many full stack frameworks will do this in future. If some new devs think that we wont need to create network APIs any more they are wrong. As, Mosh explained programming isn't black and white.

[@PS-dp8yg]

Isn't the whole purpose of creating an API endpoint to decouple the front-end from the back-end? What if I need different clients (web, mobile, desktop, etc.) consuming the same API?

[@programmingwithmosh]

If you need multiple front-ends, then you need an API.

[@PS-dp8yg]

@@programmingwithmosh The example in the video is tightly coupled to React. You'll be stuck with a React application unless you re-write to entire application to use an API to support multiple front-ends (react, vue, react-native, android, iOS, etc.)

[@lord_kh4n]

@@PS-dp8yg dude, just change the sql statement into a Fetch/Axios call and you are good to go

[@itsbrod]

So much exciting 😺🎉🎉🎉🎉❤

[@saeedalobidi4195]

Creat video, I have an observation that when I want to execute the same SQL query for a different application instead of using an API that contains the same SQL query, I have to rewrite that SQL query again.🤨

[@programmingwithmosh]

Do you mean a different front end like a mobile app needing to add a bookmark? If so, in that case yes you need an API endpoint because the second front end is gonna to be a different project using a different framework eg React Native.

[@saeedalobidi4195]

@@programmingwithmosh 💯

[@juniorMr]

The best yutube teacher, I wis i had opportunity to meet you personally

[@anonymous12478]

why are you not using tsx?

[@njongefred]

Please do a course for ruby on rails❤😢

[@p.martin4381]

In my opinion，separation of frontend and backend is a trend，nextjs is aim to focus template rendering，api query and sql query should be done on real backend such as java springboot or Python/Nodejs/C#

[@nurudeenhamzah5011]

GOAT of TEACHERS

[@pedrojunior4516]

Any Rust course in production?

[@yt-sh]

pretty good point!

[@mahmoudhamdy9550]

I want to buy the full stack JavaScript course can I paid by Egyptian pound?

[@mahmoudhamdy9550]

@@LilyKZbinr. please mosh help me to buy this course

[@crod1232]

Anyone else unable to access a codewithmosh course that they bought? It just brings me to the source code :(

[@feelsthevibes1662]

Theme?

[@benemma5602]

don't know what all the fuss is about... server actions are an absolute game changer. The implementation is so clean that I'm starting to wonder why it took so long to write code backend functions that way.

[@adambickford8720]

It didn't, we learned 20 years ago this idea is dumb.

[@IvanRandomDude]

Took us so long? "action" form attribute has been part of standard HTML since late 90s lol

[@Sammy2100]

@@adambickford8720 , yes, we were told it was dumb 20 years ago. It reminds me so much of classic ASP/PHP with jQuery

[@smwnl9072]

I think if you inter mingle code of different concerns, isolated component testing is an issue. But I probably don't know enough about this to comment. Or maybe this was already addressed.

[@LokeshKumar-tk7ri]

Do you think that AI is going to replace web developers

[@VibeThemes]

Server actions makes development faster.

[@kaustav07]

Your VS Code theme?

[@noonenoone5121]

You changed your shirt!

[@binamralamsal]

Many people are ignoring the fact that you can simply put the server code in another file and import it wherever you want. This code was shortened to be shown in the conference. Edit: And I liked how you explained in the video.

[@spacecore2077]

Yup! Also it's perfectly safe!

[@maskman4821]

For example: --- src/actions/add-bookmark.js --- "use server" export async function addBookmark({ slug }) { await use sql `INSERT INTO bookmarks (slug) VALUES (${slug});` } --- src/components/Bookmark.jsx --- import { addBookmark } from '@/actions/add-bookmark' import BookmarkIcon from xxxxx export default function Bookmark({ slug }) { return ( addBookmark(slug)}> ) } 🤗🤗

[@misterbatch4517]

the best online teatcher

[@ionelCristianLupu_]

Finally someone that understands the bigger picture. Thank you Mosh! Best practices are made to be challenged and changed with time in favor of other new best practices. All of those that hate the direction where NextJS is going are just ignorant and they don't want to admit it.

[@raghavenderkuppireddy7158]

Hi Mosh ❤

[@kcsiddhartha]

Why is it live but not live actually

[@binamralamsal]

It's called premiere. It's just a pre-recorded video.

[@jasonliu6321]

I still don't really understand the true meaning and significance of server actions. According to Next.js's official docs, its role is to handle data mutation. But my question is, what is the actual practical meaning of handling data mutation on the frontend? If the data mutation here only covers simple scenarios like SQL, sending email, generating PDFs, then there is not much real significance. Because such scenarios are unable to cover most of the backend development use cases. There are many more complex scenarios that backend development needs to handle. I won't list examples here, because there are too many. So, can someone explain what is the true practical meaning of server actions? If we think server actions can make up for their limitations by calling backend APIs, then I find it even more bizarre, because you can call backend APIs the same way without server actions anyway. If Next.js thinks it can become a full stack framework through this approach, then I feel this vision is unrealistic, because the backend scenarios it can handle are too few.

[@moshfeghhamedani]

Did you watch the video to the end? I’ve clearly explained the role of server actions.

[@shqnz]

Used to follow this guy when he had no beard 😮

[@theintjengineer]

_You shouldn't write SQL there and should use an ORM Tool like Prisma_ I mean, I know SQL. I don't see why I shouldn't write it😂😂 What is the argument against that? Anyways... And if I were to use something else, I'd probably go for Drizzle.

[@navascrisis4626]

"20 yrs ago when I was still coding in Assembly", lol😂

[@okkneha]

❤

[@mehamada1]

Dotnet is all and everything

[@birsingh5388]

Vercel going to make web applications so easy

[@georgezimmer5622]

For only 20$ / month and being vendor locked isn't that wonderful ? Next is no longer a framework it's a product.

[@krishnask3386]

Hi Mosh

[@thekenapp535]

I see laravel livewire in this

[@sauravkumarjha2838]

improved PHP 😄 ?

[@vbtux1]

آفرین موش

[@DamnBoii123]

Woah I didn't recognise you. You got a beard and a moustache

[@umarahmed6443]

🤣🤣

[@thepromaster7868]

I still can't see the difference between programming and coding

[@HeyMr.OO7]

So coding is any lines of code or logic that you wrote. Say, sum of X n Y Programming is to build something useful using coding. Like building a calculator, an Android app or a website.

[@michaelnwuju6368]

Nice take on this, but I still think it's not the right way, it defeats the whole division between Frontend and Backend. Even though it removes the redundancy of writing trivial code, we still need that redundancy to be there to maintain balance. 😂 Now please I'd love to see you do something on cloud engineering. 🤲🏽

[@venkatakrishnanramachandra6325]

Gurunathaaaaaaaaa ❤️❤️❤️❤️❤️🌹🌹🌹🌹🌹🫶🏼🫶🏼🫶🏼🫶🏼🫶🏼🫶🏼

[@user-jx7nu4fo5y]

ماش عشق منی ❤❤❤

[@kasper369]

Goes to show that most of the community does not read the doc and dont know the fundamentals

[@ethereal41]

Not enough people have seen this video. I love what next js is doing and I hope they improve, but if they continue receiving hate from uninformed people, they might just evolve backwards, removing functionality.

[@xXLeGrandStanXx]

[@mahekjariwala3560]

It seems like Next.js is trying copy remix concepts like action method.

[@samueltaub]

With this new focus on software development Everybody should be full stack. The answer if we are front or back will have no sense

[@sethswenson1321]

they probably said the same about development, ops, and security, and look where that got us...

[@guled669]

This is called headache programming, trust me on this one unless you want to go fully bald really really soon don't go down this path.

[@haiffy]

Well he's already bald

[@oyinlolaolasunkanmi]

Your argument isnt valid Mosh. With this kind of school of thought, we will be churning out incompetent engineer who do not understand the true nature and art of software engineering.

[@moshfeghhamedani]

How much do you know about what happens under the hood when a function calls another function? Does that make you less of a software engineer?

[@mehdieskandari5608]

Great

[@mehdieskandari5608]

Eyval Mosh

[@sorcerer2608]

خخ ایرانی هستی توهم

[@lemoniahoffmann8401]

Snake oil salesman

[@ximenescoutinho_]

Hi Mosh