{"files":[{"path":"docs\/_posts\/2016-07-13-mixins-considered-harmful.md","status":"A"}],"body":"","commit":{"authoredAt":"2016-07-13T17:40:53+01:00","revision":"b0136b37c5dc7ea25fff139dd74397a6ef140b35","authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","shortRevision":"b0136b37c5","subject":"Add a new blog post about mixins (#7273)"},"patch":"diff --git a\/docs\/_posts\/2016-07-13-mixins-considered-harmful.md b\/docs\/_posts\/2016-07-13-mixins-considered-harmful.md\nnew file mode 100644\nindex 0000000000..055b3868e9\n--- \/dev\/null\n+++ b\/docs\/_posts\/2016-07-13-mixins-considered-harmful.md\n@@ -0,0 +1,612 @@\n+---\n+title: \"Mixins Considered Harmful\"\n+author: gaearon\n+---\n+\n+“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.\n+\n+It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.\n+\n+To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.\n+\n+Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.\n+\n+In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.\n+\n+## Why Mixins are Broken\n+\n+At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.\n+\n+However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the [same conclusions](https:\/\/medium.com\/@dan_abramov\/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) after writing my fair share of terrible mixins.\n+\n+This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.\n+\n+### Mixins introduce implicit dependencies\n+\n+Sometimes a component relies on a certain method defined in the mixin, such as `getClassName()`. Sometimes it’s the other way around, and mixin calls a method like `renderHeader()` on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.\n+\n+Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?\n+\n+These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s `render()` method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.\n+\n+Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.\n+\n+### Mixins cause name clashes\n+\n+There is no guarantee that two particular mixins can be used together. For example, if `FluxListenerMixin` defines `handleChange()` and `WindowSizeMixin` defines `handleChange()`, you can’t use them together. You also can’t define a method with this name on your own component.\n+\n+It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.\n+\n+If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.\n+\n+The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.\n+\n+### Mixins cause snowballing complexity\n+\n+Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.\n+\n+A component needs some state to track mouse hover. To keep this logic reusable, you might extract `handleMouseEnter()`, `handleMouseLeave()` and `isHovering()` into a `HoverMixin`. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in `HoverMixin` so they create a `TooltipMixin` that uses `HoverMixin`. `TooltipMixin` reads `isHovering()` provided by `HoverMixin` in its `componentDidUpdate()` and either shows or hides the tooltip.\n+\n+A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called `getTooltipOptions()` to `TooltipMixin`. By this time, components that show popovers also use `HoverMixin`. However popovers need a different hover delay. To solve this, somebody adds support for an optional `getHoverOptions()` method and implements it in `TooltipMixin`. Those mixins are now tightly coupled.\n+\n+This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling `TooltipMixin` from `HoverMixin`. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.\n+\n+Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.\n+\n+These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.\n+\n+## Migrating from Mixins\n+\n+Let’s make it clear that mixins are not technically deprecated. If you use `React.createClass()`, you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.\n+\n+Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.\n+\n+We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!\n+\n+### Performance Optimizations\n+\n+One of the most commonly used mixins is [`PureRenderMixin`](\/react\/docs\/pure-render-mixin.html). You might be using it in some components to [prevent unnecessary re-renders](\/react\/docs\/advanced-performance.html#shouldcomponentupdate-in-action) when the props and state are shallowly equal to the previous props and state:\n+\n+```javascript\n+var PureRenderMixin = require('react-addons-pure-render-mixin');\n+\n+var Button = React.createClass({\n+ mixins: [PureRenderMixin],\n+\n+ \/\/ ...\n+\n+});\n+```\n+\n+#### Solution\n+\n+To express the same without mixins, you can use the [`shallowCompare`](\/react\/docs\/shallow-compare.html) function directly instead:\n+\n+```js\n+var shallowCompare = require('react-addons-shallow-compare');\n+\n+var Button = React.createClass({\n+ shouldComponentUpdate: function(nextProps, nextState) {\n+ return shallowCompare(this, nextProps, nextState);\n+ },\n+\n+ \/\/ ...\n+\n+});\n+```\n+\n+If you use a custom mixin implementing a `shouldComponentUpdate` function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.\n+\n+We understand that more typing can be annoying. For the most common case, we plan to [introduce a new base class](https:\/\/github.com\/facebook\/react\/pull\/7195) called `React.PureComponent` in the next minor release. It uses the same shallow comparison as `PureRenderMixin` does today.\n+\n+### Subscriptions and Side Effects\n+\n+The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in `componentDidMount`, destroyed in `componentWillUnmount`, and the change handler calls `this.setState()`.\n+\n+```javascript\n+var SubscriptionMixin = {\n+ getInitialState: function() {\n+ return {\n+ comments: DataSource.getComments()\n+ };\n+ },\n+\n+ componentDidMount: function() {\n+ DataSource.addChangeListener(this.handleChange);\n+ },\n+\n+ componentWillUnmount: function() {\n+ DataSource.removeChangeListener(this.handleChange);\n+ },\n+\n+ handleChange: function() {\n+ this.setState({\n+ comments: DataSource.getComments()\n+ });\n+ }\n+};\n+\n+var CommentList = React.createClass({\n+ mixins: [SubscriptionMixin],\n+\n+ render: function() {\n+ \/\/ Reading comments from state managed by mixin.\n+ var comments = this.state.comments;\n+ return (\n+

\n+ {comments.map(function(comment) {\n+ return \n+ })}\n+ <\/div>\n+ )\n+ }\n+});\n+\n+module.exports = CommentList;\n+```\n+\n+#### Solution\n+\n+If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.\n+\n+If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called [“higher-order components”](https:\/\/medium.com\/@dan_abramov\/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750). It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.\n+\n+#### Higher-Order Components Explained\n+\n+Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:\n+\n+```js\n+function addAndLog(x, y) {\n+ var result = x + y;\n+ console.log('result:', result);\n+ return result;\n+}\n+\n+function multiplyAndLog(x, y) {\n+ var result = x * y;\n+ console.log('result:', result);\n+ return result;\n+}\n+```\n+\n+These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.\n+\n+Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a [higher-order function](https:\/\/en.wikipedia.org\/wiki\/Higher-order_function), that is, a function that takes a function as an argument and returns a function.\n+\n+Again, it sounds more intimidating than it really is:\n+\n+```js\n+function withLogging(wrappedFunction) {\n+ \/\/ Return a function with the same API...\n+ return function(x, y) {\n+ \/\/ ... that calls the original function\n+ var result = wrappedFunction(x, y);\n+ \/\/ ... but also logs its result!\n+ console.log('result:', result);\n+ return result;\n+ };\n+}\n+```\n+\n+The `withLogging` higher-order function lets us write `add` and `multiply` without the logging statements, and later wrap them to get `addAndLog` and `multiplyAndLog` with exactly the same signatures as before:\n+\n+```js\n+function add(x, y) {\n+ return x + y;\n+}\n+\n+function multiply(x, y) {\n+ return x * y;\n+}\n+\n+function withLogging(wrappedFunction) {\n+ return function(x, y) {\n+ var result = wrappedFunction(x, y);\n+ console.log('result:', result);\n+ return result;\n+ };\n+}\n+\n+\/\/ Equivalent to writing addAndLog by hand:\n+var addAndLog = withLogging(add);\n+\n+\/\/ Equivalent to writing multiplyAndLog by hand:\n+var multiplyAndLog = withLogging(multiply);\n+```\n+\n+Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.\n+\n+As a first step, we will split our `CommentList` component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.\n+\n+```js\n+\/\/ This is a child component.\n+\/\/ It only renders the comments it receives as props.\n+var CommentList = React.createClass({\n+ render: function() {\n+ \/\/ Note: now reading from props rather than state.\n+ var comments = this.props.comments;\n+ return (\n+

\n+ {comments.map(function(comment) {\n+ return \n+ })}\n+ <\/div>\n+ )\n+ }\n+});\n+\n+\/\/ This is a parent component.\n+\/\/ It subscribes to the data source and renders .\n+var CommentListWithSubscription = React.createClass({\n+ getInitialState: function() {\n+ return {\n+ comments: DataSource.getComments()\n+ };\n+ },\n+\n+ componentDidMount: function() {\n+ DataSource.addChangeListener(this.handleChange);\n+ },\n+\n+ componentWillUnmount: function() {\n+ DataSource.removeChangeListener(this.handleChange);\n+ },\n+\n+ handleChange: function() {\n+ this.setState({\n+ comments: DataSource.getComments()\n+ });\n+ },\n+\n+ render: function() {\n+ \/\/ We pass the current state as props to CommentList.\n+ return ;\n+ }\n+});\n+\n+module.exports = CommentListWithSubscription;\n+```\n+\n+There is just one final step left to do.\n+\n+Remember how we made `withLogging()` take a function and return another function wrapping it? We can apply a similar pattern to React components.\n+\n+We will write a new function called `withSubscription(WrappedComponent)`. Its argument could be any React component. We will pass `CommentList` as `WrappedComponent`, but we could also apply `withSubscription()` to any other component in our codebase.\n+\n+This function would return another component. The returned component would manage the subscription and render `` with the current data.\n+\n+We call this pattern a “higher-order component”.\n+\n+The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with `createClass()`, as an ES6 class or a function. If `WrappedComponent` is a React component, the component created by `withSubscription()` can render it.\n+\n+```js\n+\/\/ This function takes a component...\n+function withSubscription(WrappedComponent) {\n+ \/\/ ...and returns another component...\n+ return React.createClass({\n+ getInitialState: function() {\n+ return {\n+ comments: DataSource.getComments()\n+ };\n+ },\n+\n+ componentDidMount: function() {\n+ \/\/ ... that takes care of the subscription...\n+ DataSource.addChangeListener(this.handleChange);\n+ },\n+\n+ componentWillUnmount: function() {\n+ DataSource.removeChangeListener(this.handleChange);\n+ },\n+\n+ handleChange: function() {\n+ this.setState({\n+ comments: DataSource.getComments()\n+ });\n+ },\n+\n+ render: function() {\n+ \/\/ ... and renders the wrapped component with the fresh data!\n+ return ;\n+ }\n+ });\n+}\n+```\n+\n+Now we can declare `CommentListWithSubscription` by applying `withSubscription` to `CommentList`:\n+\n+```js\n+var CommentList = React.createClass({\n+ render: function() {\n+ var comments = this.props.comments;\n+ return (\n+

\n+ {comments.map(function(comment) {\n+ return \n+ })}\n+ <\/div>\n+ )\n+ }\n+});\n+\n+\/\/ withSubscription() returns a new component that\n+\/\/ is subscribed to the data source and renders\n+\/\/ with up-to-date data.\n+var CommentListWithSubscription = withSubscription(CommentList);\n+\n+\/\/ The rest of the app is interested in the subscribed component\n+\/\/ so we export it instead of the original unwrapped CommentList.\n+module.exports = CommentListWithSubscription;\n+```\n+\n+#### Solution, Revisited\n+\n+Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:\n+\n+```js\n+function withSubscription(WrappedComponent) {\n+ return React.createClass({\n+ getInitialState: function() {\n+ return {\n+ comments: DataSource.getComments()\n+ };\n+ },\n+\n+ componentDidMount: function() {\n+ DataSource.addChangeListener(this.handleChange);\n+ },\n+\n+ componentWillUnmount: function() {\n+ DataSource.removeChangeListener(this.handleChange);\n+ },\n+\n+ handleChange: function() {\n+ this.setState({\n+ comments: DataSource.getComments()\n+ });\n+ },\n+\n+ render: function() {\n+ \/\/ Use JSX spread syntax to pass all props and state down automatically.\n+ return ;\n+ }\n+ });\n+}\n+\n+\/\/ Optional change: convert CommentList to a functional component\n+\/\/ because it doesn't use lifecycle hooks or state.\n+function CommentList(props) {\n+ var comments = props.comments;\n+ return (\n+

\n+ {comments.map(function(comment) {\n+ return \n+ })}\n+ <\/div>\n+ )\n+}\n+\n+\/\/ Instead of declaring CommentListWithSubscription,\n+\/\/ we export the wrapped component right away.\n+module.exports = withSubscription(CommentList);\n+```\n+\n+Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.\n+\n+Like any solution, higher-order components have their own pitfalls. For example, if you heavily use [refs](\/react\/docs\/more-about-refs.html), you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding [ref forwarding](https:\/\/github.com\/facebook\/react\/issues\/4213) to React to solve this annoyance.\n+\n+### Rendering Logic\n+\n+The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.\n+\n+Here is a typical example of this pattern:\n+\n+```js\n+var RowMixin = {\n+ \/\/ Called by components from render()\n+ renderHeader: function() {\n+ return (\n+

\n+

new) to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.\n+\n+Mixins are not deprecated in the traditional sense. You can keep using them with `React.createClass()`, as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split `React.createClass()` into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.\n+\n+We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.\n","parents":["5103e1d6a122685d9a44931163c7ee7d70bc2819"]}

dillon1000/react

Files changed