Slow error reporting in TSX.

[deftomat]

TypeScript Version: 3.1.0-dev.20180825

Search Terms: jsx, performance, slow

Issue
We find out that an error reporting in medium size React project is quite slow, especially in entry component like App.tsx.

For example, our App.tsx contains a lot of routes (react-router v4). These routes are rendering another components, which contains another bunch of routes, etc.

This approach is quite normal as you actually defining a whole application hierarchy in App.tsx. So, basically this entry component is referring to each component in a project.

We find out that error reporting is much slower in App.tsx than in some other component in hierarchy. Here is a simplified code:

// App.tsx
export default function App() {
  return (
    <Fragment>
      <UntrustedLink href="https://www.typescriptlang.org/" />
      <AdminSection />
      ...
    </Fragment>
  );
}

// AdminSection.tsx
export default function AdminSection() {
  return (
    <Fragment>
      <Route path="..." component={Cmp1} />
      <Route path="..." component={Cmp2} />
      ...
    </Fragment>
  );
}

Now, when I do some mistake in App.tsx like changing href="..." to hrefa="...", VSCode fires a request to tsserver and it responds with an error message. However, it took like 2 seconds to complete.

However, if we add a return type to AdminSection function

export default function AdminSection(): any {

then it is much faster and it took like 1 second.

It was measured in simplified code. In our real code, it took like 3 -4 seconds to report a proper error.

This leads me to my question: Is there any caching for unchanged files? Because it looks like TS is trying to infer the return type of a referred function each time I change an App.tsx even when other files didn't change. Providing an explicit return type obviously speed up this process as TS is probably skipping inferring process. Adding more components without explicit return type makes this slower and slower.

I'm not sure if it is related to JSX. Probably not, but it is definitely most noticeable in React apps.

Tested on macOS, Node 10.9, VSCode (insiders), TS 3.0.1 and 3.1.0-dev.20180825.

Possibly related: #25302

TSServer logs (with inferred return types)
Info 1132 [9:44:0.481] request:
{"seq":27,"type":"request","command":"change","arguments":{"insertString":"a","file":"/Users/deftomat/Development/projects/efa-test/src/pages/App.tsx","line":83,"offset":32,"endLine":83,"endOffset":32}}

Info 1155 [9:44:2.413] event:
{"seq":0,"type":"event","event":"semanticDiag","body":{"file":"/Users/deftomat/Development/projects/efa-test/src/pages/App.tsx","diagnostics":[{"start":{"line":83,"offset":14},"end":{"line":83,"offset":27},"text":"Type '{ hrefa: string; }' is not assignable to type 'Props'.\n Property 'href' is missing in type '{ hrefa: string; }'.","code":2322,"category":"error"}]}}

TSServer logs (with explicit return types)
Info 1630 [9:48:10.441] request:
{"seq":127,"type":"request","command":"change","arguments":{"insertString":"a","file":"/Users/deftomat/Development/projects/efa-test/src/pages/App.tsx","line":83,"offset":32,"endLine":83,"endOffset":32}}

Info 1653 [9:48:11.52] event:
{"seq":0,"type":"event","event":"semanticDiag","body":{"file":"/Users/deftomat/Development/projects/efa-test/src/pages/App.tsx","diagnostics":[{"start":{"line":83,"offset":14},"end":{"line":83,"offset":27},"text":"Type '{ hrefa: string; }' is not assignable to type 'Props'.\n Property 'href' is missing in type '{ hrefa: string; }'.","code":2322,"category":"error"}]}}

[DanielRosenwasser]

Perhaps @weswigham can investigate this. We may need more information to diagnose this though. Could you provide a totally self-contained repro so that we can easily see the difference in speed?

[weswigham]

I'd need a concrete sample to do perf analysis with, otherwise I'd just be guessing. Y'all have a project you can share which exhibits poor performance?

[deftomat]

Hi @weswigham
Well, it is a private project. However, I will try to create something, which will reproduce it. Hopefully, this weekend.

[deftomat]

@weswigham
Here it is: https://github.com/deftomat/error-reporting-in-tsx.
There is no working build process as I replace everything with bunch of useless components and I throw away most of the tooling.

To test it, you can try to add/remove this line and analyse a time necessary to report the problem.

Then, you can search for all Section() occurrences and replace them with Section(): any.
Now, time to report the problem after add/remove of that line will be much shorter.

Also, it could be related to microsoft/vscode#56909 as intellisense will fire after the successful type-check.

[weswigham]

@deftomat Thanks! Your repro seriously helped identify where the issue was!

[deftomat]

@weswigham
TypeScript is on 🔥🔥🔥.
Thank you for all my colleagues as you speed it up a LOT!