Improve documentation on browser integration with React

The getting started guide at https://mswjs.io/docs/getting-started/integrate/browser (and various other places) suggests the following to integrate with a React app.

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start()
}

ReactDOM.render(<App />, document.getElementById('root'))

I found that with a very basic React app based on create-react-app that the app had rendered and made API calls before the service worker had finished starting and so it was unable to intercept them.

After a fair amount of frustration trying to figure out the problem, I tried the following and it resolved the issue. Can I suggest that the getting started guide and other documentation is updated to include something similar?

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

function renderApp() {
  ReactDOM.render(<App />, document.getElementById('root'))
}

if (process.env.NODE_ENV === 'development') {
  const { worker } = require('./mocks/browser')
  worker.start().then(() => renderApp())
} else {
  renderApp()
}

[kud]

You saved my day @mike-trout

I was struggling with this, I understood that I had a lag between the rendering and the worker but didn’t understand exactly why my first requests weren’t caught by msw.

I thought it was the idea of https://mswjs.io/docs/api/setup-worker/start#waituntilready but apparently no, or it doesn’t work well…?

Well, thank you!

[kettanaito]

Documentation now has the “Deferred mounting” recipe.

This should be helpful as a reference to anyone who stumbles upon a similar issue. Thank you for raising this!