I'm realizing a lot of developers don't fully understand how React works Even when I make videos showing how it is, and using the official docs as support, they still don't get it So here's a couple of the most important things you need to know about how React works

Today I start filming the "React Fundamentals" course on Cosden Code This will cover all the essentials like JSX, components, state, hooks, etc It won't cover 3rd party libraries (RQ, forms, state management) since those will be in other courses What topics do you want to see?

Just added the first video lessons to my new platform Cosden Code (coming soon) The videos are SO GOOD. Literally my best work First course is on design patterns in React, and I promise you, you haven't seen most of these patterns I'm beyond excited to launch this

In React, the smaller your components are, the better Building small components makes your apps simple, maintainable, and scalable You can still have complexity, but it will be much easier to manage with small pieces The best code is simple code

I'm currently trying out Windsurf coming from Cursor First impressions, it's mostly the same, but the tab complete is inferior You really feel it when trying to tab complete a lot of files Pricing is better though so idk

React tip for state updates Instead of: setCount(count + 1) Do: setCount(prev => prev + 1) The function version always gets the current state. Helps avoid bugs with stale values

Quick debugging tip for React devs Instead of: console.log(user) console.log(posts) Do this: console.log({ user, posts }) You get labeled output in the console. Makes it way easier to track what's what when you have multiple logs

One of the weirdest patterns in React is the abandon render pattern This is when you call a state updater function directly in the body of the component as its rendering React will abandon the render and start again with a new value Here's an example

When I use AI to code, it either helps me solve a very specific hard bug or it helps me not have to write a bunch of new code that follows the same patterns Outside of that, it just gets in my way No matter the model or the tool that I use

React 19.2 just introduced the useEffectEvent hook This hook finally fixes one of the biggest problems that developers face when it comes to effects and dependency arrays Finally, we can put this issue to rest and focus on shipping actual features Here's how it works

So are we all moving away from Next.js now?

I'm currently filming a course on design patterns in React This is by far the best course on this topic. Nothing else compares Most other articles/courses repeat the same 5 outdated patterns over and over again My course goes deep, and shows you patterns you can use today

You can figure out almost anything if you just keep trying long enough Most developers quit right before they would have succeeded The difference isn't talent, it's just staying in the game a bit longer

If you're using functions in your React components, then this is the best pattern that you can use It gives you all of the benefits of a reusable function, while keeping the flexibility of how you might use it Here's the code:

What's the difference between using let vs useRef in React? A lot of developers don't know this fundamental difference Here's what's different and why you want to use a ref most of the time

I need to pivot with my AI learning platform It seems that letting the AI do 100% of the teaching might not be enough I decided to add videos to every lesson where I also teach, to keep the human touch This way, you get the best of both worlds

I have great success with GPT-5 and Claude Sonnet 4 together I use Claude for direct tasks that don't have ambiguity (e.g. create a new page using same patterns) I use GPT-5 for deeper tasks where you need to figure out how to do something before doing it Works great for me

This is such a cool pattern with React context and useImperativeHandle I can expose my component ref to a context, and call any function on that component from anywhere It's useful when you have have some state that isn't global but you want to change it from somewhere else

Even after many years of working with React, I'm not tired of it The component model changed the way I build apps You can literally build anything if you know what you're doing Sure it has a learning curve, but it's so worth it

My AI learning platform needs a "How it works" section, since it takes a new approach to learning This is a bold move, and it can play both ways Either it's innovative and users will adapt and use it Or I'm completely wrong and it flops

If you feel like you don't belong in tech, here's what I see: ◆ You probably know more than you think ◆ Everyone googles basic stuff (yes, even senior devs) ◆ Your questions make the team better The fact that you care about doing well means you're exactly where you should be

One big misconception about refs in React is that they're just for manipulating the DOM This is not the case. Refs are really useful for a ton of other things You should be using useRef in your application more than you might think Here is the power of refs

Just implemented a really cool feature in my AI learning platform AI now keeps track of the tasks you've completed for each lesson The lesson will be complete when all tasks are done This means you can submit your code for partial feedback So far, it never got it wrong

You shouldn't obsess over memoizing everything in React I see many developers use useMemo and useCallback for every variable and function This is inefficient, time-consuming, and ultimately useless most of the time @tkdodo.eu wrote a really nice article about this

