Looking for a more efficient sorting algorithm in javascript ES6

Question

Let me know if this not appropriate to ask that here.

I'm currently building a react app with a map that has different markers (up to 1000) and they each have their specificity. A user can set different filters and the app should show the relevant one. I currently have an algorithm that works but I'm sure we can make it more efficient and less resource intensive.

Here is the code I have to far:

Will show just what's important.

To explain in the render I have a map where I display all the marker and under I have a list of all the filter where a user can click on it to apply this filter.

Thank you for your contribution!

class SomeComponent extends Component {
    state = {
        allMarkers: [
            {id: "1", filter: ['weekout', 'restaurant'], latlng: {latitude: 37.78825, longitude: -122.4224},title:'42'},
            {id: "2", filter: ['weekout'], latlng: {latitude: 37.78814, longitude: -122.4314},title:'Taverne du mont belon'},
            {id: "3", filter: ['restaurant', 'party'], latlng: {latitude: 37.78825, longitude: -122.1224},title:'Chez Lapin'},
            {id: "4", filter: ['party'], latlng: {latitude: 37.78825, longitude: -122.3324},title:'Pizza toto'},
            // up to 1000
        ],
        filteredMarkers: [
        ],
        filters: [
            {id: "1", selected: true, text: 'filter', filter: 'weekout'},
            {id: "2", selected: true, text: 'filter', filter:'pin'},
            {id: "3", selected: true, text: 'filter', filter: 'party'},
            {id: "4", selected: true, text: 'filter', filter: 'restaurant'},
            {id: "5", selected: false, text: 'filter', filter: 'beer'},
            {id: "6", selected: true, text: 'filter', filter:'love'},
            {id: "7", selected: false, text: 'filter', filter:'yum'},
          ],
    }

  filterMarkers() {
    let activefilters = this.state.filters.map((item) => item.selected && item.filter);
    let markers = this.state.allMarkers;

    let filteredmarkers = markers.map((item) => activefilters
    .some(r => item.filter.includes(r)) && item)
    .filter((item) => item)
    this.setState({...this.state, filteredMarkers: filteredmarkers})
  }

  selectedFilter(id) {
    let selectedfilters = this.state.filters
    selectedfilters.map((filter) => filter.id == id ? filter.selected = !filter.selected : null)
    this.setState({...this.state, filters: selectedfilters})
    this.filterMarkers();
  }

  render() {
      return(
        <View>
        <MapView >        
          {this.state.filteredMarkers.map((marker, idx) => (
            <Marker
              key={idx}
              identifier={marker.id}
              coordinate={marker.latlng}
            />
          ))}
        </MapView>
            <FlatList 
            data={this.state.filters}
            renderItem={({item, idx}) => 
            <TouchableOpacity onPress={() => this.selectedFilter(item.id)}>
            <View >
                <Image source={item.img} idx={idx}/>
            </View>
            </TouchableOpacity>          
            }
            />
        </View>

      ) 
  }
}

Questions like this on how to optimize working code are better suited on codereview.stackexchange.com. This site is focused on actual code problems — charlietfl
– charlietfl, Commented Oct 28, 2018 at 0:18
1000 isn't that big of a number. Are you having performance issues, or just curious? Whenever you are spending time on performance like this, it would probably be better to spend the time on user experience instead. — Matt Way
– Matt Way, Commented Oct 28, 2018 at 0:23
.some(r => item.filter.includes(r)) is a good hint you should maybe be using a set. selectedfilters.map should be selectedfilters.forEach. — Ry-
– Ry- ♦, Commented Oct 28, 2018 at 0:26
@charlietfl, Thank you I will make sure to go on codereview.stackexchange.com next time. — Sydney C.
– Sydney C., Commented Oct 28, 2018 at 12:23
@MattWay, well I tried with 400 marker points and I noticed some lagging. Also was curious to get some quickwins — Sydney C.
– Sydney C., Commented Oct 28, 2018 at 12:23

Matt Way · Accepted Answer · 2018-10-28 00:53:14Z

Whenever you are trying to do optimisation of any kind, you are usually going to trade between speed and memory. But first, lets analyse your current method:

// don't need to worry here as your filter set is small
let activefilters = this.state.filters.map((item) => item.selected && item.filter)

let markers = this.state.allMarkers
let filteredmarkers = markers
  // will run totalMarkers * activeFilters * filtersPerMarker
  .map((item) => 
    activefilters.some(r => item.filter.includes(r)) && item
  )
  // will run totalMarkers
  .filter((item) => item)

So because you only have a few filters, if you were to grow more markers, the performance should grow more or less linearly in complexity, which is fine. This means that doing things like masks etc. will only get you a small performance gain.

If you truly wanted to optimise this, then you would be aiming for O(1), which you could achieve with caching. To do this, you basically restructure your data in a way by which you can perform an instant lookup. If your markers are static, then this is fine, but if you add & remove markers often (or change their respective filters), then you will have to have a strategy to recache your data. You could do something like the following:

// run this once, and update when markers are added/removed or marker filters change
const cache = {}
state.allMarkers.forEach(marker => {
  const id = marker.filter.join('-')
  if(!cache[id]){ cache[id] = [] }
  cache[id].push(marker)
})

Now to get the filtered results, you simply lookup the cache with the modified id.

const filterId = this.state.filters
  .filter(item => item.selected)
  .map(item => item.filter)
  .join('-')

const filteredMarkers = cache[filterId] || []

There are likely better ways to handle the ids, but hopefully you get the idea.

The point here is that it depends on how your users interact with the data, and how much data you have. Again, 1000 is small enough to not notice any difference in your algorithm choice, and doing anything more than a simple filter like you are using is going to complicate things unnecessarily. It is also more likely that any performance issues will come from rendering large sets, not organsing them.

So in other words, write the simplest, most readable code, and only optimise if you have a really good reason to (i.e. you have benchmarked and figured out your actual bottleneck if you even have one at all). Spend more time making you application a beautiful experience!

Thank you for that, this is exactly the kind of solution I wish I came up with ! It makes total sense.

Collectives™ on Stack Overflow

Looking for a more efficient sorting algorithm in javascript ES6

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related