Darius Cosden 🧑🏻💻
@cosden.dev
Teaching React at @cosdensolutions · 170k subs · Building an AI learning platform
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
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
October 24, 2025 at 9:56 AM
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
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
When you do that React is going to continue the body of the component until the return statement after which it will abandon the render
This means that the JSX is not going to get updated in that render
React is going to start again on a new render from the top
This means that the JSX is not going to get updated in that render
React is going to start again on a new render from the top
October 16, 2025 at 10:04 AM
When you do that React is going to continue the body of the component until the return statement after which it will abandon the render
This means that the JSX is not going to get updated in that render
React is going to start again on a new render from the top
This means that the JSX is not going to get updated in that render
React is going to start again on a new render from the top
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
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
October 16, 2025 at 10:04 AM
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
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
That's where the useEffectEvent hook comes into play
We can create an effect event called onVisit and call that in the body of useEffect instead
Effect events do not need to be provided in dependency arrays, but they still see the latest values
We can create an effect event called onVisit and call that in the body of useEffect instead
Effect events do not need to be provided in dependency arrays, but they still see the latest values
October 15, 2025 at 9:56 AM
That's where the useEffectEvent hook comes into play
We can create an effect event called onVisit and call that in the body of useEffect instead
Effect events do not need to be provided in dependency arrays, but they still see the latest values
We can create an effect event called onVisit and call that in the body of useEffect instead
Effect events do not need to be provided in dependency arrays, but they still see the latest values
The problem is, if we do that, then we're violating the rules of hooks
The rules of hooks say that everything used inside of the body of useEffect has to go in the dependency array
So if we can't do that, what's the solution?
The rules of hooks say that everything used inside of the body of useEffect has to go in the dependency array
So if we can't do that, what's the solution?
October 15, 2025 at 9:56 AM
The problem is, if we do that, then we're violating the rules of hooks
The rules of hooks say that everything used inside of the body of useEffect has to go in the dependency array
So if we can't do that, what's the solution?
The rules of hooks say that everything used inside of the body of useEffect has to go in the dependency array
So if we can't do that, what's the solution?
Here we're tracking a page view event based on the url and the numberOfItems
With this code, when the numberOfItems changes, the event will fire even if the URL hasn't changed
This is probably not what we want
To fix it, we need to remove numberOfItems from the deps array
With this code, when the numberOfItems changes, the event will fire even if the URL hasn't changed
This is probably not what we want
To fix it, we need to remove numberOfItems from the deps array
October 15, 2025 at 9:56 AM
Here we're tracking a page view event based on the url and the numberOfItems
With this code, when the numberOfItems changes, the event will fire even if the URL hasn't changed
This is probably not what we want
To fix it, we need to remove numberOfItems from the deps array
With this code, when the numberOfItems changes, the event will fire even if the URL hasn't changed
This is probably not what we want
To fix it, we need to remove numberOfItems from the deps array
You can use it in a server action too, and do something else there as well
The beauty of this pattern is flexibility. Your function is still reusable and shared, but you control the behavior everywhere you use it
With this, I've been able to do anything in my apps
The beauty of this pattern is flexibility. Your function is still reusable and shared, but you control the behavior everywhere you use it
With this, I've been able to do anything in my apps
October 1, 2025 at 10:04 AM
You can use it in a server action too, and do something else there as well
The beauty of this pattern is flexibility. Your function is still reusable and shared, but you control the behavior everywhere you use it
With this, I've been able to do anything in my apps
The beauty of this pattern is flexibility. Your function is still reusable and shared, but you control the behavior everywhere you use it
With this, I've been able to do anything in my apps
Finally, you combine everything in your component by wrapping the utility function with tryCatch
With this, you're free to now handle the result of the function in any way that you want
Want to return JSX on error? Sure. Want to send to sentry? Sure
It's completely flexible
With this, you're free to now handle the result of the function in any way that you want
Want to return JSX on error? Sure. Want to send to sentry? Sure
It's completely flexible
October 1, 2025 at 10:04 AM
Finally, you combine everything in your component by wrapping the utility function with tryCatch
With this, you're free to now handle the result of the function in any way that you want
Want to return JSX on error? Sure. Want to send to sentry? Sure
It's completely flexible
With this, you're free to now handle the result of the function in any way that you want
Want to return JSX on error? Sure. Want to send to sentry? Sure
It's completely flexible
Then, I'll use a handy tryCatch helper function to allow me to catch any errors without having to worry about block scopes
I have come to avoid using try catch in my code and heavily rely on this small utility function
I have come to avoid using try catch in my code and heavily rely on this small utility function
October 1, 2025 at 10:04 AM
Then, I'll use a handy tryCatch helper function to allow me to catch any errors without having to worry about block scopes
I have come to avoid using try catch in my code and heavily rely on this small utility function
I have come to avoid using try catch in my code and heavily rely on this small utility function
The first step is to create a reusable function.
It doesn't matter what it does, just that it has some reusable logic that you need
The key here however, is that the function does not handle any errors (if the db call fails, it will throw)
It doesn't matter what it does, just that it has some reusable logic that you need
The key here however, is that the function does not handle any errors (if the db call fails, it will throw)
October 1, 2025 at 10:04 AM
The first step is to create a reusable function.
It doesn't matter what it does, just that it has some reusable logic that you need
The key here however, is that the function does not handle any errors (if the db call fails, it will throw)
It doesn't matter what it does, just that it has some reusable logic that you need
The key here however, is that the function does not handle any errors (if the db call fails, it will throw)
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:
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:
October 1, 2025 at 10:04 AM
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:
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:
If you use a ref on the other hand, it will keep its value across renders
That's what refs do. They allow you to store values and keep them for the lifetime of the component
So in this case, the console log will log the incremented value when the component renders
That's what refs do. They allow you to store values and keep them for the lifetime of the component
So in this case, the console log will log the incremented value when the component renders
September 30, 2025 at 10:03 AM
If you use a ref on the other hand, it will keep its value across renders
That's what refs do. They allow you to store values and keep them for the lifetime of the component
So in this case, the console log will log the incremented value when the component renders
That's what refs do. They allow you to store values and keep them for the lifetime of the component
So in this case, the console log will log the incremented value when the component renders
Using a let variable like this will not work the way that you think
Normal JS variables don't hold their value across renders, so even if you increment it, on the next render, it will be reset to 0
This is because the variable is being created and initialized in the component
Normal JS variables don't hold their value across renders, so even if you increment it, on the next render, it will be reset to 0
This is because the variable is being created and initialized in the component
September 30, 2025 at 10:03 AM
Using a let variable like this will not work the way that you think
Normal JS variables don't hold their value across renders, so even if you increment it, on the next render, it will be reset to 0
This is because the variable is being created and initialized in the component
Normal JS variables don't hold their value across renders, so even if you increment it, on the next render, it will be reset to 0
This is because the variable is being created and initialized in the component
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
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
September 30, 2025 at 10:03 AM
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
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
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
September 29, 2025 at 9:58 AM
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
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
The context creates and holds the ref, and provides it to all components
The `Component` can just access that ref and pass it directly to `useImperativeHandle`
This makes that `updateCount` function callable from anywhere in the context
The `Component` can just access that ref and pass it directly to `useImperativeHandle`
This makes that `updateCount` function callable from anywhere in the context
August 28, 2025 at 2:58 PM
The context creates and holds the ref, and provides it to all components
The `Component` can just access that ref and pass it directly to `useImperativeHandle`
This makes that `updateCount` function callable from anywhere in the context
The `Component` can just access that ref and pass it directly to `useImperativeHandle`
This makes that `updateCount` function callable from anywhere in the context
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
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
August 28, 2025 at 2:58 PM
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
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
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
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
August 27, 2025 at 10:03 AM
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
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
This is useful for storing things you need during a render, but without causing a new one
You can set a value on a ref, then update this during a render, and immediately read its updated value, without a new render
You can't do this with state, which is reactive
You can set a value on a ref, then update this during a render, and immediately read its updated value, without a new render
You can't do this with state, which is reactive
August 22, 2025 at 9:57 AM
This is useful for storing things you need during a render, but without causing a new one
You can set a value on a ref, then update this during a render, and immediately read its updated value, without a new render
You can't do this with state, which is reactive
You can set a value on a ref, then update this during a render, and immediately read its updated value, without a new render
You can't do this with state, which is reactive
Refs can store any value. It can be a primitive value, array/object, a function, or a DOM element
When you store a value in a ref, it becomes imperative. This means you can access it at any time, bypassing the component lifecycle
You don't need renders to see updated ref values
When you store a value in a ref, it becomes imperative. This means you can access it at any time, bypassing the component lifecycle
You don't need renders to see updated ref values
August 22, 2025 at 9:57 AM
Refs can store any value. It can be a primitive value, array/object, a function, or a DOM element
When you store a value in a ref, it becomes imperative. This means you can access it at any time, bypassing the component lifecycle
You don't need renders to see updated ref values
When you store a value in a ref, it becomes imperative. This means you can access it at any time, bypassing the component lifecycle
You don't need renders to see updated ref values
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
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
August 22, 2025 at 9:57 AM
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
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
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
August 21, 2025 at 10:02 AM
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
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
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
Kinda like when in school they made you write essays in detention
If they ever revolt, they're coming for me first
August 19, 2025 at 9:59 AM
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
Kinda like when in school they made you write essays in detention
If they ever revolt, they're coming for me first
Instead, pass the reference to the function (without the parenthesis)
This lets React take care of calling it, and it will only be called once on component mount
Which is exactly what you want
This lets React take care of calling it, and it will only be called once on component mount
Which is exactly what you want
August 18, 2025 at 10:00 AM
Instead, pass the reference to the function (without the parenthesis)
This lets React take care of calling it, and it will only be called once on component mount
Which is exactly what you want
This lets React take care of calling it, and it will only be called once on component mount
Which is exactly what you want
Don't pass your function to useState like this
This will make it re-run on every render since you're calling it with the "()"
React won't even use its return value after the first render so it's wasteful
This will make it re-run on every render since you're calling it with the "()"
React won't even use its return value after the first render so it's wasteful
August 18, 2025 at 10:00 AM
Don't pass your function to useState like this
This will make it re-run on every render since you're calling it with the "()"
React won't even use its return value after the first render so it's wasteful
This will make it re-run on every render since you're calling it with the "()"
React won't even use its return value after the first render so it's wasteful