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.

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] Add new style rule for refs in constructor #2143

Merged
merged 2 commits into from
Mar 31, 2021
Merged
Changes from 1 commit
Commits
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
34 changes: 34 additions & 0 deletions STYLE.md
Original file line number Diff line number Diff line change
Expand Up @@ -649,6 +649,40 @@ A common mistake with refs is using them to pass data back to a parent component

There are several ways to use and declare refs and we prefer the [callback method](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs).

In addition, all refs should be declared in the constructor and null-initialized, rather than inline. This makes it easier to quickly see what refs are declared in the component:

```jsx
class BadRefComponent extends Component {
constructor(props) {
super(props);
}

render() {
return (
<View
// Bad: Ref is declared inline
roryabraham marked this conversation as resolved.
Show resolved Hide resolved
ref={el => this.myRef = el}
/>
)
}
}


class GoodRefComponent extends Component {
constructor(props) {
super(props);

// Good: Ref is declared in the constructor
this.myRef = null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why null and not undefined? Does it make any difference?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No big difference, and I have no preference.

}

render() {
return <View ref={el => this.myRef = el}/>;
}
}

```

## Are we allowed to use [insert brand new React feature]? Why or why not?

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:
Expand Down