const FilterSingleton = React.createSingleton();

const FancyEffect = () =>
{
	return (
		<div>
			<FilterSingleton>
				<svg className='svg-defs' xmlns='http://www.w3.org/2000/svg'>
					<defs><filter id='can-be-used-anywhere'></filter></defs>
				</svg>
			</FilterSingleton>

			<SomeComponent ... />
			<SomeComponent ... />
			<SomeComponent ... />
		</div>
	);
};

// Used all throughout your application but SVG is only rendered at most once on the DOM
<FancyEffect />
<FancyEffect />
<FancyEffect />

React.createSingleton = function()
{
	const instances = [ ];

	return class Singleton extends PureComponent
	{
		constructor (props) {
			super (props);
			instances.push (this);
		}

		componentWillUnmount() {
			const index = instances.indexOf (this);

			if (index > -1) {
				instances.splice (index, 1);
			}

			if (instances[0]) {
				instances[0].forceUpdate();
			}
		}

		render() {
			return instances[0] === this ? this.props.children : null;
		}
	};
};