IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

FE Style Guide: Update component definition (#64869)

Browse Source 
* chore: update our FE styleguide related to React.FC

* fix: typo
This commit is contained in:
Levente Balogh 2023-03-16 09:57:29 +01:00 committed by GitHub
parent 596e5b43d9
commit 1c6357637d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
contribute/style-guides/frontend.md
View File

@ -353,12 +353,26 @@ static defaultProps: Partial<Props> = { ... }
### How to declare functional components ### How to declare functional components
We recommend using named regular functions when creating a new react functional component. We prefer using function declarations over function expressions when creating a new react functional component.
```typescript ```typescript
// bad
export const Component = (props: Props) => { ... }
// bad
export const Component: React.FC<Props> = (props) => { ... }
// good
export function Component(props: Props) { ... } export function Component(props: Props) { ... }
``` ```
Some interesting readings on the topic:
- [Create React App: Remove React.FC from typescript template](https://github.com/facebook/create-react-app/pull/8177)
- [Kent C. Dodds: How to write a React Component in Typescript](https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript)
- [Kent C. Dodds: Function forms](https://kentcdodds.com/blog/function-forms)
- [Sam Hendrickx: Why you probably shouldn't use React.FC?](https://medium.com/raccoons-group/why-you-probably-shouldnt-use-react-fc-to-type-your-react-components-37ca1243dd13)
## State management ## State management
- Don't mutate state in reducers or thunks. - Don't mutate state in reducers or thunks.