The Best React Code I Wrote (Code Review)

Try Brilliant Free for 30 days + 20% Off Premium Membership → brilliant.org/...
🚀 Project React → cosden.solutio...
📥 Import React (Newsletter) → cosden.solutio...
🧙🏻‍♂️ Habit Quest → habitquest.io
Join The Discord! → discord.cosden...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we'll be reviewing the best code I've written so far in React! This is an app that I've built recently on the livestreams with you guys. It has tons of design patterns, best practices, and really cool solutions to problems. Let's look at the code and see how it was built!

[@JanVerny]

It's always interesting to look at someone else's code base. First impression is that I feel like typescript isn't being used to it's full potential in a lot of the places. I would certainly define ItemRarity type over using Item["rarity"], etc. And that using a centralized store like redux or something similar would significantly reduce the amount of info that needs to be passed around on the routes or remove the need for routing entirely. I am personally not a fan of routing outside of allowing for bookmarks, navigation, etc.

[@martapfahl940]

This code equals a composition. Great work!

[@adityaprasad3122]

I like your teaching style make a nextjs course ❤

[@johngregoryfuntera670]

@<a href="#" class="seekto" data-time="261">4:21</a> I think the way you can make the providers more cleaner and maintainable is to have a main app provider wrapper the stores all of the providers then just have children a prop. {children}

[@amralimohamed6497]

Love from Egypt 🇪🇬

[@azerxkhamassi]

Should I assign setTimeout to a ref and clear it using clearTimeout in React to avoid potential memory leaks and ensure proper cleanup, or is there a more efficient approach for managing timeouts?

[@XavierGoncalves89]

there is not need for a ref, just assign the id to a regular variable and clear it in the useffect cleanup

[@orijoseph6179]

I’m a junior dev so I want to ask a question to make things clear, <a href="#" class="seekto" data-time="363">6:03</a> in this component you define queries and mutations, for my understanding we shouldn’t write business logic inside the components, but make custom hook instead to make the code more reusable, I would be happy if you can explain why you did it that way. I also see that later on you did implemented a custom hook, so why later on and not on <a href="#" class="seekto" data-time="360">6:00</a> ?

[@mohamedsalimbensalem6118]

best react dev so far

[@kthehatter]

what about performance when using tailwind in expo project , and do you recommend it for production apps

[@irfansaeedkhan7242]

Always quality content, love from Pakistan

[@armaandhanji2112]

Where can we find your stream?

[@okkkk88612]

Can you make a youtube course for beginners about Data structures and Algorithm please

[@prashlovessamosa]

I miss the purple light in the background.😅

[@icoderdev]

Hi, Cosden ❤

[@PSMercenary]

Senior level. Sure

[@harshal_madgulkar]

Love from BHARAT 🇮🇳

[@Simple_OG]

Just say india

[@harshal_madgulkar]

@@Simple_OG Both are same bro

[@Simple_OG]

@@harshal_madgulkar No one understands Bharat at an international level

[@harshal_madgulkar]

@@Simple_OG I hope they can use Google and see popular and greatest Flag there. And I am proud as it's the original name

[@orijoseph6179]

I’m a junior dev so I want to ask a question to make things clear, <a href="#" class="seekto" data-time="363">6:03</a> in this component you define queries and mutations, for my understanding we shouldn’t write business logic inside the components, but make custom hook instead to make the code more reusable, I would be happy if you can explain why you did it that way. I also see that later on you did implemented a custom hook, so why later on and not on <a href="#" class="seekto" data-time="360">6:00</a> ?