React just announced its version 19 beta with a lot of API change. Among them is making refs regular props, which is very welcome, but it impacted the internals of our code. It wasn't a big deal though, and now I'm happy to claim that from v1.1.2 we're fully ready for React 19 😁.

Have a good day everyone.

I've read on twitter recently how funny someone finds the royal 'we' when a solo developer creates a library and communicates from behind it. Funny it is, we made it.

React Beyond, in a nutshell, is a simple tool letting you create higher-order components, which recursively re-apply themselves on the components in the result JSX. It seemlessly penetrates through component boundaries.

It feels magical, but really isn't magic. React is a functional library (set aside the hook discourse now). Functions, which return JSX, which reference other functions, which return JSX, and so on. This very fact makes it possible to not only create simple higher-order components, but ones with a recursive nature. It "infects" the entire tree under the component it's applied to.

Real-world problems

React is lovely, but it has its annoyances.

• It all starts with the className prop... instead of class for no historical reasons.

• Then you have the conditionals in JSX. As Ryan Florence said once, the "syntax disaster". JSX is brilliant in that it's not a template, so we don't have to put expressions in strings (which is ugly too), but breaking the XML hierarchy with JS language structures is just an illness.

• Then you have the mandatory HOC wrappings in some state management libraries, which need to know the start-end points of the render phase. You might've seen the observer() HOC from MobX. And you might've been turned away by the necessity of wrapping all your component declarations in observer().

• Lastly, to me maybe the most annoying one, code like this:

  <Tooltip text="hi">
    <Button onClick={() => alert('hi')}>Hi</Button>
  </Tooltip>
  

  This is severely unintuitive. Why? Because it obscuscates the containment logic. It elevates a secondary feature above the main functionality. The app works without the tooltip, but not without the button. Still, the tooltip is the boss. The same applies to all kinds of floating components, and to some level, non-representational components too, like an ErrorBoundary.

With React Beyond, you can get past these sorts of problems effortlessly.

But it turns out it provides a lot more than that. Heck, you can even create your own framework or renderer on top of React with it...

Prior art

There has been many attempts actually to add directives to React, and the interest is definitely there, but these implementations are limited to a very narrow feature set, and are ill-born for different reasons. Let's see a few:

• https://github.com/peakchen90/babel-plugin-react-directives - Core Vue directives, but with a babel plugin.
• https://github.com/baeyun/directive-x - Babel plugin...
• https://github.com/mkhstar/react-directive - Not a plugin, but the API is tortuous: <directive.div dirIf={...}>.
• https://github.com/laurci/react-directive-attributes - Overrides the React API, and it's bundler dependent.
• https://github.com/FullR/react-deep-map - This is something usable, and the project is not dead, but it doesn't step beyond the obvious limitation that it only works on a static element tree.

React Beyond doesn't need bundler plugins, and is free of shenanigans. It simply leverages the fact that React is a functional library. Note, that React Beyond does provide a bundler plugin for Hot Module Reloading to work, just like React does, but it's not necessary for its functionality.