React Native Redux - Limiting component rerenders caused when redux state changes (for array children) - react-native

Question

I am passing redux state into my component using the following
const mapStateToProps = state => ({
rdx_myColorPreference: state.profile.mySelf.preferences[4],
});
My goal is that the component only rerenders when the 5th child in the preferences array is changed (i.e. preferences[4]....which relates to color preferences).
Problem is that when ANY child in the preferences array changes (e.g. preferences[0]....which relates to food preferences), the component rerenders.

Answer 1

Each child should be a pure component (use React.memo) and when you pass a function from the parent then make sure you don't pass a newly created function each time the parent renders so you need to do onChange={function} and not onChange={()=>newly created function}.
Here is an example:
const { Provider, useDispatch, useSelector } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { memo, useCallback } = React;
const initialState = {
items: [
{ id: 1, value: '' },
{ id: 2, value: '' },
{ id: 3, value: '' },
],
};
//action types
const CHANGE_ITEM = 'CHANGE_ITEM';
//action creators
const changeItem = (id, value) => ({
type: CHANGE_ITEM,
payload: { id, value },
});
const reducer = (state, { type, payload }) => {
if (type === CHANGE_ITEM) {
const { id, value } = payload;
return {
...state,
items: state.items.map((item) =>
item.id !== id ? item : { ...item, value }
),
};
}
return state;
};
//selectors
const selectItems = (state) => state.items;
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
() => (next) => (action) => next(action)
)
)
);
//use React.memo to create a pure component
const Item = memo(function Item({
item: { id, value },
onChange,
}) {
console.log('render item wih id:', id);
return (
<ul>
{id}
<input
type="text"
value={value}
onChange={(e) => onChange(id, e.target.value)}
/>
</ul>
);
});
const App = () => {
const items = useSelector(selectItems);
const dispatch = useDispatch();
//create this onChange function on mount using React.useCallback
const onChange = useCallback(
(id, value) => dispatch(changeItem(id, value)),
//dependencies is dispatch but that will never change so it is
// only created on mount
[dispatch]
);
return (
<ul>
{items.map((item) => (
<Item
key={item.id}
item={item}
onChange={onChange}
/>
))}
</ul>
);
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>