0

Consider the following code:

import { fromJS } from "immutable"

const initialState = fromJS({
    radiusFilters: [
        { label: "1mi", value: 1 },
        { label: "2mi", value: 2 },
        ...
     ],
     locationOptionFilters: [
        { label: "State", value: "STATE" },
        { label: "City", value: "CITY" },
        ...
      ]
 }

A third party library, react-select, maintains that props for the Select elements be passed in as an array of objects, so it makes sense to me that I convert the above structures to their plain javascript equivalents at some point. These are going to be large structures, and I want the shallow checking that runs automatically when using react-redux with functional components to run as quickly as possible (hence my insistence on using Immutable).

Are there any expensive implications to using the following selector?

const radiusFilterSelector = (state) => state.searchFilters.get("radiusFilters")

export const getRadiusFilters = createSelector([ radiusFilterSelector ], 
    radiusFilters => {
        return radiusFilters.toJS()
     }
)

In the mapStateToProps function of my React container, I'll call the necessary selectors, which will look much like the above, to populate the props that are passed to the component.

Community
  • 1
  • 1
Sean Lindo
  • 1,387
  • 16
  • 33

1 Answers1

2

There is a performance hit from using fromJS() and toJS().

If you are only interested in a shallow comparision you could set initial state with a Map() instead of fromJS() and use toArray() instead of toJS() when you need to convert it back for use with the library.

However I wouldn't worry about performance until you know it is causing a bottleneck. See When is optimisation premature?

Community
  • 1
  • 1
spirift
  • 2,994
  • 1
  • 13
  • 18