Reuse React component in layout and page component

help
1

TL;DR I need to have a ~6k collection available for autocompleting in both layout and page components. It doesn’t need to be reactive. What is best way to approach this with React?

I’m still new to Meteor + React so bear with me if this is obvious. Another way of saying this is that I need a reusable component that gets its own data without being in a container.

I’m working on a stock application. I want the users to be able to search for a stock in the navbar and in a normal page component. The collection is about 6k (not tons of data per record). The data is not reactive and is updated infrequently. The data can also load much slower than the main page – seconds later. So it would be good to delay this 2-3 seconds actually.

I’ve come up with at least two ways to approach this so far, though I’m not sure if what I’ve got is simplest yet.

1) Have a component that is not in a container that calls a method that returns the data

This seems to be the simplest approach (assuming a Meteor method can return arbitrary data without needing to be in a container. It also seems like I could delay the method call with a simple timeout.

2) Have an App data container that passes the data down through child components

This seems unwieldy, with additional code in multiple subcomponents and using normal Meteor subscriptions is always a bit more work than a simple method call.

Is there a better way than #1 to do this? Any reasons why #1 won’t work?

2

Both your ways are the same. It’s only matter of readable design to separate container and rendering components.

I’d recommend you reading mongo docs.
But if you have no time, I’ll give you a hint that you should use mongo’s $text > $search or $regex along with limit option and condition accepting 3+ symbols as search body.

In short - you don’t need full data. It also doesn’t matter if you use subscription or method (though reactivity hits perfomance).

For react consider methods as props.
GL :laughing:

3

I’m fine with loading the full collection on the client. It is a one time thing and will minimize ongoing resources because it’s not a subscription. It will also be fast once the user starts typing. Plan on using react-autocomplete so this is more about how to get the data to the client and not how to actually implement the autocomplete aspect. thanks for the suggestions!

Learning now that Meteor methods don’t block on the client and must be used asynchronously which is not what I expected…