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

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

Рет қаралды 302,733

Күн бұрын

🚨 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

Пікірлер: 301

@firedawn 2 жыл бұрын

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

@kvncnls 3 жыл бұрын

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

@joshkpatt 3 жыл бұрын

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 3 жыл бұрын

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

@FlorinPop 3 жыл бұрын

Great video Kyle! I learned new things ☺️

@wilsonalvin7606 2 жыл бұрын

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 2 жыл бұрын

@@wilsonalvin7606 click forgot password button

@tino6986 3 жыл бұрын

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

@lavizpandey9957 Жыл бұрын

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

@adam.foster 3 жыл бұрын

Cool tips! Ditch proptypes and go full TypeScript

@Aaronmoreno 3 жыл бұрын

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

@user-qe5vq3dq5f 3 жыл бұрын

Thank you for continuing this series

@WebDevSimplified 3 жыл бұрын

You are very welcome! I really enjoy this series.

@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.

@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?

@nabiisakhanov3522 3 жыл бұрын

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

@RLXified 3 жыл бұрын

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

@NorteXGame 3 жыл бұрын

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 3 жыл бұрын

Broken noob code

@immayurpanchal 2 жыл бұрын

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

@che_coelho 3 жыл бұрын

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 2 жыл бұрын

Dark side of the moon!

@rahulshah4994 3 жыл бұрын

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 3 жыл бұрын

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!

@insteresting 7 ай бұрын

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

@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

@UmerAbbas8 2 жыл бұрын

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

@haraldcarlsten6238 2 жыл бұрын

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

@RafaelPerches 2 жыл бұрын

As always, excelent work, dude!

@MrSanya789 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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).

@nijinnazar4760 3 жыл бұрын

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

@shivanigaddagimath6105 3 жыл бұрын

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!

@bobbyG883 2 жыл бұрын

Thanx Kyle, keep'em coming

@abhijiths148 3 жыл бұрын

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

@shivanigaddagimath6105 3 жыл бұрын

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!

@andrewbarzu6617 2 жыл бұрын

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 2 жыл бұрын

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.

@samanshakya3848 3 жыл бұрын

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

@yuvrajmakkena876 3 жыл бұрын

same here bro

@shivanigaddagimath6105 3 жыл бұрын

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.

@LindseyandCaleb 2 жыл бұрын

Great video. Thank you!

@dharmang 3 жыл бұрын

Really Insightful!! 👌🏻

@akhilbandari 3 жыл бұрын

Great series. Especially for self-taught developers

@shivanigaddagimath6105 3 жыл бұрын

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 3 жыл бұрын

@@shivanigaddagimath6105 Yes I am. You can email the details to akhilbandari9999@gmail.com. Thanks

@shivanigaddagimath6105 3 жыл бұрын

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

@shivanigaddagimath6105 3 жыл бұрын

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

@damienminter1999 3 жыл бұрын

Awesome video. Just what I needed

@brandonyippp 2 жыл бұрын

Thanks for this video, helped me a lot!

@benwen2602 3 жыл бұрын

thanks for spending time to prepare for this

@brunoleandrodasilva6532 Жыл бұрын

Great Video Man!

@mahmoudadel6965 2 жыл бұрын

Thanks Kyle for these nice tips

@friedrichwaterson3185 2 жыл бұрын

So much quality, thank you very much

@DIEZ919191 3 жыл бұрын

Extremely useful information right here!!!!

@eladonline91 2 жыл бұрын

that is a great lesson and toughet me a lot !

@harshilparmar9076 3 жыл бұрын

Thank you so much for all of your efforts ❤️

@shivanigaddagimath6105 3 жыл бұрын

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!

@saitejagatadi9711 3 жыл бұрын

Perfect video Kyle ❤️

@aleksandarhristov5695 2 жыл бұрын

Very helpful! Thanks!

@mehtabahmed6092 2 жыл бұрын

Thank you so much, really helped me alot.

@mateuszkulesza8528 2 жыл бұрын

Pro versions helped me a lot, thanks

@siddharthdeepakbhaipanjwan722 3 жыл бұрын

Because of your videos many of my concepts become more clear

@WebDevSimplified 3 жыл бұрын

That is awesome!

@siddharthdeepakbhaipanjwan722 3 жыл бұрын

@@WebDevSimplified 😀🙏

@jasper5016 2 жыл бұрын

Thanks for your videos.

@madhanr5622 3 жыл бұрын

Great video✌️.keep doing❤️

@alexandervashchuk7795 2 жыл бұрын

Awesome, very deep

@mohamedadnanealkhiati5006 3 жыл бұрын

Amazing video!

@TribalRockGod 3 жыл бұрын

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

