Add Set The Type For A useState Hook as a React til

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_1026 TILs and counting..._
+_1027 TILs and counting..._
 
 ---
 
@@ -735,6 +735,7 @@ _1026 TILs and counting..._
 - [@reach/router Renders To A Div](react/reach-router-renders-to-a-div.md)
 - [Read Only Input Elements](react/read-only-input-elements.md)
 - [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.md)
+- [Set The Type For A useState Hook](react/set-the-type-for-a-usestate-hook.md)
 - [Specifying Dependencies Of A useEffect Hook](react/specifying-dependencies-of-a-useeffect-hook.md)
 - [Spelunking Through Components With Enzyme's Dive](react/spelunking-through-components-with-enzymes-dive.md)
 - [Sync Your react-router State With Redux](react/sync-your-react-router-state-with-redux.md)

react/set-the-type-for-a-usestate-hook.md

@@ -0,0 +1,29 @@
+# Set The Type For A useState Hook
+
+TypeScript can often infer the type of a `useState` hook. For instance, in the following example, TypeScript infers a type of `boolean`:
+
+```typescript
+const [open, setOpen] = React.useState(false);
+```
+
+If we have a `useState` hook that can be `null` or a string:
+
+```typescript
+const [error, setError] = React.useState(null);
+
+setError('There was an error');
+// Argument of type 'string' is not assignable
+// to parameter of type 'SetStateAction<null>'
+```
+
+then we'll get a TypeScript warning when we violate the inferred type of
+`SetStateAction<null>`.
+
+The `useState` can be appropriate typed for this situation like so:
+
+```typescript
+const [error, setError] =
+  React.useState<null | string>(null);
+```
+
+[source](https://www.carlrippon.com/typed-usestate-with-typescript/)