useMemo

Loading "useMemo"
πŸ‘¨β€πŸ’Ό We have a combobox that's calling searchCities every render. This function is really slow because it's attempting to intelligently sort thousands of items based on the user's filter input.
Your job is to improve performance by wrapping searchCities in useMemo.
To observe the performance problem with searchCities, open the Chrome DevTools "Performance" tab, click the settings gear and set CPU from "no throttling" to "6x slowdown." Then select any item from the dropdown. Next, click the "Record" circle icon in the devtools to start a recording. Then click on "force rerender" and then click the "Record" circle again to stop the recording. You'll notice that searchCities was called when it should not have been (and it took a LONG time to run). Your goal is to make it so searchCities is only called when the filter changes.
Tip: Below the flame graph, you'll find a few tabs. One of those is "Call Tree" and in that you can search the functions that were called. You'll know you got this right when searchCities doesn't appear.
Login to get access to the exclusive discord channel.
  • General
    Not able to launch editor
    Lenssen:
    I'm stuck here and not able to launch the edior
    1 Β· 10 hours ago
  • General
    βš›οΈFundamentals
    Error boundary good practice
    Lloren πŸš€:
    I have always wondered if the error boundary is there a limit of error boundary that you can impleme...
    • βœ…1
    1 Β· a day ago
  • General
    Script to save playground folder
    larissapissurno πŸš€:
    Hi all, I personally like to take notes on the playground files, so in order to not lose this notes ...
    1 Β· 3 days ago
  • General
    Received this error when running the setup script for React Fundamentals
    ChrisP πŸš€:
    Hey guys, I am completely blocked at the moment. When I clone and run the setup for react fundamenta...
    • βœ…1
    2 Β· 6 days ago
  • General
    Unexpected server error (workshop-app does not load onboarding step)
    Matias 🌌 πŸš€:
    Hey! πŸ‘‹ I installed the free workshop "Build React Hooks" last week with no issues. Yesterday, whe...
    • βœ…1
    3 Β· 8 days ago
  • General
    Eye opening moment in 05/06 (β€žsatisfiesβ€œ operator of typescript)
    Chrigi πŸš€:
    Up until today I was not aware that having the type annotation on a variable is actually a type-cast...
    • πŸ™Œ2
    • βœ…1
    2 Β· 9 days ago
  • General
    Launch editor error: Could not open 'index.html' from:'playground' in the editor.
    Japhet πŸš€ πŸ†:
    I'm encountering an issue when trying to open a link from the file list. The error message I receive...
    • βœ…1
    15 Β· 5 days ago
  • General
    Failed to fetch dynamically imported module...
    FacuPerezM:
    I am getting this error out of nowhere, in the 'test' tab inside the Workshop app. ``` Failed to f...
    • βœ…1
    3 Β· 12 days ago
  • General
    Runninng Learning app on iPad?
    marcus_polonus πŸš€:
    Hi all, Did anyone managed to setup learning app on iPad? I tried to use codesandbox, but when I am...
    0 Β· 13 days ago
  • General
    Clicking an exercise file launch VIM instead of VS Code
    DBattou πŸš€:
    I started going through the workshops, everything is setup and working fine except for opening a fil...
    • βœ…1
    2 Β· 17 days ago
  • General
    Epicshop not saving the video resolution
    Toni πŸš€:
    Playback speed and caption settings are saved, but the video resolution always defaults to auto. Is ...
    • βœ…1
    7 Β· 18 days ago
  • General
    Launch editor error: spawn code ENOENT
    Andrew Elans 🌌 πŸš€:
    Clicking index.html gives this error in VS Code. Both from Chrome and Safari. Anyone?
    • βœ…2
    4 Β· a month ago
  • General
    Welcome to EpicReact.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Welcome to the first of many posts in the EpicReact.dev channel! Take a moment to introduce yourself...
    • πŸš€5
    40 Β· 2 days ago