Junior Vs Senior Code - How To Write Better Code As A Web Developer - React

🚨 IMPORTANT:
Learn React Today Course: courses.webdevsimplified.com/...
Writing code is easy. Writing clean code, though, is much harder. In this video I take a look at three different React code examples from a beginner, intermediate, and advanced web developer. The goal of this is to show you how a senior developer will think while programming and how they will structure their code to be as clean and well-written as possible.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/N...
Pass By Reference Vs Value: • Reference Vs Value In ...
Derived State Article: blog.webdevsimplified.com/201...
🧠 Concepts Covered:
- How senior developers think
- How to use React state properly
- How to use React useEffect properly
- What to think about when programming
- The differences between senior and junior developers
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:36 - State Mistakes - Noob
01:50 - State Mistakes - Advanced
04:06 - State Mistakes - Pro
06:34 - Effect Mistakes - Noob
10:34 - Effect Mistakes - Advanced
12:21 - Effect Mistakes - Pro
14:27 - List Mistakes - Noob
17:16 - List Mistakes - Advanced
20:10 - List Mistakes - Pro
21:36 - Outro
#NoobVsPro #WDS #ReactCleanCode

[@firedawn]

Great presentation style! Makes it really easy to see the progression from one version to the next.

[@kvncnls]

Thank you so much for this man! I'm currently learning React so this came right on time!!

[@joshkpatt]

I just completed my first React to-do list app without any tutorial today, I found it pretty funny this video in particular came out today and the last example was a to-do list LOL. Great video!

[@bladimirorihuela2012]

Awesome! I have grown up as react developer with the help of this series! Thanks man!

[@tino6986]

Another amazing video! You´re helping me more than anyone. Thanks a lot Kyle!

[@immayurpanchal]

This is the best video I've ever seen on React. Superb Work! Loved it ❤️

[@Aaronmoreno]

this new series is amazing! Would love some more of this, even to just general javascript logic

[@lavizpandey9957]

I was stuck on a bug for a long time and this random video helped me solve it. Thank You.

[@insteresting]

Kyle, your videos are amazingly helpful! Keep up this great work!

[@UmerAbbas8]

Hi Kyle. You are the most amazing tutor on KZbin ! Extremely well thought out content. Love from Pakistan

[@anserwaseem3362]

Thank you so much for the information. I just realized I was changing the state directly inside setState, but my app is running fine!! or maybe I haven't done enough testing. Really love that idea of storing reference of original item inside selected state. Thank you.

[@RafaelPerches]

As always, excelent work, dude!

[@rahulshah4994]

This video is sooooo helpful! I haven't found this anywhere else and I make these mistakes all the time! This is definitely a go to video that I'm going to recommend to all my colleagues! Thanks a ton for this 😁😁😁😁 Super super helpful! Gonna watch this frequently!

[@shivanigaddagimath6105]

Hi Rahul! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers with experience. Let me know if interested!

[@jesuscruz8008]

Im learning react for an associate developer position and this series has been super helpful especially for avoiding common mistakes ive definetly encountered some of these myself. Thanks for the videos Boss :)

[@riiya7928]

Ano company boss?

[@user-qe5vq3dq5f]

Thank you for continuing this series

[@WebDevSimplified]

You are very welcome! I really enjoy this series.

[@che_coelho]

Hey Kyle. Love your work. Video request: Can you take us through a wholesome process of setting up a sign up and login portal, preferably using Node, Express and MongoDB? Perhaps you could also add some JWT and then some email notifications (account created/please verify). Most tuts on this subject are either half baked or do not easily demonstrate how to link this with other personal projects users may be creating. Oh, and favourite Pink Floyd album?

[@plutopulp]

Dark side of the moon!

[@brandonyippp]

Thanks for this video, helped me a lot!

[@haraldcarlsten6238]

Great video! Even though I have done React for quite a long time professionally I got quite a lot to take home...

[@itouchgrass869]

