How to: React, reactivity and Components?

react
1

Hi there, I start a side project to get to know React with Meteor. (I come from Blaze and have basic knowledge about React.)

Meteor’s core features:

  • Tracker / Reactive Var
  • Pub / Sub / (Mini)Mongo
  • Meteor Methods

Questions

  1. Is it better to handle Reactivity (like MongoDB-Queries) in Root Components and pass the values as props OR fetch data inside the components?
  2. Is useContext / Redux used or do you use ReactiveVars and MiniMongo for this?
  3. Are there any Resources for Best Practices?

Thank you for helping me having a start :star:

2

I adhere to the thinking to keep the variables on its own component. This means reactivity should happen on the component where it is needed. This minimizes re-renders where it’s not necessary. I move up the tree only when the reactivity affects multiple components; in this case, I use context to pass the reactive values.

There is a shortcut with Meteor in using Session to affect reactivity from one component to any component. Just note that managing this requires effort as it takes time to figure out where the changes in the session happen. Quick development but high technical debt.

I mostly subscribe to the least data that I can when requiring reactivity and just use a method to query the rest of the data as needed. As an example, in a chat room, the subscription is in the room and messages are queried by methods. No subscription if no reactivity is required by the functionality

2 Likes