@TheSawAndTheCarnage Жыл бұрын

Thanks Kyle! You are a wonderful icon

@WebDevSimplified 11 ай бұрын

Thank you!

@Knuddelfell 3 жыл бұрын

Really helpful 🔥😊

@noelkirkland 3 жыл бұрын

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 3 жыл бұрын

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.

@sergeyplotnikov5031 3 жыл бұрын

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

@akm5303 2 жыл бұрын

Thank you !!!

@StrayKev 3 жыл бұрын

I really like this series

@Jihed 2 жыл бұрын

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 2 жыл бұрын

Probably performance.

@adeete09 3 жыл бұрын

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

@shivanigaddagimath6105 3 жыл бұрын

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!

@irondsd 3 жыл бұрын

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

@sir_brian_d 2 жыл бұрын

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

@xshad3x348 3 жыл бұрын

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

@StanielBG 3 жыл бұрын

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 2 жыл бұрын

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

@veremox 2 жыл бұрын

kyle is a monstaaaaaaaaaaaah thank you, dude! :D

@ahmetsametyuzlu3020 3 жыл бұрын

Great video

@rohangaonkar8912 3 жыл бұрын

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

@shivanigaddagimath6105 3 жыл бұрын

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!

@ASoftwareEngineer 3 жыл бұрын

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

@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!

@ji-d 3 жыл бұрын

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

@9877stevewells 3 жыл бұрын

I love that guitar

@Bobobratwurscht 3 жыл бұрын

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 2 жыл бұрын

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 11 ай бұрын

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

@prasannanaik1023 3 жыл бұрын

You are my best KZfaqr!❤️

@shivanigaddagimath6105 3 жыл бұрын

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!

@zoaybk 3 жыл бұрын

4:59 good tip, thanks

@hongwenli541 2 жыл бұрын

Nice!

@kevinroirigorbasina6039 3 жыл бұрын

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 3 жыл бұрын

No, a setter gets only a callback

@zillboy1591 3 жыл бұрын

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

@anthonyh618 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

@@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

@myadventure4046 3 жыл бұрын

What all are bored in quarantine and learning to code (as a kid)

@codeiha7487 3 жыл бұрын

verry verry nice bro

@neliox_ 3 жыл бұрын

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

2 жыл бұрын

Cool T-shirt!

@b9413 3 жыл бұрын

recommend that please make tutorial on C

@jiaxie5669 3 жыл бұрын

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

@rajatagrawal7016 3 жыл бұрын

do these types of videos more

@Satishkumar-rx7oy 2 жыл бұрын

thanks sir

@siddharthdeepakbhaipanjwan722 3 жыл бұрын

👍👍👍 your a gem 🔥🔥🔥

@WebDevSimplified 3 жыл бұрын

Thanks!

@siddharthdeepakbhaipanjwan722 3 жыл бұрын

@@WebDevSimplified 😀🙏

@youssefmahmoud7062 Жыл бұрын

Thanks

@dr3ik256 3 жыл бұрын

good stuff

@octaviusbytes 3 жыл бұрын

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

@StaticTechnology Жыл бұрын

Love from India 👍👍

@varuns6451 3 жыл бұрын

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 3 жыл бұрын

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.

@AndriiWebDev 2 жыл бұрын

Hey Kyle, you said "we don't need to re- render every single todo we only need to re-render the one with the key that changed" (meant in JSX loop) timeline: kzfaq.info/get/bejne/Zt-qoqST19C6Zp8.html It is help rerender only particular component in DOM, but still react calling each component under hood. React will always do that but if you have some huge or heavy logic for each component you might be do not want that all components makes "components functions". Stopp this innitialization can help memoization. If component pasted in HOC 'memo" or extends "PureComponent" you should keep in mind that all props (especially objects and arrays, e.t.c) should have the same reference between renders on themself. For this use hooks useCallback or useMemo. Additionaly want to say that use "memoization only when it is needed, for instance: could prevent unnecessarly re-renders. Notice: memo(PupreComponent). By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument. Unlike the shouldComponentUpdate() method on class components, the areEqual function returns true if the props are equal and false if the props are not equal. This is the inverse from should ComponentUpdate. DOCS: en.reacts.org/docs/react-api.html#reactmemo @UPDATED.

@mattharrington1095 2 жыл бұрын

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?

@vivekgaur7686 3 жыл бұрын

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 3 жыл бұрын

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.

@leeyahav4754 3 жыл бұрын

amazing

@chip_a Жыл бұрын

wow thanks

@SirSidi 2 жыл бұрын

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.

@frankrossi3524 2 жыл бұрын

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

@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 3 жыл бұрын

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 3 жыл бұрын

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.