thanks, really clarified some of the concepts for me and I now finally understand why I can’t set state and then console.log it on the next line

[@itouchgrass869]

i have to use a useEffect

[@bobbyG883]

Thanx Kyle, keep'em coming

[@FlorinPop]

Great video Kyle! I learned new things ☺️

[@wilsonalvin7606]

Sorry to be offtopic but does anybody know a method to log back into an Instagram account?? I stupidly lost the account password. I appreciate any tricks you can offer me!

[@jordanpinnick222]

@@wilsonalvin7606 click forgot password button

[@damienminter1999]

Awesome video. Just what I needed

[@dharmang]

Really Insightful!! 👌🏻

[@benwen2602]

thanks for spending time to prepare for this

[@mehtabahmed6092]

Thank you so much, really helped me alot.

[@saitejagatadi9711]

Perfect video Kyle ❤️

[@nijinnazar4760]

This is what I really wanted.😍😍😍 Thanks a lotttttt @webdevsimplified ❤️😇

[@shivanigaddagimath6105]

Hi Nijin! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!

[@brunoleandrodasilva6532]

Great Video Man!

[@mahmoudadel6965]

Thanks Kyle for these nice tips

[@DIEZ919191]

Extremely useful information right here!!!!

[@friedrichwaterson3185]

So much quality, thank you very much

[@adam.foster]

Cool tips! Ditch proptypes and go full TypeScript

[@eladonline91]

that is a great lesson and toughet me a lot !

[@madhanr5622]

Great video✌️.keep doing❤️

[@TribalRockGod]

This is so much effort and takes so much js knowledge just to understand this, plus all of the react made up functions... In vue, state change is not async and makes life 5x better so you dont have to listen for state changes in another function, you use vue jus like regular js, making learning progress so much faster

[@aleksandarhristov5695]

Very helpful! Thanks!

[@LindseyandCaleb]

Great video. Thank you!

[@nabiisakhanov3522]

I mean code that doesn't work isn't noob code it's broken code

[@RLXified]

Agreed. These examples are more like progression from an outline of a code to a more refined version.

[@NorteXGame]

I guess so. But this video is made to promote correct code and show the code that a noob would write, not necessarily just bad-efficiency (but working) code.

[@foxjonesofficial]

Broken noob code

[@MrSanya789]

Hi, Kyle, thanks you for the video! As I understand pro solution for useEffect with useMemo has the same problem as advanced solution. If you want to add new properties to user object you need to update useMemo dependencies insted of useEffect dependencies

[@kingdragmire5082]

Not exactly, the reason including name and age in the useEffect dependencies is not great is because the useEffect is separate from the creation of the object. If this object was created in another file/component and changed there, it’s possible to forget to go back to this file and change it. With the useMemo solution the dependencies are linked to where the object is created so it would be much harder to forget

[@Goshified]

One thing to think about here -- with "pro" tooling set up, we'd probably have an ESLint rule that would automatically catch that you are missing items in your dependency array. This would be something displayed in your IDE; and with other tools, you'd be prevented from making any commits in your repository without resolving these types of issues (and you could go even further by having these same checks be done in CI and prevent builds if errors like this are found).

[@mateuszkulesza8528]

Pro versions helped me a lot, thanks

[@harshilparmar9076]

Thank you so much for all of your efforts ❤️

[@shivanigaddagimath6105]

Hi Harshil! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!

[@samanshakya3848]

Thank you. Your content makes me wanna code when i feel lazy.

[@yuvrajmakkena876]

same here bro

[@shivanigaddagimath6105]

Hi Saman! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.

[@Knuddelfell]

Really helpful 🔥😊

[@andrewbarzu6617]

I think for the "pro" version of the list example you could also wrap the selectedTodo with a useMemo, so that it's not recomputed on every rerender but only if the selectedTodoId changes. This can help with long lists and/or when there are many rerenders that happen in a short span, so that you don't have to find it every single time but only when the selectedId changes.

[@kmsomebody]

