1. It uses the `style` prop, which modifies the CSSStyleDeclaration object on the DOM node. The style attribute gets set by the browser behind the scenes. [1]
2. The rendering happens on the server, and React produces the markup for the style attribute. [2]
The former approach has very little overhead. The second bears the overhead of having to be parsed.
In most libraries, this is what gets used. Some libraries try to be clever, though, and inject `<style>` or `<link>` elements into the DOM (mostly to support things like `:hover`). This can get extremely CPU intensive, though, and it's not uncommon to get burned by a library in this way.
1. It uses the `style` prop, which modifies the CSSStyleDeclaration object on the DOM node. The style attribute gets set by the browser behind the scenes. [1]
2. The rendering happens on the server, and React produces the markup for the style attribute. [2]
The former approach has very little overhead. The second bears the overhead of having to be parsed.
In most libraries, this is what gets used. Some libraries try to be clever, though, and inject `<style>` or `<link>` elements into the DOM (mostly to support things like `:hover`). This can get extremely CPU intensive, though, and it's not uncommon to get burned by a library in this way.
[1] https://github.com/facebook/react/blob/c78464f8ea9a5b00ec802...
[2] https://github.com/facebook/react/blob/c78464f8ea9a5b00ec802...