example.js

import { formatNumber } from "externalLibrary";
import { startAnimate, stopAnimate } from "externalLibrary2";
import { Subscriber } from "externalLibrary3";
import { createRef } from "react-dom";

const someAnimationRef = createRef();
let counter = 0;
let name = "";
let subscriber = new Subscriber();

function increment(props, e) {
	counter++;
}

export function render(props) {
	return (
		<>
			{ name && <h2>Hello {name}</h2> }
			<button onClick={increment}>Counter</button>
			<span >{ formatNumber(counter) }</div>
			<div className="someAnimation" ref={someAnimationRef} />
		</>
	);
}

export async function componentDidMount() {
	name = await subscriber.subscribe("user.name");
	startAnimate(someAnimationRef.contents);
}

export async function componentWillUnmount() {
	stopAnimate(someAnimationRef.contents);
	await subscriber.unsubscribe("user.name");
}