Sorry, you will have to do things React’s way until the end of time if you want your rendering to be optimal. That means whatever it means, hooks, suspense, fibers, context, so on.
A library means I get to plug in other stuff without totally crippling another library, as React claims it is.
Nothing wrong with React, just become the framework you are and provide the built in solutions.
Think of it this way, imagine the React team made curl. Now they say you can curl anything. So now you say, ‘ok, I want to curl this’ and they respond:
‘Oooo, I don’t know about that, that’s gonna mess up all the curl internal optimizations, hmmm, no no, you SHOULDNT be curling that’
And then we all walk away going ‘oh’, silently. Checkmate, hoodwinked.
React was not bothered at all. From the start there were ways to escape React model in components and integrate components into other frameworks. Been there, done that, it was never a huge deal.
But I am an American, so I won’t put up with any inconvenience and don’t consider it virtuous to do so (we fought a war over a tea tax after all).
But I’ll take a wild guess:
A bunch of useRefs? I’m excited to hear all of this.
import { useEffect, useRef } from 'react';
import { Controller } from 'some-animation-library';
const SomeWrapperComponent = ({ options }) => {
const elementRef = useRef(null)
const controllerRef = useRef(null)
useEffect(() => {
if (!elementRef.current) {
return () => {}
}
if (!controllerRef.current) {
controllerRef.current = new Controller(elementRef.current, options)
} else {
controllerRef.current.setOptions(options)
}
return () => {
controllerRef.current.doSomeCleanup()
}
}, [options])
return <div ref={elementRef}></div>
}I’ve been using React for quite some time (started with version 0.11 or something) and had to integrate quite a few libraries on my own (stuff like OpenLayers for maps, etc) and it also worked pretty well. Also made few apps that had only few widgets (search UI, calendar, etc). It usually worked quite well.
Mixing React with non React is quite easy. You only need to encapsulate it - keep all non vdom stuff in one component and never escape single DOM node.