Skip to content

Feature Request: Allow optionsCache to be shared by multiple Async Select componentsΒ #4093

@MrLeebo

Description

@MrLeebo

Feature Request

Use Case: I'd like to be able to share a cache between multiple Async Select components that are loading options from the same data source. For instance, a table grid component where each Table Row is editable with an Async Select that fetches from the same source.

I believe a previous version of react-select let you set a shared cache using a cache prop, but that doesn't seem to be the case anymore. Perhaps the cacheOptions prop can just accept a cache object?

const sharedCache = {}

<Async
  cacheOptions={sharedCache}
  loadOptions={getValues}
/>

As a workaround, I can override component's cache using a ref and this seems to work, but may be brittle as it relies on an implementation detail:

const cacheRef = (ref) => ref && (ref.optionsCache = sharedCache)

<div>
  <label>From</label>
  <Async 
    ref={cacheRef}
    cacheOptions
    loadOptions={getValues}
  />
</div>

<div>
  <label>To</label>
  <Async 
    ref={cacheRef}
    cacheOptions
    loadOptions={getValues}
  />
</div>

I am using react-select v3.0.8

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue/reviewedIssue has recently been reviewed (mid-2020)

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions