React only re-renders a component if the state changes, the props change, or a parent component re-renders. In my app, I only have one component where I needed to break out of the vdom, and none of the parent tree ever re-rendered (except when navigating to a new page, which correctly tears down the component), so it was as simple as just one useRef to grab a reference and one useEffect to pass it to my other code after the component rendered.

A pretty straightforward pattern here (and one that I actually just implemented with no hiccups for a non-React animation library) looks like:

    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>
    }

Thanks, that’s exactly the simplicity I wanted you to share, you did good.

The most recent thing was the typing app where we had to change style if each character after user typed it. With long texts (10k of characters) performance of tree diffing was not acceptable (especially in Safari) so we replaced whole text component with manually managed DOM and were mutating nodes directly.

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.