useTracker with Context API

Hello there!

Which is the best way to use “useTracker” in conjunction with the Context API?
As an example, I’d like to save the user profile (the one returned from Meteor.user()) globally, using React context.

Can you help me understand the best way to do it?

Thank you in advance :slight_smile:

I would look to the following PR for inspiration until we get it published:

I’ll take a look! Thanks :slight_smile:

Just another question…

Can you explain me why useTracker runs twice in my component?

You can find some examples of using Context API in the useTracker announcement article.

It’s mostly because of the React lifecycle. It runs once in the initial render without making any side effects, and then again in useEffect where it can set up side effects (observers). It has to be this way to support suspense, concurrent mode, error boundaries, etc.


Is it normal, then?

Anyway, is there a best way to limit the re-rendering with useTracker?

Focusing too much on limiting rerenders can lead to some anti-patterns, and premature optimizations. That can lead to a lot of inappropriate use of useMemo for example, which I often see from junior devs in my project teams. The “React way” is to just make your renders cheap, and stop worrying about it.

If you’ve measured, and you are sure you have performance issues, you can pass a skipUpdate comparator which can check for specific changes to your data. It works kind of like how shouldComponentUpdate used to work.

Just be super careful. Checking something like an updated timestamp is fast and easy, but doing something like a deep-equal in your comparator is a big anti-pattern, since it’s performance is so indeterminate.

If you are looking for maximum performance with list views, you may also be interested in the upcoming useFind. Check it out!

Thank you!

It’s all almost clear.

My only concern was with the fact that, using “useContext” in my React app, I saw my reactive data printed multiple times and I was worried if this was a normal behaviour.

This is it!