Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[No QA] Update documentation regarding hooks usage #2233

Merged
merged 1 commit into from
Apr 6, 2021
Merged

[No QA] Update documentation regarding hooks usage #2233

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions STYLE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,7 +580,7 @@ if (type.prototype && type.prototype.isPureReactComponent) {
Always extend from `React.Component` and use a class component when:

- A component needs some data passed to it from a parent holding the data in `this.state`. A class component would hold this data in state and pass it down to the child via props. - If you need to perform some kind of side-effect after the component mounts (`componentDidMount()`) or tweak a component's rendering performance.
- A final case where you might need to use a class component is if you need to use a `ref`. We have not yet adopted hooks like `useRef()` so if you need a `ref` use a class component.
- A final case where you might need to use a class component is if you need to use a `ref`. We have not yet adopted built-in React hooks like `useRef()` so if you need a `ref` use a class component.

```javascript
// Bad
Expand Down Expand Up @@ -655,10 +655,10 @@ In addition, all refs should be declared in the constructor, rather than inline.
class BadRefComponent extends Component {
constructor(props) {
super(props);

// Bad: Ref is declared inline instead of in the constructor
}

render() {
return <View ref={el => this.myRef = el} />;
}
Expand All @@ -668,7 +668,7 @@ class BadRefComponent extends Component {
class GoodRefComponent extends Component {
constructor(props) {
super(props);

// Good: Ref is declared in the constructor
this.myRef = undefined;
}
Expand All @@ -684,6 +684,7 @@ class GoodRefComponent extends Component {

We love React and learning about all the new features that are regularly being added to the API. However, we try to keep our organization's usage of React limited to a very strict and stable set of features that React offers. We do this mainly for **consistency** and so our engineers don't have to spend extra time trying to figure out how everything is working. Participation in our React driven codebases shouldn't mean everyone is required to keep up to date on the latest and greatest features. So with that in mind, here are a few things we would ask you to not use:

- Hooks - Use a class `Component` and relevant lifecycle methods instead of hooks
- Hooks - Use a class `Component` and relevant lifecycle methods instead of hooks. One exception here is if a 3rd party library offers some functionality via hooks (and only hooks).
- `createRef()` - Use a callback ref instead
- Class properties - Use an anonymous arrow function when calling a method or bind your method in the `constructor()`
- Static getters and setters - Use props directly or create a method that computes some value