A perf adventure

This repository contains a very simple app with clear performance targets which it ✨ fails to meet ✨. Our job is to:

• investigate possible performance issues,
• fix issues that are straightforward,
• and develop a plan for those that are not.

You can use any tools you'd like for this task. console.log, debuggers, Google—any of that is fair game.

What you can expect

• It is not important that we definitively hit the performance target in the allocated time. In fact, it is most likely that we do not, and that is ok.
• There are many ways to hit the performance target, or develop a plan that is likely to hit the performance target.
• This app is about 60LOC and has a single, vendored dependency, which itself has no other dependencies.

Source structure

For reference, the directory structure looks like this:

/
    src/
        App.tsx      <- primary logic (about 60 LOC)
        Bindings.tsx <- hooks for keybindings
        vendor/      <- a vendored dependency in a single file
        [...]        <- "the rest" of the scaffolding generated by create-react-app
    public/          <- public images and the like
    [...]            <- more scaffolding, e.g., package.json

Running the App

This is a simple create-react-app, and can be run in the usual way:

npm install
npm start

Getting Started

Once npm start is run, the development server will open the page. By default this will be at localhost:3000.

Once the page is open, you should see clear instructions for how to reproduce the bug.