That would mean the selectedTodo wouldn't change, if todos changed but the selectedTodoId didn't. todos would have to be added to the dependency array too.

[@free2idol1]

One point to note here is useMemo() is only worth for expensive calculation, otherwise it's just adding more overhead to your app.

[@noelkirkland]

I love your content, Kyle. Next, can you teach us how to do that guitar lick that is all of your video intros? I suspect you recorded that yourself rather than pulling a sample off the web. I like it and would love to see a demo in action.

[@WebDevSimplified]

Thank you. I actually did pull it off the web since I didn't know how to play guitar back then. I still am just learning to play, but I should learn that lick since it is pretty much my signature sound now.

[@abhijiths148]

Wow... Its time to go from Junior developer to Senior developer 😎 Thanks man.🙏

[@shivanigaddagimath6105]

Hi Abhijith! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!

[@akhilbandari]

Great series. Especially for self-taught developers

[@shivanigaddagimath6105]

Hi Akhil! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.

[@akhilbandari]

@@shivanigaddagimath6105 Yes I am. You can email the details to [e-mail]. Thanks

[@shivanigaddagimath6105]

@@akhilbandari Thanks Akhil! I will send you a mail soon.

[@shivanigaddagimath6105]

Hi Akhil. Please check the mail I have sent you and use the link to connect with me on LinkedIn. Thanks

[@jiaxie5669]

Thank you so much! That's what I am looking for a long time. Very appreciated!

[@jasper5016]

Thanks for your videos.

[@StrayKev]

I really like this series

[@TheSawAndTheCarnage]

Thanks Kyle! You are a wonderful icon

[@WebDevSimplified]

Thank you!

[@sergeyplotnikov5031]

Спасибо за годный контент! Thank you for good content!

[@siddharthdeepakbhaipanjwan722]

Because of your videos many of my concepts become more clear

[@WebDevSimplified]

That is awesome!

[@siddharthdeepakbhaipanjwan722]

@@WebDevSimplified 😀🙏

[@Jihed]

Hey ,thanks for sharing. In the official documentation the examples are always using setState( couter ) directly. Do you have any idea why they didn't mention the function version instead ?

[@niallmurphy2163]

Probably performance.

[@kevinroirigorbasina6039]

Hi Kyle, Thank you for your posting these kind of videos. I Just have a question about State Mistakes. Instead of a callback that takes in the state before the change, can I use an async function and await for that state change instead?

[@xshad3x348]

No, a setter gets only a callback

[@xshad3x348]

For the last example, in case of a lot of nested data in arrays there is the best solution, IMMER! :D

[@mohamedadnanealkhiati5006]

Amazing video!

[@veremox]

kyle is a monstaaaaaaaaaaaah thank you, dude! :D

[@alexandervashchuk7795]

Awesome, very deep

[@efisirify]

Hey Kyle. Thanks for your great channel !!!! Is your full react course is up to date with latest react version (18) ?

[@WebDevSimplified]

It is currently not up to date with React 18 but I am working on an update. The course is still up to date with things like hooks thought. React 18 doesn't change too much about React and really only adds a few niche things.

[@efisirify]

@@WebDevSimplified OK, i understand. May you grant me a discount code for the react course? Thank you in advanced, Appreciate your work!

[@zillboy1591]

thanks, now no mistakes in "useEffects", useMemo is quite nice

[@akm5303]

Thank you !!!

[@ji-d]

무척 도움이 많이 되었습니다. 리액트 처음 슬때 많이 실수하는 것이네요

[@ASoftwareEngineer]

last Pro version of video, the second useState should have a default right? just like what you said from previous video

[@b9413]

recommend that please make tutorial on C

[@prasannanaik1023]

You are my best KZbinr!❤️

[@shivanigaddagimath6105]

Hi Prasanna! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!

[@StanielBG]

Thank you for helping me fix the annoying warnings "React Hook useEffect has a missing dependency" and "A component is changing an uncontrolled input of type undefined to be controlled". Very helpful video series. Keep up the good work! ✌🍻

