Styled-components-website: Add "When to use Comp.extend vs styled(Comp)" to FAQ

[mxstbr]

Based on this discussion and the last comment by @geelen: https://github.com/styled-components/styled-components/issues/1083#issuecomment-329296230

The only reason you'd choose .extend is if you know what you're extending is a SC. Across file boundaries I think that's very rarely the case.

[morajabi]

Just to mention, there is a note in docs regarding this:

NOTE
This is different from passing your styled component into the styled() factory. Calling extend creates a new stylesheet by extending the old one, and thus doesn't generate two classes for a single component.

But it's better to have this in FAQ too.

[mxstbr]

Yes but people are confused when to use it, not what it does :wink: We should replace that note with something like

NOTE
You should only use Comp.extend if you know that Comp is a styled component. If you're importing from another file, prefer to use styled(Comp) as it accomplishes the same thing but works with any React component.

And then add a FAQ entry "What is the difference between Comp.extend and styled(Comp)", since I think more people will care about when to use one over the other vs what exactly they do technically.

[morajabi]

"What is the difference between Comp.extend and styled(Comp)"

IMO It's a bit long, can we shorten it?

Update: I'm trying to add it but it seems our stringifier's result does not match the actual link to the heading when there's a code block in the title: https://github.com/styled-components/styled-components-website/issues/105

[jhswart]

Why not then always use styled(Comp)? Isn't it better to reuse already generated stylesheets, than generating new ones with .extend?