Where to use React Components

Where to use React Components
0

#1

So I’m currently working on this project:

I’m sure this is going to vary from person to person, but where do you generally try to split your components? Obviously we could make the entire thing in one component, but when breaking them up into modular components, how small do we go?

I’m asking because in my version I currently have a component for the app, then a child component for the quote box, then child components for each item inside (text/author, new quote button, tweet button, etc)

Is this too many components? Since my new quote component literally just calls a function passed to it in props from its parents, should i not have that as a component? Whats best practices for this?


#2

It might be the wrong question to ask yourself if you have to many components. A more relevant question is “are these the right components?”.

It sounds like the functionality of some components is more or less the same. You could have a “button” component for both tweet and quote buttons. Being able to re-use components is one of the core advantages you get from using React.

Hope that helps :smiley:


#3

Thanks for the help!

Is there a best practice of “What should be its own component?”


#4

I like to think of writing Components as making your code more DRY. If I have the same code in two places of my project, I create a function and just call that function. I think the same principle could apply to components.