From 1841d2fb99287f01c2ed98f1ca6c6350b509ad11 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Tue, 14 Feb 2017 10:31:45 -0800 Subject: [PATCH] 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 --- react/README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 9401b725..5e481aa9 100644 --- a/react/README.md +++ b/react/README.md @@ -28,7 +28,7 @@ ## Class vs `React.createClass` vs stateless - - 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) + - 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) ```jsx // bad @@ -69,6 +69,12 @@ } ``` +## Mixins + + - [Do not use mixins](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html). + + > 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. + ## Naming - **Extensions**: Use `.jsx` extension for React components.