Update dependencies (#817)

* Update dependencies

* dependency upgrades

* set node version

* use node 20

Author: filiptammergard

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn pretty-quick --staged

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

README.md

@@ -230,7 +230,6 @@ Some differences from the "normal function" version:
 - `React.FunctionComponent` is explicit about the return type, while the normal function version is implicit (or else needs additional annotation).
 
 - It provides typechecking and autocomplete for static properties like `displayName`, `propTypes`, and `defaultProps`.
-
   - Note that there are some known issues using `defaultProps` with `React.FunctionComponent`. See [this issue for details](https://github.com/typescript-cheatsheets/react/issues/87). We maintain a separate `defaultProps` section you can also look up.
 
 - Before the [React 18 type updates](https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210), `React.FunctionComponent` provided an implicit definition of `children` (see below), which was heavily debated and is one of the reasons [`React.FC` was removed from the Create React App TypeScript template](https://github.com/facebook/create-react-app/pull/8177).
@@ -362,7 +361,7 @@ In React >= 18, the function signature of `useCallback` changed to the following
 function useCallback<T extends Function>(callback: T, deps: DependencyList): T;
 ```
 
-Therefore, the following code will yield "`Parameter 'e' implicitly has an 'any' type.`" error in React >= 18, but not <17.
+Therefore, the following code will yield "`Parameter 'e' implicitly has an 'any' type.`" error in React >= 18, but not &lt;17.
 
 ```ts
 // @ts-expect-error Parameter 'e' implicitly has 'any' type.
@@ -646,7 +645,7 @@ export function useLoading() {
   };
   return [isLoading, load] as [
     boolean,
-    (aPromise: Promise<any>) => Promise<any>
+    (aPromise: Promise<any>) => Promise<any>,
   ];
 }
 ```
@@ -825,7 +824,7 @@ class Comp extends React.Component<Props, State> {
 ```tsx
 class Comp extends React.Component<
   Props,
-  ReturnType<typeof Comp["getDerivedStateFromProps"]>
+  ReturnType<(typeof Comp)["getDerivedStateFromProps"]>
 > {
   static getDerivedStateFromProps(props: Props) {}
 }
@@ -1295,7 +1294,7 @@ class Comp extends React.Component<Props, State> {
 ```tsx
 class Comp extends React.Component<
   Props,
-  ReturnType<typeof Comp["getDerivedStateFromProps"]>
+  ReturnType<(typeof Comp)["getDerivedStateFromProps"]>
 > {
   static getDerivedStateFromProps(props: Props) {}
 }
@@ -1383,10 +1382,10 @@ class App extends React.Component<Props, State> {
 Instead of typing the arguments and return values with `React.FormEvent<>` and `void`, you may alternatively apply types to the event handler itself (_contributed by @TomasHubelbauer_):
 
 ```tsx
-  // typing on LEFT hand side of =
-  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    this.setState({text: e.currentTarget.value})
-  }
+// typing on LEFT hand side of =
+onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  this.setState({ text: e.currentTarget.value });
+};
 ```
 
 <details>
@@ -1814,9 +1813,9 @@ If you need both generic support and proper forwardRef behavior with full type i
 ```tsx
 // Add to your type definitions (e.g. in `index.d.ts` file)
 interface ForwardRefWithGenerics extends React.FC<WithForwardRefProps<Option>> {
-  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
-    React.FC<WithForwardRefProps<T>>
-  >;
+  <T extends Option>(
+    props: WithForwardRefProps<T>
+  ): ReturnType<React.FC<WithForwardRefProps<T>>>;
 }
 
 export const ClickableListWithForwardRef: ForwardRefWithGenerics =
@@ -2015,7 +2014,7 @@ export default ErrorBoundary;
 
 #### Concurrent React/React Suspense
 
-_Not written yet._ watch <https://github.com/sw-yx/fresh-async-react> for more on React Suspense and Time Slicing.
+_Not written yet._ watch [https://github.com/sw-yx/fresh-async-react](https://github.com/sw-yx/fresh-async-react) for more on React Suspense and Time Slicing.
 
 [Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).
 
@@ -2929,9 +2928,9 @@ If you're looking for information on Prettier, check out the [Prettier](https://
 
 ### Other React + TypeScript resources
 
-- me! <https://twitter.com/swyx>
+- me! [https://twitter.com/swyx](https://twitter.com/swyx)
 - https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/
-- <https://github.com/piotrwitek/react-redux-typescript-guide> - **HIGHLY HIGHLY RECOMMENDED**, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover, including **REDUX** and **JEST**.
+- [https://github.com/piotrwitek/react-redux-typescript-guide](https://github.com/piotrwitek/react-redux-typescript-guide) - **HIGHLY HIGHLY RECOMMENDED**, i wrote this repo before knowing about this one, this has a lot of stuff I don't cover, including **REDUX** and **JEST**.
 - [10 Bad TypeScript Habits](https://startup-cto.net/10-bad-typescript-habits-to-break-this-year/):
   1. not using `"strict": true`
   2. using `||` for default values when we have `??`

docs/advanced/misc-concerns.md

@@ -83,7 +83,7 @@ export default Object.assign(Form, { Input: Input });
 
 I do like [Docz](https://docz.site/) which takes basically [1 line of config](https://www.docz.site/documentation/project-configuration#typescript) to accept TypeScript. However it is newer and has a few more rough edges (many breaking changes since it is still < v1.0)
 
-For developing with Storybook, read the docs I wrote over here: <https://storybook.js.org/configurations/typescript-config/>. This includes automatic proptype documentation generation, which is awesome :)
+For developing with Storybook, read the docs I wrote over here: [https://storybook.js.org/configurations/typescript-config/](https://storybook.js.org/configurations/typescript-config/). This includes automatic proptype documentation generation, which is awesome :)
 
 [Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).
 
@@ -99,9 +99,9 @@ You should check out large projects that are migrating from flow to pick up conc
 
 Useful libraries:
 
-- <https://github.com/bcherny/flow-to-typescript>
-- <https://github.com/Khan/flow-to-ts>
-- <https://github.com/piotrwitek/utility-types>
+- [https://github.com/bcherny/flow-to-typescript](https://github.com/bcherny/flow-to-typescript)
+- [https://github.com/Khan/flow-to-ts](https://github.com/Khan/flow-to-ts)
+- [https://github.com/piotrwitek/utility-types](https://github.com/piotrwitek/utility-types)
 
 If you have specific advice in this area, please file a PR!
 

docs/advanced/patterns_by_usecase.md

@@ -129,11 +129,12 @@ Example:
 
 ```tsx
 // ReactUtilityTypes.d.ts
-declare type $ElementProps<T> = T extends React.ComponentType<infer Props>
-  ? Props extends object
-    ? Props
-    : never
-  : never;
+declare type $ElementProps<T> =
+  T extends React.ComponentType<infer Props>
+    ? Props extends object
+      ? Props
+      : never
+    : never;
 ```
 
 Usage:
@@ -142,7 +143,7 @@ Usage:
 import * as Recompose from "recompose";
 export const defaultProps = <
   C extends React.ComponentType,
-  D extends Partial<$ElementProps<C>>
+  D extends Partial<$ElementProps<C>>,
 >(
   defaults: D,
   Component: C
@@ -635,8 +636,7 @@ function App() {
 }
 ```
 
-<a href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQdMAnmFnAArFjoC8dccAD5wA3vwETgqAIJQoyJgC44MKAFcs9CRIBuyADYblqVcAB2AcwDaAXRpxxAgL7jhY7QKmz5SuAQOomo66BkZwJlDmFloSTvS4EGYmcAAacDxwABRgypwQ3ACU6QB8ouKUMGpQZphUMAB0aoEAslggEJnBmUU8pZ0ecAA8ACbAOsXB2nqGWJmoBYqTEiJg9V5yCnAAZFtwq9Ma9QBWEOaZZAA0ZAUuAwIiAISr6z7bu-uhWLcegwD0o+NggULsErM8ZBsmBc9vUDlgbNDfr84AAVFhYVC4SJgeDINQwEjIGDAXAGfRMOAgIm4AAWGJUdLgCTkGMgZlGljgcJU6PEBXocToBDUZnwwEScGkYDA3TKAgqVRq-QkIzGTP0aFQADlkCAsDwAERSsAGiYDQZpF4KHgifz6QJOLmfG1kAgQCBkR2-M0-S0Qnw21QaR1wm1WV3uy7kABGyCgUbIsYAXmQbF6fQI-gCffy6E4gA"><i>See this in TS Playground</i>
-</a>
+[_See this in TS Playground_](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQdMAnmFnAArFjoC8dccAD5wA3vwETgqAIJQoyJgC44MKAFcs9CRIBuyADYblqVcAB2AcwDaAXRpxxAgL7jhY7QKmz5SuAQOomo66BkZwJlDmFloSTvS4EGYmcAAacDxwABRgypwQ3ACU6QB8ouKUMGpQZphUMAB0aoEAslggEJnBmUU8pZ0ecAA8ACbAOsXB2nqGWJmoBYqTEiJg9V5yCnAAZFtwq9Ma9QBWEOaZZAA0ZAUuAwIiAISr6z7bu-uhWLcegwD0o+NggULsErM8ZBsmBc9vUDlgbNDfr84AAVFhYVC4SJgeDINQwEjIGDAXAGfRMOAgIm4AAWGJUdLgCTkGMgZlGljgcJU6PEBXocToBDUZnwwEScGkYDA3TKAgqVRq-QkIzGTP0aFQADlkCAsDwAERSsAGiYDQZpF4KHgifz6QJOLmfG1kAgQCBkR2-M0-S0Qnw21QaR1wm1WV3uy7kABGyCgUbIsYAXmQbF6fQI-gCffy6E4gA)
 
 In the above example, based on the `isArray` union member, the type of the `value` hook dependency changes.
 

docs/advanced/patterns_by_version.md

@@ -423,7 +423,6 @@ You can [convert these in bulk](https://github.com/microsoft/TypeScript/pull/374
 [[Release Notes](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html) | [Blog Post](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/)]
 
 - [Variadic Tuple Types](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0-beta/#variadic-tuple-types)
-
   - useful for [simplified Reducer-like State](https://www.reddit.com/r/reactjs/comments/hu0ytg/simplified_reducerlike_state_using_typescript_40/)
 
 - [Custom JSX Factories](https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/#custom-jsx-factories)

docs/basic/getting-started/class-components.md

@@ -132,7 +132,7 @@ class Comp extends React.Component<Props, State> {
 ```tsx
 class Comp extends React.Component<
   Props,
-  ReturnType<typeof Comp["getDerivedStateFromProps"]>
+  ReturnType<(typeof Comp)["getDerivedStateFromProps"]>
 > {
   static getDerivedStateFromProps(props: Props) {}
 }

docs/basic/getting-started/concurrent.md

@@ -3,6 +3,6 @@ id: concurrent
 title: Concurrent React/React Suspense
 ---
 
-_Not written yet._ watch <https://github.com/sw-yx/fresh-async-react> for more on React Suspense and Time Slicing.
+_Not written yet._ watch [https://github.com/sw-yx/fresh-async-react](https://github.com/sw-yx/fresh-async-react) for more on React Suspense and Time Slicing.
 
 [Something to add? File an issue](https://github.com/typescript-cheatsheets/react/issues/new).

docs/basic/getting-started/forms-and-events.md

@@ -45,10 +45,10 @@ class App extends React.Component<Props, State> {
 Instead of typing the arguments and return values with `React.FormEvent<>` and `void`, you may alternatively apply types to the event handler itself (_contributed by @TomasHubelbauer_):
 
 ```tsx
-  // typing on LEFT hand side of =
-  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    this.setState({text: e.currentTarget.value})
-  }
+// typing on LEFT hand side of =
+onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+  this.setState({ text: e.currentTarget.value });
+};
 ```
 
 <details>

docs/basic/getting-started/forward-create-ref.md

@@ -198,9 +198,9 @@ If you need both generic support and proper forwardRef behavior with full type i
 ```tsx
 // Add to your type definitions (e.g. in `index.d.ts` file)
 interface ForwardRefWithGenerics extends React.FC<WithForwardRefProps<Option>> {
-  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
-    React.FC<WithForwardRefProps<T>>
-  >;
+  <T extends Option>(
+    props: WithForwardRefProps<T>
+  ): ReturnType<React.FC<WithForwardRefProps<T>>>;
 }
 
 export const ClickableListWithForwardRef: ForwardRefWithGenerics =