4d01452447
When comments are refreshed, each `Comment` gets rendered 4-5 times due to reference invalidation for `othersReacts` (the data didn't actually change).
For selectors without transformation, there is no need to memoize using `createSelector` -- just access it directly. Also, don't do things like `return a[id] || {}` in a reducer, because the reference to the empty object will be different on each call.
Always return directly from the state so that the same reference is returned.
This simple change avoided the wasted resources needed for `createSelector`, and reduced to render to just 2 (initial render, and when reactions are fetched).
30 lines
1.3 KiB
JavaScript
30 lines
1.3 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import Comment from './view';
|
|
import { makeSelectClaimIsMine, makeSelectClaimForUri } from 'redux/selectors/claims';
|
|
import { doResolveUri } from 'redux/actions/claims';
|
|
import { doToast } from 'redux/actions/notifications';
|
|
import { selectMyReactsForComment, selectOthersReactsForComment } from 'redux/selectors/comments';
|
|
import { doCommentReact } from 'redux/actions/comments';
|
|
import { selectActiveChannelClaim } from 'redux/selectors/app';
|
|
|
|
const select = (state, props) => {
|
|
const activeChannelClaim = selectActiveChannelClaim(state);
|
|
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
|
|
const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
|
|
|
|
return {
|
|
claim: makeSelectClaimForUri(props.uri)(state),
|
|
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
|
|
myReacts: selectMyReactsForComment(state, reactionKey),
|
|
othersReacts: selectOthersReactsForComment(state, reactionKey),
|
|
activeChannelId,
|
|
};
|
|
};
|
|
|
|
const perform = (dispatch) => ({
|
|
resolve: (uri) => dispatch(doResolveUri(uri)),
|
|
react: (commentId, type) => dispatch(doCommentReact(commentId, type)),
|
|
doToast: (params) => dispatch(doToast(params)),
|
|
});
|
|
|
|
export default connect(select, perform)(Comment);
|