Just Confused. (makeStyles in a presentational component /ideal file structure?)

Ideal File Structure:
I’m really trying to make sure I structure my first big project right. So far I have my global components in the “/src/components/{Components}” directory and then a pages directory which is in “/src/pages/{Page}” Each page folder’s index is the page’s specific container and I put the components only needed by those pages in the corresponding folder.

However, in my components I’ve always thought that containers are just basically the components that have stateful logic and the presentational components are the dummy components. But from what I’ve researched, I see this:

A container does data fetching and then renders its corresponding sub-component. That’s it.

Am I doing it right by thinking of my components that have state as a container?

makeStyles in the container or presentational component:

Lastly, since makeStyles is a hook with stateful logic, I wouldn’t use that in a presentational component right? I would use makeStyles in the container and pass the class object down to the presentational component, or is this overkill?

Thanks so much for your time guys and please be kind to me because I am a noob.

Anything you can just pass in as a props makes it easier to test and debug components (of any kind). But use whatever makes sense in the context. IMO don’t overabstract everything immediately, which is often what happens when you start out by thinking you can have a clean separation between stateful and non-stateful components: you probably can’t. It’s useful in some scenarios, but often you end up coding yourself into a corner trying to apply what is a completely arbitrary structure. It was fashionable to do this at one point, but hooks mean that IRL there’s barely any distinction between the two, and forcing this structure onto a project might not be a terrific idea.

NB this is one of the issues you’ll find with React (and JS in general) – there is no standard structure. Lots of people have opinions (like me above I guess, I have written lots of React code and it made more sense with classes, not so much with hooks), but they’re just opinions, either informed by what made sense in the very specific context some code was written, or regurgitated (often cargo-culted). So just be careful

2 Likes

Thank you very much for your reply, Dan. I really appreciate the time you took to explain that to me. It’s starting to make more sense now. Hooks just overall have me confused. Technically since you use them in functional components technically any component could be presentational because they are not classes?