Why your React components aren't really that good

Hey, good to see you, young or maybe old developer, glad you read this whether you know the concept m trying to tell or not, ask questions directly to me if you have problems with anything or reach out to me if you find something wrong with what's been said (I accept all feedbacks).

what is a component (the problem)

a component is just some JSX wrapped in a file that YOU can use on multiple pages, so it's REUSABLE :

// in the login component file 
function loginComp(){
return(
    <>
        <thename></thename>
        <thepasswordyoucantremember></thepasswordyoucantremember>
        <loginbutton></loginbutton>
        <forgoturpasswordagainclickme></forgoturpasswordagainclickme>
    </>
)
}
// in the /login page
function login(){
    <loginComp />
}

So here the loginComponent is literally a component and it's correct yes, but the problem is WHERE DO YOU SEE YOURSELF USING IT MORE THAN ONCE HERE?

What should you do instead

When thinking in terms of components, you did a good job by destructuring everything in chunks but we need to also think about the pages and what's gonna be used more and more throughout the same or different pages we have on the project, so, here is a drawn (badly) example :

As the picture says, components are reusable chunks, so you need to think carefully if you REALLY gonna reuse the component you made or is it a just one time use, like the login I gave as an example in the beginning, we are really gonna use it just one time, so why bother, just create it one time inside the /login page and that's it, more practical and logical XD.

In the end, just don't be a :

Guy.
See you in the next one.