Review with React 18 types in mind

[eps1lon]

We had some type-related breaking changes with React 18 that were supposed to fix long standing issues. If we describe these issues here, reference React 18 types that fix those issues.

• [x] explicit children (https://github.com/typescript-cheatsheets/react/pull/510)
• [ ] useCallback implicit any
• [ ] this.context is unknown
• [ ] removal of deprecated types

[LukasKalbertodt]

In particular, the guide also mentions that React.FC is discouraged. The main reason against it seems to be the implicit children. But this has changed with 18.0.0, so I wonder if FC is still discouraged. The remaining reasons against it seem rather minor?

[filiptammergard]

I created https://github.com/typescript-cheatsheets/react/pull/496 before I saw this. Let me know if you want to handle it in another way or feel free to just close the PR.

[filiptammergard]

The other place that came to mind was the section "Small React.ReactNode edge case" here: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example/#useful-react-prop-type-examples. Created a PR for that as well: https://github.com/typescript-cheatsheets/react/pull/497

But I'm not sure how you would like to convey this, so just let me know if you have other ideas.

[filiptammergard]

In particular, the guide also mentions that React.FC is discouraged. The main reason against it seems to be the implicit children. But this has changed with 18.0.0, so I wonder if FC is still discouraged. The remaining reasons against it seem rather minor?

The main reason behind React.FC being discouraged might be gone, but there are still some smaller problems remaining and no real benefits with using it. Even though React.FC might not need to be discouraged as much, I still wouldn't encourage using it.

[swyxio]

hey @filiptammergard really appreciate the comments! I just invited you to help maintain this repo :)

i've personally never used React.FC so never engaged in that debate but let me know if the consensus shifts :) all i care about on that topic is just to give a concise summary of the tradeoffs if you choose ot use it

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!

[jonenst]

From what I understand the last remaining pitfalls with React.FC were fixed with https://github.com/DefinitelyTyped/DefinitelyTyped/commit/443451ccc5db3adf1865853e152636f1a9ba5dd5 released in https://unpkg.com/@types/[email protected]/index.d.ts ?

I'm talking about these two:

Minor Pitfalls

These patterns are not supported:
  Conditional rendering
  Array.fill

[filiptammergard]

@jonenst Fixed in https://github.com/typescript-cheatsheets/react/pull/633!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!