Skip to content

Commit

Permalink
custom hooks advice
Browse files Browse the repository at this point in the history
  • Loading branch information
coopfeathy committed Dec 12, 2018
1 parent 22d3c18 commit 364e8dd
Showing 1 changed file with 27 additions and 2 deletions.
29 changes: 27 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -435,13 +435,38 @@ export interface Props {

Hooks are supported in `@types/react` from v16.7 up.

Many hooks are initialized with null-ish default values, and you may wonder how to provide types. Do this:
**useState**

Many hooks are initialized with null-ish default values, and you may wonder how to provide types. Use union types:

```tsx
const [user, setUser] = useState<IUser | null>(null);

// later...
setUser(newUser)
```

**Custom Hooks**

If you are returning an array in your Custom Hook, you will want to avoid type inference as Typescript will infer a union type (when you actually want different types in each position of the array). Instead, assert or define the function return types:

```tsx
export function useLoading() {
const [isLoading, setState] = React.useState(false);
const load = (aPromise: Promise<any>) => {
setState(true);
return aPromise.finally(() => {
setState(false);
});
};
return [isLoading, load] as [
boolean,
(aPromise: Promise<any>) => Promise<any>
];
}
```

If you are writing a React Hooks library, don't forget that you can also expose
If you are writing a React Hooks library, don't forget that you can also expose your types.

[Something to add? File an issue](https://github.com/sw-yx/react-typescript-cheatsheet/issues/new).

Expand Down

0 comments on commit 364e8dd

Please sign in to comment.