title: Redux + Reselect: Preventing selector recalculation when GPS data updates
body: <p>Recently, I've been working on a very large application using React+Redux with Reselect to memoize data and prevent unnecessary re-renders, and I've hit a specific problem that I can't seem to get past. </p>
  
  <p>In Redux state, I am storing a very large amount of data as an object indexed by id. These objects all have a property on them (let's call it gps) that updates with realtime gps coordinates. </p>
  
  <p>This data is being used in two ways. The first is on a map, where the GPS data is relevant. The second is in the UI, where the GPS data is not relevant. Any time the GPS data is updated on any of the objects, that object is streamed in and replaced in the Redux store, which updates the reference of that object in my selector.</p>
  
  <p>Example Redux Store:</p>
  
  <pre><code>data: {
     dogs: {
        1: {id: 1, name: "name1", gps: [123, 234]},
        2: {id: 2, name: "name2", gps: [123, 234]},
        3: {id: 3, name: "name3", gps: [123, 234]},
        4: {id: 4, name: "name4", gps: [123, 234]}
     }
  }
  </code></pre>
  
  <p>The data in, for example, state.dogs[1].gps might updated 3 to 5 times per second. This can occur in any of the objects in state.data.dogs.</p>
  
  <p>Selectors are written as follows:</p>
  
  <pre><code>const dogDataSelector = state =&gt; state.data.dogs;
  
  const animalsSelector = createSelector(
      dogDataSelector,
      (dogs) =&gt; {
          return Object.keys(dogs).map(id =&gt; {
              return dogs[id];
          })
      }
  )
  </code></pre>
  
  <p>Now, this code works correctly when I want all the dogs, as they update, GPS included.</p>
  
  <p>What I can't seem to figure out would be how to write a selector specifically for the UI that excludes the GPS updates. 99 times out of 100, when a dog updates, it is the GPS updating. The UI doesn't care about the GPS at all, but due to that, the selector sends new data forward which causes the UI to rerender. </p>
  
  <p>I know it is possible to write a new stream that only pushes changes from the DB if the id or name of a dog changes, but this is a solution I am hoping to stay away from, as it will cause a lot of the same data to be stored multiple times in the store. </p>
  
  <p>I have tried the following: </p>
  
  <ul>
  <li>creating a selector that returns a pared-down version of the dogs, with only the id and the name, stored in an object by keys. This selector is used as an input-selector later, but still causes unnecessary selector returns.</li>
  <li>creating a selector that only returns an array of dog ids, and passing this to the UI. A deep equality check is used to prevent re-renders, and the array of ids is used to pluck specific dog objects from state. This is not an ideal solution and seems bad. </li>
  </ul>
  
  <p>If anyone needs any more information or clarification, don't hesitate to ask. </p>
  
  <p>Update: One of the main reasons this is an issue is that any GPS update to any dog will cause the dogDataSelector to return a new reference. This will, in turn, cause animalsSelector fire an update and return a new value. </p>