#7: Replace the legacy render callback, pt 1, 2021
Did you know that ReactDOM.render takes a callback? It does! Or, it did. In React 18 it’s being removed.
With v17’s legacy root API, we could call a function after a component was mounted or updated.
ReactDOM.render(<App />, rootNode, () => console.log('Component rendered.'))Unfortunately, new features like partial hydration and progressive server-side rendering make the timing of this function confusing. So, the new root API doesn’t take a render callback.
There are two recommended strategies for replacing this API. Let’s cover the first.
This approach is quite simple. You can call requestIdleCallback or setTimeout directly after render. Your callback will execute as soon as render yields.
ReactDOM.createRoot(rootElement).render(<App />, rootElement)setTimeout(() => console.log('Component rendered.'))Note that requestIdleCallback isn’t available in Safari. So, setTimeout might be the best default.
Tomorrow we’ll tackle the second — more invasive — option for replacing the render callback.