React Ecosystem Q&A

[00:00:00]
>> Male Student 1: There's a question about, it looks like there's a number of ways that you can fetch data, whether you're using useEffect, React query or TanStack query. They seem to share a lot of the same purposes, what's a use case I would use Tanstack query over say useEffect?
>> Brian Holt: It's good question, you can choose for yourself, right?

[00:00:26]
So I've kind of shown you both ways cuz I wanted you to see, this is a personal preference and I'm gonna say this is not a controversial. Opinion here, is that the industry tends to just use React Query when it comes to making API requests on a regular basis.

[00:00:45]
This API is just a lot nicer that it has built in caching into it, the hooks are super nice, it has refreshing built into it. It has nice error handling, all the stuff that you would have to kind of just reconstruct yourself. This is such an elegant tool in my opinion and honestly, this is one of the tools I hold up as like a prime example of really good developer experiences.

[00:01:12]
Because you can use React Query however you want, it really doesn't enforce an opinion too much on you. It's just a very useful tool that's generally applicable to almost every problem when it comes to react components making API requests. That's why I don't really feel too much controversy in saying just always use this if you're using an API, right?

[00:01:32]
If you wanna refetch every single time you just set the stale time to 0 and all sudden, okay? Now it's gonna refetch at every single time, right? I can't remember if it's zero or infinity.
>> Brian Holt: So I think what I did here is, I think I made it always refetch or something like that maybe it's one there, might even be, no cash, or something like that, you'd have to go look at what the actual, here it is.

[00:02:01]
We'll use enabled here in just a second, you can tell it how many pages you want it to hold max, there's a bunch of stuff anyway, maybe just make this one. Anyway, so when would I use useEffect? UseEffect still has its place, if I had to talk to local storage or something like that, I might find a library for that, I might just use an effect for that.

[00:02:31]
A good example is like, okay, I loaded a component and I wanna fire off analytics events, I'd use an effect for that. Yeah, so it still has its use cases.
>> Male Student 2: With remote state management, is TanStack a better solution or is something like Zustand or Redux handle that better?

[00:02:54]
>> Brian Holt: I'm gonna say that they're different tools for different jobs, you can use Zustand or or something like that with React Query. You certainly can use Redux as a cache, there's no reason that you couldn't, but they serve different purposes. The TanStack store is more directly competing with Zustand and all of those.

[00:03:17]
Like I said, I tend not to use any state management libraries anymore, but if I was building something like Figma, right? Very big, complicated browser app that's gonna have a lot of browsers-based data that's gonna be shared across lots of teams, then I would use something like Zustand to coordinate across a massive big app that has lots of app level data.

[00:03:49]
I'm not the person that's gonna use it on a very small app, but on an enormous app, I think at that scale and with that many people looking at the app, it makes more sense to me.
>> Male Student 3: Peter Krugman uses, Zustand in our React Native courses.
>> Brian Holt: Cool.

[00:04:03]
>> Male Student 3: It's released, so if you're interested in Zustand, right? You wanna learn more about it?
>> Brian Holt: Yeah, I would say with an iOS app where you have many pages and it's all being stored in the same thing with React Native, that makes a lot of sense to me.

[00:04:14]
>> Male Student 4: Do you have any opinions about putting query code inside a custom hook?
>> Brian Holt: It's a good question, so why wouldn't I put this one in a custom hook? Cuz I don't think that makes it any clearer what this is doing, and I'm not gonna test. I'm not gonna write tests for React Query, Tanner Lindley and the react or the TanStack team test it plenty more than I ever wanna test it, right?

[00:04:41]
So I don't wanna test my libraries, I assume my libraries test themselves, and so if I put this into a custom hook, there'd be nothing interesting to test about it. So I just wouldn't, however, if I had seven requests that were firing off in serial and I wanted to make sure that the right things were being called in the right in order.

[00:05:01]
Yeah, I'd make that a custom hook, but for just one request, no, I'm okay just putting this directly in the component. I just chose these two because almost every app that you write has API requests. Almost every app you write has routing needs, or at least very frequently, so I chose these two, but there's other ones out there, like virtual tables.

[00:05:24]
Those can be super useful form libraries, all sorts of stuff like that. There's lots of things to talk about with CSS, and I decided to not talk too much about CSS in the intro to this one, it's a pretty fractured ecosystem. So there's not an obvious one to teach you like this is the answer.

[00:05:45]
Once you understand React, layering in CSS is not super hard. I'll just throw in that I'm of the opinion, typically, let's say if I have this, PizzaOfTheDay, I'll just come in here and say, PizzaOfTheDay.css. And this will just be normal run, not very interesting CSS and then here in PizzaOfTheDay.jsx, I'll just say import ./PizzaOfTheDay.css.

[00:06:30]
That's how I like to do it, it keeps it pretty simple I'm just writing direct CSS. And actually, if you really wanna get into it, what I'll do is I'll actually have a directory, PizzaOfTheDay directory. I'll have the component in there, I'll have the CSS in there, I'll have all the tests for it in there.

[00:06:49]
My favorite part about that pattern is, let's say I just we've decided later that we're gonna Pizza of the month, right? And now we need a whole new component with new tests and new CSS, if you don't do it this way you have to go hunt for all the files and delete them individually.

[00:07:04]
Or even worse and even more likely is that you just don't, and you leave debt code in your code base, right? If you structure it like that where it's just a directory of everything's kind of self-contained in directory, you just delete the whole directory and you're just assured that all of the related code goes with it.

[00:07:21]
I wasn't intending to talk about CSS or anything like that but that's how I do handle it nine times out of ten. I can hear chat now furiously just banging away it's like what about Tailwind? I was like okay, [LAUGH] I understand Tailwind, I've taught Tailwind as part of intermediate.

[00:07:37]
So if you wanna see how I use Tailwind it's Intermediate React, v5, there's a section on Tailwind. I've kinda come back around to it as, I don't really like using it, I kinda like writing CSS, right? But I don't judge those that do, I don't have any strong opinion of like, I don't like the class names or anything like that.

[00:08:00]
I am just personally have a bit of Stockholm syndrome around CSS, that I've been doing it for so long that now I kinda like it. And so I'm just gonna keep doing that but if I hadn't had so many years of fighting floats, [LAUGH] then I probably would be more drawn to something like Tailwind, right?

[00:08:19]
So totally valid if you use it in your code base I'm not upset, I will have contribute to a Tailwind code base, it's just not what I'm gonna choose personally. And I will say, I think it's probably the most common thing with React now is to write Tailwind.

[00:08:35]
That's just a feeling, I'm not sure if that's actually true, but certainly I see that being very common.