[@Jonathan-lg1xw]

They might be annoying, but those warnings are there for a good reason :)

[@LorenzoEnzooey]

Your videos really help developers, youre awesome dude

[@neliox_]

would Pro useEffect example work with useCallback as well as with useMemo?

[@adeete09]

Please continue this series with next on angular and node.js

[@shivanigaddagimath6105]

Hi Adeete! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!

[@zoaybk]

4:59 good tip, thanks

[@techiesrikanth2447]

Thank you, for your amazing tutorials.

[@octaviusbytes]

20:10 how would you implement this idea using the useRef hook?

[@vivekgaur7686]

Hey, thanks for all the videos. Can you suggest something to build by using twitter api's with mern stack not clone type but anything useful with twitter or any other platform apis

[@shivanigaddagimath6105]

Hi Vivek! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.

[@9877stevewells]

I love that guitar

[@Bobobratwurscht]

For the pro version of the List example, it would be more efficient to wrap the selectedTodo inside a useMemo: const selectedTodo = useMemo(() => { return todos.find(...) }, [selectedTodoId]) That way, we have no unnecessary reassignments on rerender when the selected todo didn't change

[@bluesbr09]

I’m late to the party, but yes, this is the proper way to do it. I realized I’m using the alternative (suboptimal) solution (DO NOT DO THIS): const [selectedTodo, setSelectedTodo] = useState(); useEffect(() => { const newSelectedTodo = todos.find(…); setSelectedTodo(newSelectedTodo); }, [selectedTodoId]); It’s suboptimal because changing the selectedTodo triggers TWO rerenders instead of one. Once when selectedTodoId changes, and another when selectedTodo changes. State changes trigger rerenders! So your solution is better because it uses useMemo, which does NOT trigger rerenders when it changes! I’m going to replace my code with yours right now! :)

[@adityaanuragi6916]

If you check his blog article on the derived state he actually mentions this However he said that since it doesn't take too long it isn't necessary and can slow it down by more memory usage However if it's an incredibly long array then yes it's worth it ig

[@denilsonvelasquez3902]

Always clear tutorials. Keep it up

[@adrienfauquet6842]

Clear and concise, nice video !

[@winklerrr]

6:00 in the pro version, where does the currCount come from?

[@eroscoe92]

Can someone please explain how he derives the currCount from the count variable? I don’t see currCount being instantiated, or the count variable being passed into the onclick..

[@irondsd]

Oh, come on. Advanced code is the code that barely works and pro is the one that actually works? Really?

[@sir_brian_d]

And noob didn’t work at all. Lame

[@sideshowlol]

@@sir_brian_d That’s actually the point. Perhaps it would have been clearer if Kyle had titled them: “Good“, Bad” & “Ugly”!

[@jordanski5421]

silence nerd

[@frankrossi3524]

Would a different "Pro" solution for the Effect mistake would be to lift the `user` object to the component state level? You already are updating the `user.name` via `setName()` anyway. This way your component has less dependencies and doesn't need to introduce the concept of `useMemo()` The only difference with that solution would be that this component in theory would be able to modify the `user.age` if you were to write something like `setUser({...user, name: 'foo'})...when in reality that piece of data was provided as a prop so maybe it should be treated as immutable? Honestly not sure... I like the readability of just leveraging `useState()` and not introducing a 3rd type of hook

[@mattharrington1095]

Correct me if I'm wrong but would it not have been better to explain the reason why useEffect() is giving the correct value is bc after calling the setCount Func, it triggers the Counter function to run again after the last useState was triggered and thus you're getting an updated state of count?

[@omarelgnn7344]

How You Opened The Console In Separated Tap??

[@rajatagrawal7016]

do these types of videos more

[@visionl.3754]

It was phenomenal. Though on the list part, I had a question in the pro section, where at the time of selectedTodoId we are using a null useState() for the initial value, would that make the uncontrolled thing to appear? Really great video, I hope more content keeps coming!

