I Coded 10,000+ React Components, Here is What I Learned...

[@Just_carew]

How’d you even keep count of every component?

[@PedroTechnologies]

Been coding in react for the past 6 years. Been posting youtube tutorials for the past 5. For youtube I have locally over 400 projects in react, all of them contains an average of 10 components. I code each project twice (one for prep and one for the vid), so thats 8k. I also have been a fullstack engineer for Twitch since 2021, and I for sure coded at least 2k components there hahaha not to mention side projects and stuff :)

[@christerjohanzzon]

@@PedroTechnologies That, is an impressive amount of work and experience regardless! Good job! Now, step aside and let AI take over your job. :D

[@m-g-s-m-18]

hey Pedro, I just wanted to thank for this channel. Today I was reviewing which channels subscribed and yours remind me as a good thing. I used your videos to create some sample project to link them in my CV and they were very helpful. Those helped me to improve my CV and I was able to Immigrate. OMG, just realized today is 18 of month which is exact day I left country 14 months ago. Thanks young man.

[@PedroTechnologies]

Wowww thats crazy! Good to hear :) Happy i was able to help you with that!

[@gppsoftware]

Having both coded and managed React and Angular projects for as long as the OP, there are a few things I have learned: 1) There is going to be a massive tech-debt problem with React very soon 2) React programmers spend large amounts of unproductive time fiddling around with low level boilerplate code instead of delivering results - even this video proves that point - it focuses on the tech, not business deliverables 3) When it comes to scaling in terms of app size and team size, Angular is by far the better choice 4) React perpetuates all the practices that were recognised as bad back in 2010 such as mixing html/css with Javascript and plugin hell akin to 'JQuery plugin hell' of the past 5) No two react apps are structured in a standard way - every one is different because there is no standard like there is with Angular

[@PedroTechnologies]

Great insights! Thankss for this :)

[@AryaN-hz4it]

Yeah, I’ve been noticing this a lot too - especially evident if you’re working in startups. Quick Q: Does Next.js actually help address these shortcomings or is it just another gimmick, far from the level of sanity Angular provides?

[@VarunR-deed]

Yeah, I’ve been noticing this a lot too - especially evident if you’re working in startups. Quick Q: Does Next.js actually help address these shortcomings or is it just another gimmick, far from the level of sanity Angular provides?

[@EUU100]

Pedro in the video the first time you said "this react component" no components appeared on the screen. Thanks for sharing your knowledge 💎

[@PedroTechnologies]

Sorry about that, editing mistake :/

[@DiogoScarmagnani]

I didn't know React doc has an entire section about its rules and best practices. I'll certainly start my 2025 reading this. Thank you for the video and all advices, got a new subscriber.

[@returncode0000]

Awesome, I am a big fan of all your videos, they are all very valuable.

[@PedroTechnologies]

Glad you like them!

[@Pablo-ts9dv]

a lot of basic, important things mentioned, good job!

[@PedroTechnologies]

Glad you liked it!

[@centralcoding]

Thanks from Ethiopia.

[@durgfestivalvibes]

Thanks for the video! Can you please make a video on building a production level React project in which we have the best practices,folder strcuture, custom hooks, remote state management etc. I have been working on react since 2 years but confused about everyhting.

[@PedroTechnologies]

That's a great idea! I can think of a video structure that would teach that :)

[@sanmarchen]

Thanks, Pedro

[@d_andreev]

Great tips! I agree with pretty much everything, separating your business/ui logic in a hook or a service and unit testing it is definitely the best thing you can do for your app. Maybe one thing I can add to this list is just being as minimalistic as possible. A lot of people tend do bloat up react apps, whether it's by adding not so needed npm packages or just these small little pieces of code that don't look big in a PR, bring little to no value and as time passes on infest your codebase. I always try to ask myself/the people I work with, do we really need X, can we get away without Y? The less code the better :)

[@PedroTechnologies]

Good point! I tend to only use external packages if i feel like it will have a significant roi for my project!

[@mrinalg4600]

nice video discussing small details from the experiences make more of these, explaining details/practices of other tech and its workflow patterns deeply -ts, nextjs-mern (full stack projects), industry based

[@preyah2857]

I've worked in a project that home page with sliders , check-in/out dates logic and more are all in a single component , If just the image slider's index state changes the whole page/component will re-render

[@PedroTechnologies]

Lollll i hope it was written a while ago. Legacy code always sucks

[@rojinbijukchhe44]

Thank you :D

[@sandunlasantha]

Your videos really helped to boost my journey 🚀💡 Could you please do a video on tRPC? 🙏✨

[@PedroTechnologies]

Glad to hear! Yeah i can :)

[@vortexdeo4545]

Make a big ass component refactor Video? - Like a mobile screen showing Lab partners available based on package selected and current location - where each partner has lab-tests listed, check for premium, sample pickup cost, overall cost, discount etc - And on choose component - a bottom sheet to select onboarded patient or relative, and then your address(also allow to add address via map), and date-time slot from choose partner slots - Also not to mention - all bottom sheet selections are opening and closing in this fixed order (closing address would open previous patient selection modal with selected patient) - The move to order review screen Applying such principles in huge logic handling on a single screen - becomes difficult

[@fatimaarshad8100]

Good to see you! I love your videos; the way you teach is amazing :)

[@PedroTechnologies]

Glad you enjoy it!

[@TabuHana]

Amazing advice

[@AlwaysWeb]

