Yesterday we learned a simple way to replace React 17’s render callback. Today I want to cover another recommendation that is more invasive.

This approach is neat because it provides your callback with a reference to the rendered element — something not possible with the legacy root API.

But it involves modifying our component to take a callback prop and apply it as a ref.

function App({ callback }) {
	return <div ref={callback}>…</div>
}
ReactDOM.createRoot(rootElement).render(
	<App
	  callback={(ref) => console.log(“renderered”, ref)}
	/>
);

This approach requires that we change our components. This can be especially invasive if our application mounts multiple root-level components.

So, I’d avoid it unless you have a good use for the returned ref.

While not recommended by the React core team, I explored 3 additional render callback alternatives with the Lunch Dev crew. Check out the stream replay on YouTube for additional options that are less invasive.

🐦 chantastic