I'm probably doing something wrong about react-recollect HOT 6 CLOSED

@davidgilbertson I'm sure you're a busy guy, but I'd love to figure out how to get things working well, attempting to add to a project :)

from react-recollect.

Sorry I've been slow replying, I'm knee deep in a new project.

In an original design I had it so that only one child component in an array of child components would update, but there's edge cases where that doesn't work, so the parent component will still go over all child components.

But when a component is defined as pure (with PureComponent or React.memo) the processing time is negligible.

Are your <ListItem /> components defined as pure? If not, do that, and React shouldn't be trying to re-render the component (which will cause those GET messages).

Let me know how that goes.

from react-recollect.

Makes sense, I will try that and report back!

from react-recollect.

Ok, so made all components in the tree PureComponent but I'm still getting a huge number of logs and slow rendering.

Is it normal to see so many log items with __RR__.debugOn()? Should I see a reduction in logs after making everything a PureComponent?

Should

from react-recollect.

I'm not sure what exactly is going up here. I've made a codesandbox to demonstrate what should be happening. https://codesandbox.io/s/myy44z7j38

Here, the <Product> component has lots of instances, and when you click the favourite button, it updates the store. When it does that, the parent component <Products> will be re-rendered, but because <Product> is pure, only the child components that have changed will be re-rendered (as you can see with the single console log being fired).

A few things to note that might be causing your situation:

• When a parent component loops over some array to output all of the child components, it has to read something for each component, in this case just the ID:

        {filteredProducts && filteredProducts.map(product => (
          <Product key={product.id} product={product}/>
        ))}

So in the console that shows up as:

This is fine, because all the reads are happening on the parent (at the speed of JavaScript, nothing is rendering at this point). Only one of these will actually trigger a render of the child, the one where the property changed.

Also worth noting is that the console logging itself is slow, unfortunately. You can see in that sandbox the difference on/off makes (if you didn't know, in codesandbox you have to select the sandbox in the dropdown to get the console that relates your code)

Apologies for the slow reply!

from react-recollect.

I'm closing this now. FYI @danawoodman the logs to the console are now grouped (in v4.0.0), and I've added a note to the readme mentioning that this can effect performance.

from react-recollect.