Sometimes when Claude really messes up I get so angry I ask it to apologize and write me a poem about it Kinda like when in school they made you write essays in detention If they ever revolt, they're coming for me first

In React, useState can also take a function for its initial value This is useful when you want to run some logic to determine what that value should be You have to be careful though, because if you don't do it right, you can re-run your function unnecessarily

Don't ignore eslint on useEffect dependency arrays Eslint is not some optional challenge that we impose on ourselves It helps make sure your code follows certain rules, which makes your code better and with less bugs Don't ignore it

One of the best qualities to have as a React dev is to be curious ◆ Always be the one asking "Why does this work?" ◆ Read source code when things break ◆ Try out new and interesting patterns Curiosity beats raw talent every time

Imagine a coding learning platform, but where you learn by chatting with an AI That's what Cosden Code is I'm blown away by how good this feels. It's far superior than a human teacher or using standalone ChatGPT Human-crafted expert courses + AI delivery is the future

Here's a cool pattern to use in React if you're combining server and client components The goal is to separate the client rich interactivity from the efficiency of running your code on the server as much as possible The result is truly the best of both worlds

Sometimes in React, you want to run code in a useEffect only once Even if the code dependencies change Unfortunately, React doesn't like this (even though it's a valid use case) But don't worry, I got you. Here's how you can do it

In React, sometimes you need to run some code when the browser window size changes Here's how to do it cleanly by hooking into the window's "resize" event Bonus: you can create a really nice custom hook out of it

AI is grading my students on my dev learning platform And it's much better than a human or automated tests This unlocks a whole new way of personalized learning

Updating a property on a deeply nested state object in React can be cumbersome You have to spread every layer until you get to the one you need to change This isn't fun, especially if you are doing it often Here's a much simpler way to do it

So many React devs implement authentication wrong in their apps I just reviewed this code on the channel and there are some lessons here for every React dev Here is how not to do authentication in React

One of the biggest advantages of my AI learning platform is that I don't have to spend so much time creating entire courses An outline with details and good prompts is more than enough The AI does the rest The result is actually better than if a human were to teach

This is one of my favorite little custom components in React It's called WithTransition and it serves only one purpose: create transitions without new components Here's how I use it and how you can benefit too

I'm currently building an interactive coding platform powered by AI Think human-generated interactive courses and exercises, delivered by AI No hallucinations, complete personalization, and very high quality I think this will be the future of how devs learn

useState is the most fundamental hook in React Yet a lot of developers use it wrong Here's a breakdown of how you might be using useState wrong, and how to fix it

I'm convinced most developers who use agents to write most of their code for them aren't that good No matter what model I use, the output is often sub par and requires more work to review than to write it myself I can't see how some default to it for all their code

Always use React Query Even for small projects Not using it will inevitably lead to a worse app Here's why

So many juniors are making this useEffect mistake daily If you're an experienced dev, this will look super trivial But trust me, it's an issue Hint: it's dependency arrays

So I tried @cline with Claude Code It's better, but still not as good as @cursor_ai imo There are a few things that break the experience for me Details below

Knowing how to handle file uploads in React is essential for every developer This gets even more interesting when you allow multiple files and need to show progress indicators Here's a super in-depth video teaching just that + some cool design patterns

The best library for URL state in React is nuqs It provides clean and simple hooks that look just like useState but sync automatically with the URL Here's how to use it

So I tried Claude Code, and I don't like it The UX is worse than @cursor_ai for me It's slower, asks me to micromanage each change, and doesn't provide me the files to see the full content I tried the Claude VSCode extension but it's not at all the same Am I missing smth?

Decided to go with @polar_sh as the MoR for my AI learning platform So far, it's been the easiest payment provider to setup Literally just a few lines of code to get subscriptions working Definitely recommend!

I'm really disappointed with the latest @cursor_ai price changes I don't want to look for alternatives but I'm being forced to It's such a shame because it is the best AI IDE for my workflow and I got used to it too much What's the closest good substitute?

A few weeks ago I came across the with-react library from @jacobmparis Thought it was cool, then forgot about it But recently, I've found one great use case for it that I use a lot in my app

The AI SDK from Vercel is the best tool right now for building AI powered apps I'm using it heavily to build my AI learning platform and it allows you to do so much Here's a tutorial video I just posted covering the basics if you want to get started (you should)