Thanks for sharing your valuable experience with react. I think global state is a topic that is easily misused by beginners, do you have any tips on how to recognize when global state is needed?

[@Alex.Shalda]

Thanks Pedro!

[@tsdineshjai8565]

Good points !

[@PedroTechnologies]

Glad you liked it!

[@codefinity]

0:55 You're pointing in the air, but I don't see any code. Forgot to edit that in?

[@PedroTechnologies]

Editor made a mistake lol but the examples i show right after explain it. Tbh i dont know how i didn't notice while watching it after the edit :/

[@its_abdu4925]

Hi, can you make a video about how much js i should know to start react? Cuz it seems like a never ending roller coaster. I saw your video, the one from two years ago, is it still valid in todays time

[@ndesimoniche7125]

Love this

[@حسامالغامدي-غ3ص]

ياخي شكرا من القلب

[@psyno1856]

title is like a resume bullet point these days

[@PedroTechnologies]

Ur not wrong lol

[@sujoykrhaldar]

5:51 it should be *client state manager, redux context API zus are client state mang tools

[@john_doe_2231]

which state management library is most popular in the industry ?

[@PedroTechnologies]

Popular is probably Redux but the best is probably zustand imo

[@jssecrets]

Hi Design Patterns 👋😊

[@godofwar8262]

I am building a yt clone full stack one currently working in frontend part and structure matters

[@Mr.QLead1417]

aand , code reviews are crucial.

[@PedroTechnologies]

Ofc 🙌🙌🙌

[@dylannguyen5154]

the thumbnail speaks for itself 🤣🤣

[@aymenbachiri-yh2hd]

thanks

[@alexon2010]

Muito Show, trabalho com React a 10 anos, e no meu caso comecei a criar o meu Hooks de dados com o encapsulamento do fetch com swr, poderia também usar o React Query, mais realmente muda o Jogo na alimentação dos dados.... Um coisa que eu ainda apanho Muito é para entender a logica do Render quanto ao Servidor eo uso correto de Service Works para melhor o desempenho de aplicações PWA, nesse ponto todas Libs ou Frameworks parece meio que um caixa preta.... Por por conta de usar Services Works eu, eu vejo que a logica do Build das aplicações ficaram confusa, já que Organizamos cada vez menor nossos componentes com suas devidas separação de Dados e UI.... mas no build junta tudo e transforma isso em um único Arquivo... não faz sentido mais usar assim com Service Works, streams de dados, http2... É nesse ponto que estou tentando entender mais principalmente para Otimizar ao máximo as PWA

[@svdden_strike]

CAN you please do a MERN stack tutorial. Most of the tutorials are outdated completely for beginners

[@PedroTechnologies]

I have some but will post more!

[@svdden_strike]

@ thanks

[@hardwired66]

More about advance custom hooks

[@teliiz]

cara, top demais!

[@assasionking7882]

Bro can you please tell me that should i stick to react and build more complex projects or shall i start learning next and start building stuffs with it please bro reply i need help

[@PedroTechnologies]

Next and react are the same thing. My guess is you use vite to create your react app right? (or even CRA). Next is just an alternative to that, its like normal react with some seasoning on top. If you feel comfortbale with building projects in react, there is no problem with learning next. However don't keep jumping between stuff, like, don't learn next for 3 months and then try learning remix for no reason. Stick to one and master it :)

[@assasionking7882]

@PedroTechnologies ok thanks bro 👍🏻

[@meekbronsen6668]

You count the number of components you create, what?

[@PedroTechnologies]

Loll i made a calculation! I've been coding everyday in react for the past 6 years (job, youtube, personal businesses). Just for a project for a youtube vid i have to code on average 15 components, and i code the project twice. I have over 400 projects for youtube vids, thats already 12k not counting my full time job :)

[@muhammadhasnat9835]

dumb question, there's a word called estimation.

[@hqcart1]

dude, welcome to the AI age where creating 10,000 components is a casual AI day...

[@PedroTechnologies]

Yeahh loll nowadays everything is getting way easier, but most of these was from b4 2022

[@saraths6923]

angular

[@ashwinsnmv]

Why would you test dumb components? Are you referring to integration tests?

[@PedroTechnologies]

When i say dumb components i mean pure ui components, so no logic. So you would make a testing file for the dumb component and just test the ui. And then you would also make a testing file for the custom hook you made for that components logic

[@IbrahimAbdi_]

Redux really be annoying

[@PedroTechnologies]

lol yes

[@IbrahimAbdi_]

@PedroTechnologies let me just stick to zustand, context api

[@bilalch898]

This is how you can also create 10,000 components easily: Input InputLabel InputIconLeft InputIconRight Just keep going with every component. Like are you serious?? Pretty unrealistic title I've ever seen for KZbin video.

[@PedroTechnologies]

What is the problem with those? Those are components... The title literally says I have coded over 10k components in my life, what is the unrealistic part of that? My github is public lol you can check it

[@bilalch898]

@PedroTechnologies if you created a button in thousand projects, is it valid to count that button thousand times?? Not fair enough.

[@sahed9]

💖💖

[@bitcoinxofficial]

That seems a lot

[@Human_Evolution-]

After 10k components, I learned that AI can do it with 1 sentence of English. (Slightly kidding)

[@dlanyar1251]

paidro

[@sougataghar1179]

10000 isn't possible lol,i believe within 100

[@PedroTechnologies]

I did the calculations 😎 I've been working with react for the past 6 years, i code everyday due to my job + youtube and i write multiple components per vid so it goes above 10k