249b73f8c6
## Issue
Components render unnecessarily due to reference invalidation from `selectMutedChannels` selector.
## Notes
`selectMutedChannels` run and return a new reference each time the app gains focus. `createSelector` will not help in this case, because we are indeed invalidating the data in the store in `USER_STATE_POPULATE`.
## Changes
- Don't update the state if the array is identical in content.
- Fixed `selectMutedChannels` to return the reference from the store, so `createSelector` is not needed.
- Also, the filtering is not needed because we've already done it in the reducer.
## Comments
I've done some profiling on large blocklists. The time needed for the array comparison is still an order magnitude lower than the time needed to render all the Components that got incorrectly marked by this.
The ideal solution is for the sync code to return a hash or timestamp of the array, so that we can compare that instead of the array.
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
// @flow
|
|
import * as ACTIONS from 'constants/action_types';
|
|
import { handleActions } from 'util/redux-utils';
|
|
|
|
const defaultState: BlocklistState = {
|
|
blockedChannels: [],
|
|
};
|
|
|
|
export default handleActions(
|
|
{
|
|
[ACTIONS.TOGGLE_BLOCK_CHANNEL]: (state: BlocklistState, action: BlocklistAction): BlocklistState => {
|
|
const { blockedChannels } = state;
|
|
const { uri } = action.data;
|
|
let newBlockedChannels = blockedChannels.slice();
|
|
|
|
if (newBlockedChannels.includes(uri)) {
|
|
newBlockedChannels = newBlockedChannels.filter((id) => id !== uri);
|
|
} else {
|
|
newBlockedChannels.unshift(uri);
|
|
}
|
|
|
|
return {
|
|
blockedChannels: newBlockedChannels,
|
|
};
|
|
},
|
|
[ACTIONS.USER_STATE_POPULATE]: (state: BlocklistState, action: { data: { blocked: ?Array<string> } }) => {
|
|
const { blocked } = action.data;
|
|
const sanitizedBlocked = blocked && blocked.filter((e) => typeof e === 'string');
|
|
|
|
const next = sanitizedBlocked;
|
|
const prev = state.blockedChannels;
|
|
|
|
if (next && prev && prev.length === next.length && prev.every((value, index) => value === next[index])) {
|
|
return state;
|
|
}
|
|
|
|
return {
|
|
...state,
|
|
blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,
|
|
};
|
|
},
|
|
},
|
|
defaultState
|
|
);
|