Comparison between Hotwire and React

We can compare All-Hotwire and All-React as:

• Code complications
• Performance

Code complications

React has more setup and boilerplate code. Because both pages are relatively simple, that means that there’s more React code in both of them. In the case of the schedule page, there’s much more code. Since we did the concert page three times: React, Stimulus-only (for the first drafts of this course), and Hotwire, it’s noticeable how little client-side code the Hotwire version required.

There’s one place where React has less code, which is in tying value changes to update DOM elements. This happens automatically in React when the state changes, but Hotwire requires us to trigger them (except in the specialized case of Stimulus value-changed methods). There are probably cases where that update code gets too complicated to handle. This was certainly the case in our pre-Hotwire Stimulus project.

Performance

Performance is another concern that is likely not an issue in this example but would be in a real-world example. React is designed to make its update loop efficient, whereas doing many client-side updates in Hotwire might be less so. We likely don’t need to worry about this because it’s a theoretical issue for most projects.