
How we achieved 51% efficiency in button loading speed - isaacjohnwesley
https://www.reddit.com/r/reactjs/comments/8fx78w/how_we_achieved_51_efficiency_in_button_loading/?ref=share&ref_source=link
======
onion2k
Maybe there's a reason to put all that effort in to make a single, generic
component but it leads to a list of 'if statements' to build up a set of
styles where a lot of them are mutually exclusive - a button can't be both a
Google style button _and_ a Facebook style button - and the code doesn't have
any checks for that.

It'd be a lot easier (not to mention likely faster) to build the styles in
SCSS and just pass in a list of what's needed directly to the button's
className prop as a string, eg className={"link lined google large"} with CSS
rules for .link, .google, .lined, and .large that override styles from the
previous class as necessary.

~~~
seek
Hi,

This is part of a project where the entire app code is shared across native
and web apps. The app uses React Native for iOS and android, and react-native-
web for the web app. All three apps run from the same code.

Due to this constraint, the only way to define styles that can be reused
across web and native is to use react native's `StyleSheet` api.

About this:

> a button can't be both a Google style button and a Facebook style button -
> and the code doesn't have any checks for that.

Button receives a single string prop that defines the button style, from there
the bool values are calculated:

``` const isDefault = imStyle === 'default'; const isPrimary = imStyle ===
'primary'; const isFacebook = imStyle === 'facebook'; const isGoogle = imStyle
=== 'google'; ```

This assures that a button can't be both Facebook and Google button at the
same time. But I agree that it probably makes sense to move Facebook and
google buttons to separate components since they have fixed icons that are
always meant to appear on the left side. Right now, you'll manually have to
enter the icon name.

------
mtmail
direct URL [https://medium.com/the-inkmonk/how-we-
achieved-51-efficiency...](https://medium.com/the-inkmonk/how-we-
achieved-51-efficiency-in-button-loading-speed-86c786ef8e6d)

