Deriving State Anti-Pattern

[00:00:00]
>> David Khourshid: The first thing that we're going to be talking about is actually basic react state anti patterns. It's the beginning of the workshop, so we're not going to be getting too deep into philosophy or principles or anything like that. Instead, I want to cover three very important state ante patterns that I see in pretty much any project that I work in or I have looked at in reaction.

[00:00:26]
The first one is deriving states. So we want to learn when we should calculate values instead of storing them. And this is a pattern that I see all the time. So the way that you recognize this pattern is that you might see a use state and a use effect combination where the use effect is the one that's calculating new states.

[00:00:51]
And this seems really convenient because the whole way that useEffect works with dependency arrays is that whenever any value in the dependency array changes, it's going to execute something inside that useEffect function. And so you might think, okay, this is a great place for me to calculate some new states, but it's actually not.

[00:01:11]
This is one of those fun ones where you could just go into a code base and just start refactoring your way. So NC pattern scratch. So, for example, let's say that we're going to make a simple app and let's say that we're doing a coffee order app. So I might have orders, setOrders, useState-Order, and these might be just a string for now, or actually they're gonna be orders.

[00:01:48]
So let's make a proper order type. And so I also need to import use date. All right, so let's say that we have an order and the order can be for a cappuccino, espresso, latte, mocha, stuff like that in each order has a price, which has a number and also a quantity.

[00:02:15]
So you might have seen that like, okay, we have our orders and we probably have some UI to update those orders, but we also want to calculate the total of these orders so we'll have total settotal. And also there's a reason that I do have claw turned on right now.

[00:02:33]
It's because it's probably going to suggest the wrong thing, which is great. Claude makes mistakes, just like humans make mistakes, and other AI powered coding assistants too. So you can see immediately it's trying to do a useEffect, why? Because it's going to calculate the totals in that useEffect.

[00:02:52]
So I mean, raise your hand if you've seen this pattern in your code base. Probably everyone. Yeah, it's just everywhere. So what is so wrong with this? Well, we have an unnecessary use effect, which is going to cause an unnecessary render when the orders change. And really, this is derived state.

[00:03:13]
So I want you to recognize this pattern over here. We have a useState, and then we have a useEffect that's setting that used state. So what's the alternative here? Well, we can actually just completely get rid of that useEffect and just set the totals directly. And so this is really all that you need to do.

[00:03:37]
Then, of course, you could show the orders, show the total amounts, and you might have some UI for setting the orders too. But the point is that we are calculating this derived state directly inside render. And I know what some of you might be thinking, too. You might be thinking, okay, yeah, this is great.

[00:03:56]
So I'm just going to wrap this in a UseMemo and go. Hold on. Before you start using UseMemo, just start with this. Calculate states directly in render when it can be derived. We have our source of truth here, which is the orders, and we have the total, which can be derived from orders.

[00:04:17]
Now, this is an obvious example, but as you'll see in the exercise, some of these might be a little bit hidden and harder to recognize, but once you see it, you really can't unsee it. Claude's even recommending that I use Memo, but the idea is that you can compute states directly in render and then use that.