Improving React TypeScript Cheatsheet

[filiptammergard]

I have some concerns with the current shape of React TypeScript Cheatsheet:

• A large portion of the content is old and outdated.

As an example the HOC Cheatsheet is using class components. In many places it says that "this section is extremely new". This content is not new anymore, it's rather outdated. I think this can harm the confidence in the rest of the cheatsheet and give a feeling that the entire cheatsheet is deprecated or outdated.

• I'm not sure the separation in different "cheatsheets" (Basic, Advanced, HOC, Migration) is very useful.

Since HOC and Migration both contain a bunch of outdated content, and we're still only receiving PRs and suggestions for Basic and Advanced, I'm assuming HOC and Migration are not used much anymore. We're saying that these cheatsheets are new and that help is wanted. However, I don't see we'll spend time on these going forward. I think they would be better off just getting a small page each instead of promoting them as separate cheatsheets.

Also, I think the separation between "Basic" and "Advanced" also cause some unnecessary friction. When navigating the site, you can't just browse to "Hooks" if that's what you're interested in, you first have to think about wether your topic might be basic or advanced.

• The large amount of content puts a big burden on maintainers to maintain.

I've been spending some time now and then to go through pages to make them up-to-date and hopefully a bit more future-proof. But the large amount of content makes going through it all almost impossible. I think React TypeScript Cheatsheet has huge potential to stay relevant and keep providing value, but at some point I think it'd be good to think about what we should throw away to make the content that stays even sharper, and ensure a consistent feeling that this cheatsheet is relevant and up-to-date.

• Some important things are missing.

This tweet from Matt Pocock gives me a feeling that React TypeScript Cheatsheet has the potential of being the canonical place for documenting React types until they are in react.dev. We already have this: https://react-typescript-cheatsheet.netlify.app/docs/advanced/types_react_api But I think something that mimics the react.dev reference page would be better, to have a short dedicated page for each of the (most important) types with some examples of usage.

Instead of this structure:

• Basic
  • Setup
  • Getting Started
    • Typing Component Props
    • Function Components
    • Hooks
    • Class Components
    • ...
  • ...
• HOC
  • ...
• Advanced
  • ...
  • @types/react and @types/react-dom APIs
• Migration
  • ...

I think something like this would be better:

• The Basics
  • Setup
  • Function Components
  • Class Components
  • Props
  • ...
• Hooks
  • useRef
  • useState
  • ...
• React Types
  • ComponentProps
  • FC
  • ...
• Community
  • Tutorials
  • ...

I'm happy to work on these things, but I want your input first @eps1lon on the thoughts I brought up here.

[filiptammergard]

Here's an example of what I envision: #626

I think a good way to avoid killing any URLs would be:

1. Add these new reference pages. But don't make them visible in the sidebar just yet.
2. When we're happy about some initial state, add them to the sidebar.
3. When we have covered everything in the current /docs/basic/getting-started/hooks, remove those from sidebar (but keep the content), and the same for other parts.

In this way, we can keep old content linkable, but promote the new content.