Performance Optimized Selector Use

import { createSelector } from 'reselect';

// Assume we have a state shape like this:
// {
//   shop: {
//     items: [],
//     isLoading: false,
//     error: null
//   }
// }

// First, define a simple selector to retrieve the relevant slice of state.
const selectShopItems = state => state.shop.items;

// Then, create a memoized selector using createSelector from reselect.
// This selector will only recompute when the `items` slice of state actually changes,
// preventing unnecessary re-renders if the result is the same.
const selectExpensiveItems = createSelector(
  [selectShopItems],
  (items) => items.filter(item => item.price > 1000)
);

// Usage example of the memoized selector within a React component.
// In this scenario, only when the shop items change will `ExpensiveItemsComponent` re-render.
// connect is from react-redux, which binds the Redux store with the React component.
import { connect } from 'react-redux';

const ExpensiveItemsComponent = ({ expensiveItems }) => (
  // Component that renders expensive items
  <div>{/* Render expensive items here. */}</div>
);

const mapStateToProps = state => ({
  expensiveItems: selectExpensiveItems(state)
});

// Connect the component to the Redux store using the mapStateToProps with the memoized selector.
export default connect(mapStateToProps)(ExpensiveItemsComponent);