Skip to content

Instantly share code, notes, and snippets.

@evenchange4
Forked from wuct/AnotherAntiPattern.js
Created February 5, 2016 03:32
Show Gist options
  • Save evenchange4/754b48ccf8fd90033930 to your computer and use it in GitHub Desktop.
Save evenchange4/754b48ccf8fd90033930 to your computer and use it in GitHub Desktop.
Nesting children is also an anti-pure-render pattern.
// Consider <Button /> is a pure render component
const AntiPureComponet = () => <div>
Call me maybe?
<Button><IconPhone /> Call</Button>
</div>
// When <AntiPureComponet /> renders, it creates a new child (by calling React.createElement) and pass to <Button />.
// This behavior forces <Button /> to re-render everytime.
// To Avoid this anti-pattern, we should create a new pure render component wrapping <Button />,
// like following:
import { pure } from 'recompose';
const WrappedButton = pure(() => <Button><IconPhone /> Call</Button>)
const PureComponet = () => <div>
Call me maybe?
<WrappedButton />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment