Is this the perfect React app? - Code Review

Join The Discord! → discord.cosden...
Repo → github.com/nz-...
Welcome to Code Review!
This is a series of videos where I review code that you send me or that I find online. I review the code as I would when I work with my clients. You will see how a senior developer looks and thinks about code in a variety of scenarios, learn about best practices and how to do things the right way, and learn how to become a better developer overall.
Enjoy!
Darius

[@InfoVerseNetwork]

It's a fairly big and complex codebase, if he can code this clean and maintainable without typescript, it's even more impressive 🔥

[@cosdensolutions]

Fair point!

[@tusharghildiyal6814]

Thank you so much the owner of repo and Cosden for this ! Altho i was disappointed to not see typescript being used, but the code is clean and easy to read. got inspired and learned a lot.

[@cosdensolutions]

I feel you with ts, but yes otherwise 10/10!!

[@OnlyGoUpW]

I really found this help full , i hope you make a series of videos reviewing some codes like this , thanks for the information you did make my day ❤

[@mounis]

Putting your access token in the local storage makes your site vulnerable to csrf and xss. The best practice will be to use cookies for authentication.

[@theSageScriptByGD]

why it passes the userData as props when it could have got that data inside the component itself?

[@SurfsUpSeth]

Would it make sense to move the useEffects in app container into seperate hooks that way you can clearly see what each one does and they aren’t all in the app container?

[@PranayKotapi]

tbh, its not that clean or good - relative imports are all over the place - a complex codebase can undergo a lot of refactors - using aliases for paths is always important in such cases

[@espresso-byte]

Absolutely love code review series! 👍

[@emmanuelezeagwula7436]

Damn once I saw this code structure I have a lot to learn

[@cosdensolutions]

you got this 🤙

[@Herxh428]

I am working on similar structure everything is so well organized and we are using ts as well.

[@flwi]

Nice! Looks like a great codebase where a lot of thought went into structuring it cleanly. Too bad it's not typescript. ;-)

[@kapobajza3708]

Honestly this code has a lot of unnecessary boilerplate stuff, which doesn't make it that good. Having a Home, Profile and similar pages which will only render another component is inefficient, because its purpose is to just make you jump one more step or drill down deeper. I mean it would make sense if the same component rendered inside of the Home page is being used elsewhere, but what's the purpose of the Home page if it's only creating a useless abstraction? You should be careful about abstractions, because you can easily get lost in your own code if you have many of them. - There are a lot of useEffect, setLoading(true), setLoading(false) cases. Wouldn't it be easier to extract that to a standalone hook, or better yet use something like RTK query? - Why has the store been put inside of the state of the component? It's unnecessary and it can easily make your code more complex and your app less performant if you're not careful enough. - 2:24 const LIMIT = 10; should also be defined outside of the component

[@DavideFicano]

the project doesn't use ESLint at all, for me this is very bad, the "let vs const" situation would be easily found and fixed with the right eslint rules

[@cosdensolutions]

Yeah agreed

[@ride.withzero]

I really enjoyed the video! As a junior web developer, I appreciate your advice to learn React despite the negative feedback that some users have given it. I'm a little confused as to why people talk negatively about React, since I'm not very familiar with the "dev culture". It would be great if you could provide some guidance to help clear up any confusion. Thank you!

[@cosdensolutions]

People will always find reasons to hate it. I'm telling you here, React is a solid choice career wise. So I would just focus on learning it and ignore the whole wars they're having. It's what I do! ☺️

[@dixztube]

Here’s what I’d say. React has what you might broadly classify as 3 versions: classes, hooks, and server They are each distinct and you’d not be stretching the truth in suggesting that they almost feel like different libraries. This can cause a lot of push back. This is to say nothing about the debates within each of these versions and between them. Id argue the biggest problem with react is the same as the other libraries and frameworks. They abstract the actual knowledge of how any of these underlying parts work so far away that you could legitimately be employed as a web developer and have no idea how web software and the surrounding architecture and environment work. Go years even without having an idea beyond reacts apis. This to me is it’s biggest problem but that’s more personal. If one chooses ti learn these things by study or doing projects for experience, then react is cool. It’s awesome. But it has a bunch of problems that may or might not be a big deal for your personal journey. I’ve got a medium size project in react and got pretty comfortable and effective with hooks and functional components. I learned during the class era, worked in hooks era, and am now annoyed by server era and might not use react for my next project. A very serious one. But I also don’t feel bad about using react. It’s got a lot of broiler plate and it’s rendering logic and handling of things could always been improved. Maybe it’s even trying to do too much now. I don’t know It’s good for a job. Not great for a great experience. But it’s good for a job and to do a job. But I do find myself disinterested in js on the server vs other languages like go and rust … but I’ll learn the new way of doing things… gripe about it and might use it again if I wanna framework that uses it (like next). I wrote this too after smoking so it might not make proper sense lol

[@samking618]

remember there are only two types of programming languages/frameworks/libraries: The one which everybody hates and the one which nobody use!

[@elson_correia]

I spotted numerous flaws. Where can I add my CR comments?

[@haochen816]

Thank you so much for this video and the owner of repo, it helps a lot! Btw, can I know what is the extension you are using that make the top wrapper name/function pinned at the top? Thanks!!

[@cosdensolutions]

It's sticky headers option in vscode, no extension!

[@haochen816]

I haven’t discovered this setting before. It’s so cool. Thank you~ I'll keep following your channel!! It helps a lot!@@cosdensolutions

[@rickyrozario1577]

Only thing missing was TypeScript

[@imornar]

To be honest there is so much wrong with this app, cannot believe that dumping server state in redux is still a thing, jeeez...

[@cosdensolutions]

I disagree

[@nawazishali274]

Please make video over protected user role base routing in react js

[@jorgericaldi6438]

why [posts] is a good idea to have as a dependency? it is not a primitive value

[@nickolaki]

Bad practice to store auth info in localstorage.

[@rownokmahbub]

I don the front end of this website 😁

[@thelazycoder64]

I'll love to rebuild this using and I'll want you to review it

[@jonasj2627]

Does anyone know a perfect nextjs 13 app like this? I would like to learn from it.

[@MohammedShibincp]

Is the useSyncExternalStore important in react hooks ?

[@cosdensolutions]

great question! Haven't looked into it too much yet, but I plan to and make a video about it :D

[@sebastianmihaiprisacariu8975]

Great content, but I can not say that not using a framework is react best practices.

[@dhruv7827]

Hey, so I have a question. Which is a better practice : storing authToken in local storage or cookie and why?

[@cosdensolutions]

secure cookie is better, it's harder to manipulate on the client

[@dhruv7827]

@@cosdensolutions Thanks!

[@dhruv7827]

@@cosdensolutions Are there any better alternatives that you yourself use?

[@madsfrost9464]

Where is the TypeScript?

[@cosdensolutions]

it's there, it's just invisible 😅

[@SingajogiSudhakar]

Hey Bro, i'm building one application in reactjs, how i can reach you for reviewing that app

[@cosdensolutions]

discord! link in the description

[@emiralabuga9451]

Hey, what is your vscode theme?

[@cosdensolutions]

Material theme darker

[@sd4545sdf]

perfect app with a few thousands lines of redux lol

[@swaniketchowdhury]

How do I submit a app for review?

[@cosdensolutions]

on the discord there's a channel for it!

[@nawazishali274]

Nice🎉

[@iamilyes]

why is he storing the auth token in local storage !! is this safe/okay ?

[@cosdensolutions]

It's not the best but it is what it is, I've seen plenty of apps do that

[@jazzdestructor]

well you can store it in redux but after refresh its gone, most ecommerce apps use jwt and store it in local. unless the secret key is somehow hacked it is not a big issue, but might need to make sure that somebody doesn't take the token and ping server using postman etc. that can be handled by devops or backend by allowing only specific endpoints to send requests.

[@icoderdev]

❤👌

[@AhmadMughal1]

As far as i can think this was a project which was done by a youtuber and the only changes i see so far is the branding of the product so i wouldn't actually credit the user for writing this code as it is mostly just copied over from the video.

[@cosdensolutions]

hmm?

[@AhmadMughal1]

@@cosdensolutions oddly similar to this kzbin.info/www/bejne/gWm8dn-IorqVa9Esi=nXxlfku3PQ1JgKJx

[@nzm_1]

Looking at the source code, it doesn't seem like it was copied from an 8-9 hour tutorial video. It took much more time than that.

[@AhmadMughal1]

@@nzm_1 the UI was just eerily similar and the structure was a bit too might have been a mistake on my end.

[@jwbonnett]

There is no such thing as perfect, there is no silver bullet.

[@joseeavr]

to be honest, i dont think this react app is perfect. it noticed many anti-patterns

[@beachneosculpordwarf]

This is like 2018 - 2019 grade react 💩... U literally will be fired if u write this in 2023

[@ND-bn]

So, people used to write 💩 code in 2018/19? 🤔

[@beachneosculpordwarf]

@@ND-bn 1. If you write like 2018 - 2019 grade react, then it is considered 💩 in 2023 2. 💩 code was written in 2018/19 3. Therefore, all code from 2018 - 2019 is 💩 This is a fallacy because there could be other reasons for code to be considered 💩 in 2023 that are not related to the practices of 2018 - 2019. Just because some code from that period is considered subpar in 2023 doesn't mean all code from that period is subpar You better of typing the following commands: npm install -g @angular/cli ng new my-app Than writing a redux without typescript based app - with custom handling of server state Side Note: I don't watch this channel, but assume this is beginner focused content, thus this is a bad advice -> I can give u 3 better real production open source React repos on top of my head if u really want to learn some production grade code. 1. "Make Ur Own Framework" - github.com/Ajaxy/telegram-tt 2. "Subdue draggables" - github.com/excalidraw/excalidraw 3. "Classic Chat Case" github.com/RocketChat/Rocket.Chat 4. And many more.. My examples are complex, but for a right reason - figure why this one is bad

[@cosdensolutions]

I disagree

[@zackaryleitzel9118]

i agree with this

[@andreicatalin7]

And why is that? Give some reasons...😞

[@onta.nicolae]

what vscode theme is this?

[@cosdensolutions]

material theme darker

[@onta.nicolae]

@@cosdensolutions thank you

[@cosdensolutions]

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

[@webcodeuniversity]

I think putting store creation inside an effect doesn't make any sense, there's no need for that, just create the store outside of that component (import it or above the file), then inject it into the provider, apart from that it seems a good one

[@Vagabondi404]

lost 20 iq watching the thumbnail

[@cosdensolutions]

😅

[@cbijay]

There is no test case. Also we can use absolute path for import which is missing in the codebase

[@isaacjon]

how can i achieve this kind of clean code and architecture compared to my current shit code ? how do i imporove myself

[@cosdensolutions]

Time and practice! Use this code to learn from and try to implement piece by piece

[@yajraarserotsejay1674]

Im inspired to create my own small social media app too. Im a mid level fullstack developer who wants to be senior soon

[@cosdensolutions]

do it! social media app is exactly what brought me from mid to senior

[@alexandernortung9365]

Honestly the code was fine, I feel like you hyped it up a bit too much and it wasn't even in typescript. at 6:52 you say that we should use useMemo otherwise it will invalidate the memo, and that is not correct. useMemo will make sure you are using the same reference to the array in this case.

[@cosdensolutions]

might be fine to you and me, but compared to the code I see daily, this is the gold standard. The only thing missing here is typescript, otherwise it's a 10/10 so yes I will hype it up

[@joemignano]

The wording here caught my attention, too, as I first kind of heard "you need to use useMemo() with memo() in order for memo() to work (generally)," but it sounds like Darius is right here that the of the memo() on the PostToProfile component is "invalidated" in this situation because the `posts` array is reset and hence mapped through again in each re-render (...I'm pretty sure?). @cosdensolutions, In a different situation, if the MemoizedPostOnProfile component was still wrapped in a memo() but, instead of being mapped through directly in the UserProfile component, it was, say, mapped through in a separate PostToShow component which had the posts as a prop and itself was memoized with memo(), wouldn't that have the same effect without using useMemo() at all?

[@Nonamedsejennsyueehzv]

Watch video + comments as well both are helpful - this comment is advice for me for future reference

[@abhishekcode]

Sir please make a video of MERN full stack app of e-commerce site❤..From basic to advance

[@seekheart2023]

I am not a fan of export default

[@joseeavr]

for components, i won't but for ts files, it is fine.

[@viophile]

TypeScript not used, not good.

[@cosdensolutions]

agreed! but all things considered, it's still a great app

[@tusharghildiyal6814]

i was about to say the same. no real world is app is made without typescript these days. but i liked the code though. its clean and concise. Learned a lot !

[@avivshvitzky2459]

I worked in 4 starups, none uses typescript. 1 is a unicorn@@tusharghildiyal6814

[@vishwasrv]

All the idiots here knitpicking on the code, for what its worth , its pretty good and understandable 😁, its good enough code thats worth to ship 🚢

[@cosdensolutions]

people nitpick on everything, which really shows insecurities on their side. this code is top quality

[@vishwasrv]

@@cosdensolutions I totally agree 😇

[@onta.nicolae]

can you do a video on your vscode config? 🙏