Too many useEffects! - Code Review

Join The Discord! → discord.cosdensolutions.io
Repo → github.com/nz-m/WordSage
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

[@PaulSebastianM]

That was a good lesson but one thing to keep in mind when thinking about removing a useEffect hook is whether the effect needs to run after the DOM has settled and the Component has finished mounting. The only reason to use a useEffect hook is to perform actions that are outside of the normal Component life cycle. Think things like interacting with the world outside React (web platform APIs, network, timers, listeners setup, etc).

[@kisandro]

Great content and didatics, i'm experience developer but only 6 months on react, your videos is helping me a lot. Thank you

[@menaaziz27]

This is all we need to learn as junior React developers! Thank you for this amazing content keep it up

[@cosdensolutions]

much appreciated for the kind words!

[@supermike6519]

You learn the most when you refactor code(your own or others)! Very helpful!

[@felipecabreira4321]

Amazing videos man ! It's helping me a ton! 🎉 Keep up the great videos/reviews and energy :)))❤🎉

[@ahmedfoda9823]

your videos help me conduct better code reviews with my team, I'm a junior but i'm also responsible for the code of people in my team as i have the most experiance in the team, Thank you so much for this great content pls keep it up♥

[@cosdensolutions]

Will do, and congrats for that position! You'll learn so much and grow into a great developer

[@ahmedfoda9823]

@@cosdensolutions thanks brother

[@deepakkashyap6538]

Great video, that's what a God level Sr react developer would do, make things more efficient and organise code effectively...Great going serr 👌 . . Ps. Get well soon 🔜

[@cosdensolutions]

many thanks! my eye is 100% now :) not like that stopped me anyways hahaha

[@avinashgodvin9900]

Very Informative , please keep making code review videos :)

[@cosdensolutions]

Will do!

[@adiitechnology]

Bro you are the best programmer that i ever seen . Would you mind sharing your experience? when did you start coding? How many years of experience you have in react? Thanks in advance for your response

[@cosdensolutions]

I have a video on that actually! You can check it out :D

[@0x3334]

Thanks for the video, and in general for the code review series! Any tips for when using a more declarative approach? For example, using (react) query this pattern of imperatively fetching data is discouraged, but I find that using effects for manipulating that data can also become less readable when you come back to your component 5 months later.

[@cosdensolutions]

Yeah I would agree that using RQ is better, but I've done also a lot of fetches in useEffects throughout the years before RQ existed so I like both! As for tips, the best tip I have it so extract things into separate hooks/components so that it's easier to work with. Much easier to work with a file that has 50 lines and 2 functions, than to work with a 500 line component that is doing 10 different things

[@gouravchouhan1790]

Wohhhh man, great video, loved the accent ❤

[@jbaptista960]

amazing content, good job friend!

[@user-wr9gz1gr3u]

Bro, awesome stuff, it's just as a vim user I cannot comprehend you using vim motions while using the mouse, choose one!

[@cosdensolutions]

lool dude I'm teaching and showing stuff. I need the mouse for that, otherwise it's vim

[@sametsahin6193]

Hey first thank you for the great Video, i got a question on 9:15 the useeffect takes words as dependency how do u handle the Re-render in case words change? Am i missing something

[@cosdensolutions]

if you really need it, then yes you would have to put back the useEffect to run when `words` changes. However in this case we didn't need that. Words was in the dep array only because the effect used it as a variable inside

[@sametsahin6193]

Oh okey thank you for the content keep it up.

[@tubebedex]

Regarding the useEffect antipattern depending on a variable to do something. What if the variable I depend on is coming from a query params? Like I do something if that query param is present in the url.

[@03tnp]

Hey 6:55, why didn't pass onComplete function in custom hook ?

[@kuma3730]

6:33 Look at the text, he said he forgot to pass the function

[@cosdensolutions]

forgot, but I added a comment in the video! we should have passed it yes

[@03tnp]

@@cosdensolutions Awesome content

[@03tnp]

@@kuma3730 yeah ! i have commented before he added.

[@petar567]

Great video! 💯💯

[@ArunKumar-iy9se]

Please tell me what's the name of this theme that you are using

[@maxtsh]

Awesome, really enjoyed

[@sknazibulhossain4901]

Want more because this kind of is like rare in utube

[@cosdensolutions]

will do!

[@2gbeh]

Extracting useEffect into a separate hook only makes the code cleaner but it's still a useEffect. Avoid it wherever possible.

[@cosdensolutions]

you shouldn't be so scared of it. It's a vital hook from React just like the others, use it when it makes sense

[@DavideFicano]

How nice would it be if my pet project ended up in the code review section? But it is not well documented, not completed and perhaps useless for others but dreaming costs nothing :D :D

[@cosdensolutions]

you're free to post it in the discord for review :)

[@DavideFicano]

@@cosdensolutions great I will do

[@maxterrain]

My man rubbed his eye for too long.

[@cosdensolutions]

lool

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

[@ZiaCodes]

How to join this code review session?

[@cosdensolutions]

there's nothing to join haha I filmed this video alone. But you can join the discord and submit your code, and talk about React and other things generally!

[@lian1238]

Appreciate what you’re trying to teach but without showing tests passing or the actual output, I’m not quite following. I’m not a React dev so I cannot trust your words alone without some output. I have trust issues

[@johnlambertasis6620]

+1

[@cosdensolutions]

I get it, but that's not the point of this video. I'm reviewing it as if it were a PR from a colleague. It's not the reviewer's responsibility to test your code or fix it even, just suggest improvements! The goal is to learn the mindset

[@lian1238]

@@cosdensolutions but you are fixing it.

[@josefaguilar2955]

There are definitely draft MRs where the feature isn't working, and that's the priority. However it will still receive cleaner code suggestions as well.

[@DatDat59]

I get as much satisfaction from deleting code as from writing it.