Avoid premature abstraction with Unstyled Components

today I want to talk about one of my favorite patterns in react and that is unstyled components and to explain it I have this little demo here we're looking at this little newsletter signup form and uh this is pretty basic it's just a form with a button a form that says on submit and we flip some loading state to true we wait and then we flip it back to false and if I click this button we'll see it flips over uh to this little loading spinner to give us some feedback that the form is being submitted now now

uh this button has a neat little trick inside of it and that is the spinner centers itself over the buttons contents and if I were to change this from sign up to sign up today we're going to see the spinner uh stays right in the middle of the button no matter what and the way this works is we can see right here if is loading is true we are using an absolutely positioned span to render the spinner and because the button is relative that's going to keep it right in the

middle Flex item Center justify Center you've seen this stuff before so that's the little trick that we're using here now uh if I pop open the page that's rendering this newsletter there is another component here called invoice and let's just say that this is a screen from the same app so uh we have you're about to send an invoice for $300 cancel or send now and if I click Send now we're going to see it doesn't have that nice little trick where the spinner stays centered over the content of the button and uh this causes this kind of

ugly layout shift and it just makes this screen feel a lot less polished than the other one did so it sure would be nice if we could get this code from uh the newsletter sign up and reuse it over here on an invoice screen so that we don't have this layout shift so um how might we do that well uh your first instinct here might be to say well we've got a blue button and we've got this yellow button right here let's add maybe Flex Flex call Gap 4 so we can see these

both and we've got two buttons in this app let's go ahead and extract a button component and so that we can share this code so let's go ahead and do that um I'm going to make a button. TSX let's come back and just look at the newsletter for now and this will export default function button and over in the newsletter I'm going to grab this whole button right here and return this

so we need an is loading prop and this is a Boolean and we need the spinner as well and we're going to want this to come from the parent this is going to be children just like that so let's also go ahead and add children which is a react node so uh we'll import that let's come back to our newsletter and let's let's go ahead and render our

button and this is going to take sign up and it also needs uh an is loading prop so let's say is loading is equal to this is loading state right up here in the newsletter so uh that looks pretty good let's go ahead and comment this out and okay there we go we've got our button and it seems to be working so

let's go ahead come back to our page render our invoice and uh let's go ahead and try to switch out this button right here with the button we just made so this is right here this is going to be button it's going to say send now and is loading is going to be this guy is loading just like that okay so we have this send now it's yellow we want it to be blue so let's go