Meteor and withTracker: why is a component rendered twice?

Question

I have created a bare-bones Meteor app, using React. It uses the three files shown below (and no others) in a folder called client. In the Console, the App prints out:

withTracker
rendering
withTracker
rendering
props {} {}
state null null

In other words, the App component is rendered twice. The last two lines of output indicate that neither this.props nor this.state changed between renders.

index.html

<body>
  <div id="react-target"></div>
</body>

main.jsx

import React from 'react'
import { render } from 'react-dom'

import App from './App.jsx'

Meteor.startup(() => {
  render(<App/>, document.getElementById('react-target'));
})

App.jsx

import React from 'react'
import { withTracker } from 'meteor/react-meteor-data'

class App extends React.Component {
  render() {
    console.log("rendering")
    return "Rendered"
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("props", prevProps, this.props)
    console.log("state", prevState, this.state)
  }
}

export default withTracker(() => {
  console.log("withTracker")
})(App)

If I change App.jsx to the following (removing the withTracker wrapper), then the App prints only rendering to the Console, and it only does this once.

import React from 'react'
import { withTracker } from 'meteor/react-meteor-data'

export default class App extends React.Component {
  render() {
    console.log("rendering")
    return "Rendered"
  }

  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps, this.props)
    console.log(prevState, this.state)
  }
}

What is withTracker doing that triggers this second render? Since I cannot prevent it from occurring, can I be sure that any component that uses withTracker will always render twice?

Context: In my real project, I use withTracker to read data from a MongoDB collection, but I want my component to reveal that data only after a props change triggers the component to rerender. I thought that it would be enough to set a flag after the first render, but it seems that I need to do something more complex.

score 0 · Answer 1 · answered Jun 06 '20 at 12:59

This a "feature", and it's not restricted to Meteor. It's a feature of asynchronous javascript. Data coming from the database arrives after a delay, no matter how quick your server is.

Your page will render immediately, and then again when the data arrives. Your code needs to allow for that.

One way to achieve this is to use an intermediate component (which can display "Loading" until the data arrives). Let's say that you have a component called List, which is going to display your data from a mongo collection called MyThings

const Loading = (props) => {
  if (props.loading) return <div>Loading...</div>
  return <List {...props}></List>
}

export default withTracker((props) => {
  const subsHandle = Meteor.subscribe('all.myThings')
  return {
    items: MyThings.find({}).fetch(),
    loading: !subsHandle.ready(),
  }
})(Loading)

It also means that your List component will only ever be rendered with data, so it can use the props for the initial state, and you can set the PropTypes to be isRequired

I hope that helps

In my barebones test, there is no data coming from a database. The `withTracker` function sees nothing changing, and yet it triggers the render a second time. In your example, yes, there is data arriving from the database that needs to be tracked. In your case, yes, it makes sense for `withTracker` to push new props to your `Loading` component. So my question remains: why does `withTracker` initiate a second render although the `props` it provides are identical both times? — James Newton, Jun 06 '20 at 15:53

score 0 · Answer 2 · answered Mar 30 '21 at 14:36

Unsure if you're running into the same error I discovered, or if this is just standard React behavior that you're coming into here as suggested by other answers, but:

When running an older (0.2.x) version of react-meteor-data on the 2.0 Meteor, I was seeing two sets of distinct renders, one of which was missing crucial props and causing issues with server publications due to the missing data. Consider the following:

// ./main.js
const withSomethingCount = (C) => (props) => <C { ...props } count={ ... } />
const withPagination = (C) => (props) => <C { ...props } pagination={ ... } />
const withSomething = withTracker((props) => {
  console.log('withSomething:', props);
});

// Assume we're rending a "Hello, World" component here.
export const SomeComponent = withSomethingCount(withPagination(withSomething(...)));

// Console
withSomething: { count: 0 }
withSomething: { count: 0, pagination: { ... } }  
withSomething: { count: 0 }
withSomething: { count: 0, pagination: { ... } }

For whatever reason, I was seeing not only N render calls but I was seeing N render calls that were missing properties in a duplicate manner. For those reading this and wonder, there was one and only one use of the component, one and only one use of the withTracker HoC, the parent HoCs had no logic that would cause conditional passing of props.

Unfortunately, I have not discovered a root-cause of the bug. However, creating a fresh Meteor application and moving the code over was the only solution which removed the bug. An in-place update of the Meteor application (2.0 to 2.1) and dependencies DID NOT solve the issue... however a fresh installation and running a git mv client imports server did solve my problems.

I've regrettably had to chalk this up to some form of drift due to subsequent Meteor updates over the two years of development.

Meteor and withTracker: why is a component rendered twice?

2 Answers2