{"id":18895884,"url":"https://github.com/echobind/react-typescript-best-practices","last_synced_at":"2025-04-15T01:34:10.146Z","repository":{"id":98472130,"uuid":"226394777","full_name":"echobind/react-typescript-best-practices","owner":"echobind","description":"Our idea of best practices when using React with TypeScript","archived":false,"fork":false,"pushed_at":"2019-12-23T16:11:20.000Z","size":4,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-11T18:21:39.997Z","etag":null,"topics":["best-practices","react","typescript"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/echobind.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-06T19:22:24.000Z","updated_at":"2024-08-09T20:38:16.000Z","dependencies_parsed_at":"2023-06-01T21:30:42.058Z","dependency_job_id":null,"html_url":"https://github.com/echobind/react-typescript-best-practices","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echobind%2Freact-typescript-best-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echobind%2Freact-typescript-best-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echobind%2Freact-typescript-best-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/echobind%2Freact-typescript-best-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/echobind","download_url":"https://codeload.github.com/echobind/react-typescript-best-practices/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248989527,"owners_count":21194608,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["best-practices","react","typescript"],"created_at":"2024-11-08T08:30:59.207Z","updated_at":"2025-04-15T01:34:10.132Z","avatar_url":"https://github.com/echobind.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-TypeScript Best Practices\r\n\r\nOur suggested best practices when using React with TypeScript.\r\n\r\n---\r\n\r\n**Table of Contents**\r\n* [Components](#components)\r\n* [Props](#props)\r\n* [Hooks](#hooks)\r\n* [Third Party Libraries](third-party-libraries)\r\n* [FAQ](#faq)\r\n  * [Contributing](#contributing)\r\n  * [License](#license)\r\n  * [Contact](#contact)\r\n* [License](#license)\r\n\r\n---\r\n\r\n### Components\r\n\r\nWe prefer to use **function expressions** beceause the syntax you use with them makes it easier to read compared to function declarations. \r\n\r\n```typescript\r\n// ✅ written as a function expression\r\nconst ComponentExample: React.FC = () =\u003e \u003ch1\u003eMy Website Heading\u003c/h1\u003e\r\n```\r\n\r\n✅ Keep your types/interfaces collocated with your components, unless you need to break them out.\r\n\r\n### Props\r\n\r\nOpt for `types` over `interfaces` when declaring your component props ([unless you're authoring a library](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet#types-or-interfaces))\r\n\r\n```typescript\r\ntype Props = {\r\n /** The background color */\r\n color?: string;\r\n /** The text to show inside */\r\n text: string;\r\n}\r\n\r\nconst Button: React.FC\u003cProps\u003e = ({ color = 'blue', text }) =\u003e (\r\n \u003cbutton style={{ backgroundColor: color }}\u003e{text}\u003c/button\u003e\r\n)\r\n```\r\n\r\n✅ Prefer destructuring props in function parameter\r\n\r\n✅ Use ES6 default values\r\n\r\n✅ Document your props \r\n\r\n\r\n### Hooks\r\n\r\nUse a generic when you need to initialize a hook with a `null`-ish value. \r\n\r\n```typescript\r\ntype User = {\r\n  /** The user's email address */\r\n  email: string;\r\n  /** The user's ID */\r\n  id: string;\r\n}\r\nconst [user, setUser] = useState\u003cUser | null\u003e(null);\r\n```\r\n\r\n### Third Party Libraries\r\n\r\nLook for types by running `yarn add -D @types/\u003cpackage-name\u003e`. If they don't exist, create a declaration file at the root:\r\n```typescript\r\n// Name of file: package-name.d.ts\r\n\r\ndeclare module PackageName;\r\n```\r\n\r\nThis won't provide type safety but it will unblock you. Later, when you have time, come back and create a proper [declaration file](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html). \r\n\r\n\r\n## FAQ\r\n\r\nSome questions you might have around using React with TypeScript. \r\n\r\n### How do I type a `ChangeEvent`?\r\n\r\nIf you're working with a form, you'll want to use `React.ChangeEvent`. Here's an example:\r\n```typescript\r\nfunction onChange(e: React.ChangeEvent\u003cHTMLInputElement\u003e) {\r\n  //... setValue(e.target.value)\r\n}\r\n```\r\n\r\n### What does \"X\" mean in the `tsconfig.json`?\r\n\r\nThe `tsconfig.json` has many options, all of which you can learn about here in the [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/compiler-options.html).\r\n\r\n### Where should I look if I want to dive deeper?\r\n\r\nOne of the best places to dive deeper into this subject is the community guide [`react-typescript-cheatsheet`](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet).\r\n\r\n\r\n## License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fechobind%2Freact-typescript-best-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fechobind%2Freact-typescript-best-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fechobind%2Freact-typescript-best-practices/lists"}