[@gustavoshigueo]

No, that only happens when the value prop of an input/textarea goes from null/undefined to something else Since selectedTodoId is not an input value it doesn't cause this error

[@waqasalikhanrajput]

Hey Kyle, I lost the link to your react course. Can you please share it. Thanks

[@rohangaonkar8912]

Perfect way of teching. We are lucky to get this content free

[@shivanigaddagimath6105]

Hi Rohan! Are you looking to explore web development job opportunities currently? We are a web development company and looking for developers. Let me know if interested!

[@aadarshktofficial]

You can dependency list for useMemo but not for useEffect ?

[@kevintran7085]

Maybe it's a dumb question. But at 19:00 (talking about the importance of keys), I thought all components re-render if the parent's state/props changes. Does adding "key" really stop it from re-rendering?

[@arie7135]

Thanks! if - setCount(currCount => currCount + 1) is asynchronous, how can I be sure that setCount(currCount => currCount + 1) in the next line get the up to date currCount ?

[@dealloc]

So first off, the setter is not asynchronous, but is scheduled by React (currently only in event handlers, but may change in the future). In order to always be in sync with each render of the component, you can use `useEffect`. In order to only "filter" for specific values that you want your effect handler to be called on, you can pass dependencies (an array of values) to useEffect, so that you don't need to run your effect more often than needed. Think of the dependencies as a way to say "I want to stay in sync with these values". This encourages separation of concerns, and allows for greater reusability.

[@anthonyh618]

Great video. Really helped me understand what level my react code is at... One question: the main point for using UseMemo was because it could be a pain to have to remember all of the properties in user. But from what I could tell, you would still need to remember the properties and make sure they’re in the useMemo dependency, right??

[@rishabhanand4270]

Agreed. I believe he mentioned a solution to a different problem. Although the problem he mentioned can be easily solved by using destructuring. setMyVar({...oldMyVar, property: changedValue});

[@dreamyrhodes]

And also as I already wrote in my own comment, how is useMemo different from two useEffects and one useState for user? So I could do the same with one useEffect trigger on [name, age] that then setUser({name, age}) and the other, with console.log(user) trigger on [user], or? What's useMemo doing differently here?

[@gustavoshigueo]

useMemo isn't really for the sake of remembering the properties, it is used to help you keep an object's reference after a render. It complements useEffect in the sense that you don't have to (in your effect) somehow verify if the properties *actually* changed or just the reference If the properties don't change, useMemo will prevent the effect from running in the first place

[@gustavoshigueo]

@@dreamyrhodes the problem is that having an effect trigger on [user] without useMemo will trigger on every single render, because it checks for object reference and not value It doesn't really become a problem until your object is very large or your component is really complex but it can become a performance issue

[@bunnybloods768]

Bro, While Using anchor tags,we cant use # symbol .it gives warning and we cant use empty too.

[@varuns6451]

I see some improvements, on the Pro part of the list code. As the reference to the selectedTodo will change for every render, for a large list the find method may cost resource. We can add useMemo to it with selectedTodoId as dep. Pls let me know if I am wrong..

[@shivanigaddagimath6105]

Hi Varun! Are you looking to explore web development job opportunities currently? We are a web development company and looking to for developers. Let me know if interested.

[@SirSidi]

18:17 i think it is not necessary to create new value in the new array.. since react will only check whether the state value itself (which is the array has changed) and it would not care about the elements inside of it.. and array.map create a new array.

Cool T-shirt!

[@siddharthdeepakbhaipanjwan722]

👍👍👍 your a gem 🔥🔥🔥

[@WebDevSimplified]

Thanks!

[@siddharthdeepakbhaipanjwan722]

@@WebDevSimplified 😀🙏

[@viponordic4241]

Had no idea of the arrow function in useState

[@cassiodev]

Hi kyle, this video is very good, thanks and continue this series, please. :-)

[@ahmetsametyuzlu3020]

Great video