I'm using the Authenticate component in an app that uses React and Redux. Using the React Perf add-on, I found that my instance of this component was rendering on each and every Redux state change, causing a lot of wasted rendering time (since my app has very frequent state changes).
After some investigation, I found that this occurs because Authenticate subscribes to accounts.instance.store (see https://github.com/js-accounts/react/blob/master/packages/react/src/authenticate.js#L25). In my use case, I was passing my app's Redux store into AccountsClient.config (when initializing the overall accounts package), which resulted in Authenticate subscribing to my app's Redux store.
I fixed my problem by not passing in my app's Redux store to AccountsClient.config, which allows accounts to use its own default, private Redux store. However, this may not be a practical solution for all users. I would recommend that Authenticate is modified so that it does not render on each and every state change -- only those state changes that are relevant, to avoid wasted rendering.
I'm using the
Authenticatecomponent in an app that uses React and Redux. Using the React Perf add-on, I found that my instance of this component was rendering on each and every Redux state change, causing a lot of wasted rendering time (since my app has very frequent state changes).After some investigation, I found that this occurs because
Authenticatesubscribes toaccounts.instance.store(see https://github.com/js-accounts/react/blob/master/packages/react/src/authenticate.js#L25). In my use case, I was passing my app's Redux store intoAccountsClient.config(when initializing the overall accounts package), which resulted inAuthenticatesubscribing to my app's Redux store.I fixed my problem by not passing in my app's Redux store to
AccountsClient.config, which allows accounts to use its own default, private Redux store. However, this may not be a practical solution for all users. I would recommend thatAuthenticateis modified so that it does not render on each and every state change -- only those state changes that are relevant, to avoid wasted rendering.