-
Notifications
You must be signed in to change notification settings - Fork 668
Description
I have 3 instances of same component (very similar to the VisibleTodoList
example) where this component has a selector that relies on the given "prop" value to get the state. The only difference is each instance resides under different parent components.
Based on the VisibleTodoList
example, I created makeMapStateToProps
that looks like this:-
const makeMapStateToProps = () => {
const sortableListSelector = makeSortableListSelector();
return (state, ownProps) => ({
list: sortableListSelector(state, ownProps)
});
};
const MyListContainer = connect(makeMapStateToProps, { onSortRequested: sortRequested })(MyList);
export default MyListContainer;
While it works, all 3 instances' render()
get triggered even though only one instance should get rerendered on state change.
After poking around, I found out that makeMapStateToProps()
also provides "prop". So, out of curiosity, I made the following tweak to the above code:-
const makeMapStateToProps = (initialState, initialProps) => {
const sortableListSelector = makeSortableListSelector();
return state => ({
list: sortableListSelector(state, initialProps)
});
};
Now, it functions exactly what I expected and only one instance gets rerendered instead of all 3.
When I printed out initialProps
and ownProps
and perform ===
check...
const makeMapStateToProps = (initialState, initialProps) => {
const sortableListSelector = makeSortableListSelector();
return (state, ownProps) => {
console.log(initialProps, ownProps, initialProps === ownProps);
return ({
list: sortableListSelector(state, initialProps)
});
};
};
... initialProps
has same value as ownProps
, but fails on ===
check.
My question is... why, in my scenario, do I have to use the "prop" provided from makeMapStateToProps()
instead of using the approach from VisibleTodoList
example to prevent all instances of same component from rerendering?
I'm using the following versions:-
"react": "15.3.1"
"react-redux": "4.4.5"
"reselect": "2.5.3"
Thank you.