Slow error reporting in TSX. #26680

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"}]}}