Radium: Why Radium instead of React-Style?

[paulwehner]

Hey, I'm just trying to understand what was your motivation to create this, that React-Styles doesn't offer? Why would I use this over React-Style?

[alexlande]

Hi @paulwehner, great question.

react-style and Radium are both rapidly changing libraries under constant development. This is true of pretty much all of the libraries dealing with React component styling.

For some historical context: When we initially released Radium, react-style didn't use inline styles and worked quite a bit differently than it does now. In the time since, react-style has added inline style support and both libraries have converged on fairly similar APIs (both influenced by React Native).

Some of the major differences between the libraries now are:

• react-style supports extracting styles into external CSS. We don't plan to support this in Radium.
• Radium supports styling browser state pseudo-selectors like :hover, and will introduce keyframe animation support soon. react-style doesn't plan on supporting either.
• react-style monkey patches ReactElement.createElement while Radium wraps React.createClass for the same purpose.

You might also be interested in https://github.com/petehunt/jsxstyle and https://github.com/VirtualCSS/planning, two other libraries (VirtualCSS is a theoretical WIP at the moment but is progressing quickly) for React component styling that are making good progress in this space.

[paulwehner]

Thanks for the detailed follow-up!

Are you guys not supporting extracting styles into external CSS because performance is equivalent without this feature? Or is it because you expect other people to figure out how to extract the styles Radium creates?

Why does it matter that Radium wraps React.createClass vs monkey patching ReactElement.createElement? I'm not familiar enough with React to know why this is important.

[alexlande]

Right. We haven't seen performance issues with inline styles vs extracted CSS, and we find inline styles easier to reason about in general. I wouldn't recommend trying to extract Radium styles. If you're interested in extracting things into CSS (or even into a <style> tag) I would recommend one of the other libraries I mentioned previously.

Re: monkey patching, without going into it too much, it's effectively a stylistic choice. Radium is explicit about the wrapping. When you require react-style into your app, it monkey patches React behind the scenes, which you may or may not be comfortable with.

[ryan-roemer]

A couple other notes on monkey-patching -- I generally try to avoid monkey-patching, because:

• It's a stateful mutation of (for example) ReactElement.createElement just from a mere require. Before the require ReactElement.createElement behaves one way, after it behaves differently. This hidden behavior change can sometimes be the cause of bugs and makes things just a little harder to reason about.
• After the patch, you don't get to choose to go back and have an unpatched ReactElement.createElement.
• It's a little more brittle. If the signature of ReactElement.createElement changes in the future, the patch immediately stops working.
• When lots of libraries do this, very weird, wonky combined behavior can happen.

All that said, the patch looks pretty small and safe, so perhaps not the biggest deal here.

Ultimately, though, my rule of thumb is that monkey patching in your _own app_ is fine as there's nothing else downstream, but should be avoided wherever possible in open _libraries_ that will be consumed widely by the community...

[paulwehner]

Thanks for the detailed explanation.

[ianobermiller]

Let's please get this into the readme, I'd like to make an entire section on strengths-weaknesses of Radium vs other options.

[alexlande]

Agreed.

[alexlande]

Think we can close this one.