{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/react-select-with-less-typing-lag",
  "description": "Fix lagging in `react-select`. Change `filterOption` to `ignoreAccents: false` for faster typing experience with 1000+ items.",
  "path": "/posts/react-select-with-less-typing-lag",
  "publishedAt": "2019-04-27T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "react"
  ],
  "textContent": "This is going out to all those people using react-select with 1000+ items to render. To those people typing into the select and saying out loud \"it's _so_ laggy.... This can't be... It's 2019... I mean, right?\" To the people who read this GitHub issue top to bottom 30 times and still came back unsure of what to do. This is for you.\n\n\n\nI'm lying. Mostly this goes out to me. I have a select box. I need it to render 2000+ items. I want it to be lovely. I want my users to be delighted as they use it. I want them to type in and (_this is the crucial part!_) for the control to feel responsive. Not laggy. Not like each keypress is going to Jupiter and back before it renders to the screen.\n\nAmongst the various gems on the GitHub issue are shared CodeSandboxes illustrating ways to integrate react-select with react-window. That's great and they do improve things. However, they don't do much to improve the laggy typing feel. There's brief mention of a props tweak you can make to react-select; this:\n\nWhat does this do? Well, this improves the typing lag experience _massively_. For why? Well, if you look at the code you find that the default value is ignoreAccents: true. This default makes react-select invoke an expensive (and scary sounding) function called stripDiacritics. Not once but twice. Ouchy. And this kills performance.\n\nBut if you're okay with accents not being ignored (and _spoiler_: I am) then this is the option for you.\n\nHere's a CodeSandbox which also includes the ignoreAccents: false tweak. Enjoy!\n\n[](https://codesandbox.io/s/zn70lqp31m?fontsize=14)",
  "title": "react-select with less typing lag"
}