Skip to content

Commit 1841d2f

Browse files
committed
Add guidance around not using mixins
Mixins will hopefully be removed from React eventually. In the meantime, we can avoid the damage they cause by not using them. Most of this was borrowed from @gaearon's blog post "Mixins Considered Harmful". https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
1 parent 8cab89e commit 1841d2f

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

react/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
## Class vs `React.createClass` vs stateless
3030

31-
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
31+
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
3232

3333
```jsx
3434
// bad
@@ -69,6 +69,12 @@
6969
}
7070
```
7171
72+
## Mixins
73+
74+
- [Do not use mixins](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html).
75+
76+
> Why? Mixins introduce implicit dependencies, cause name clashes, and cause snowballing complexity. Most use cases for mixins can be accomplished in better ways via components, higher-order components, or utility modules.
77+
7278
## Naming
7379
7480
- **Extensions**: Use `.jsx` extension for React components.

0 commit comments

Comments
 (0)