-
Notifications
You must be signed in to change notification settings - Fork 158
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WIP] New hooks #298
[WIP] New hooks #298
Changes from 20 commits
d8ad782
c4c9f62
b1281d1
5932980
7460169
0b99ffe
d94b254
98d80d2
b9404da
e075fba
0d9f3ba
e11f8bc
d5b5f8e
f59dd39
ba67ebb
37ff546
783dad9
9aec19d
754953a
9fa3df9
9ed323f
9dabef9
b06c4cd
6d056ec
51b2f38
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
meteor/react-accounts | ||
===================== | ||
|
||
A couple of simple hooks for accessing Meteor Accounts state. |
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
/* global Package */ | ||
|
||
Package.describe({ | ||
name: 'react-accounts', | ||
summary: 'React hook for reactively tracking Meteor data', | ||
version: '0.9.0', | ||
documentation: 'README.md', | ||
git: 'https://github.com/meteor/react-packages', | ||
}); | ||
|
||
Package.onUse(function (api) { | ||
api.versionsFrom('1.10'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's start at least at 1.12 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The reason for this is simply that I can't get the tests to run on anything newer than Meteor 1.10... |
||
api.use('tracker'); | ||
api.use('typescript'); | ||
|
||
api.mainModule('react-accounts.ts', ['client', 'server'], { lazy: true }); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"name": "meteor-react-accounts", | ||
"scripts": { | ||
"make-types": "npx typescript *.ts --declaration --emitDeclarationOnly --outDir types" | ||
}, | ||
"dependencies": { | ||
"@testing-library/react": "^10.0.2", | ||
CaptainN marked this conversation as resolved.
Show resolved
Hide resolved
|
||
"@types/meteor": "^1.4.42", | ||
"@types/react": "^16.9.34", | ||
"react": "16.13.1", | ||
"react-dom": "16.13.1", | ||
"react-test-renderer": "16.13.1", | ||
"typescript": "^4.0.3" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { Meteor } from 'meteor/meteor' | ||
import { Tracker } from 'meteor/tracker' | ||
import { useState, useEffect } from 'react' | ||
|
||
export const useUserId = () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I just watched your talk in Impact Meteor 2020 and when you first introduced this guy I thought it would be global managed. I'm wondering that we are opening a computation every time we need userId in a component. I thought zustand would better fit this problem, although it might not be necessary because I don't know the impacts of openings many computations. What do you think? It could be applied in others states as well. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Computations are incredibly cheap in practice. In Blaze they are the backbone of the entire system. In Meteor, for years when using Still, to recycle some of the more expensive reactive sources (not the computation itself) like an expensive reactive subscription, you can always hoist the computation up your react tree (er, or down to root), and then use the context API to feed the result of that one computation to mulitple hooks. I showed how to do that in the hook introduction blog post (here is the gist). Be aware though, this can introduce some subtle timing issues with reactivity and the React lifecycle. It's easier (and cheap) to just use a lot of computations. ;-) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. One point I mean to stress whenever we ship these, is they are not solving a problem with the current HOC/hook - These new hooks are the result of some exploratory effort, to see if we can gain some advantage by implementing things in a more custom way. What I found was that some of my earlier assumptions (which I did express in the Impact Meteor 2020 preso) did not pan out - just exposing a cursor was actually quite a bit slower and less efficient than The main advancements we did achieve here are in 2 very specific cases (so far anyway, there may be others when we/I get to them). Along the way, I also discovered some improvements we should make to |
||
const [userId, setUserId] = useState(Meteor.userId()) | ||
CaptainN marked this conversation as resolved.
Show resolved
Hide resolved
|
||
useEffect(() => { | ||
const computation = Tracker.autorun(() => { | ||
setUserId(Meteor.userId()) | ||
}) | ||
return () => { | ||
computation.stop() | ||
} | ||
}, []) | ||
return userId | ||
} | ||
|
||
export const useUser = () => { | ||
const [user, setUser] = useState(Meteor.user()) | ||
useEffect(() => { | ||
const computation = Tracker.autorun(() => { | ||
setUser(Meteor.user()) | ||
}) | ||
return () => { | ||
computation.stop() | ||
} | ||
}, []) | ||
return user | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { Meteor } from 'meteor/meteor'; | ||
export declare const useUserId: () => string; | ||
export declare const useUser: () => Meteor.User; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can probably start at v1.0.0
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I'll make that change in a new PR