(tl;dr) The title is getting a lot of flack but I think there are two good patterns highlighted: 1) Avoid creating functions in React render and 2) Learn about and use defaultProps.<p>1: Example of arrow functions + Class property initializer: <a href="http://babeljs.io/blog/2015/06/07/react-on-es6-plus/" rel="nofollow">http://babeljs.io/blog/2015/06/07/react-on-es6-plus/</a>
2: Default Props: <a href="https://facebook.github.io/react/docs/reusable-components.html#default-prop-values" rel="nofollow">https://facebook.github.io/react/docs/reusable-components.ht...</a>
Is it really an anti-pattern when you're just writing code that depends on equality without understanding how equality works?<p>There's probably a lesson to be learned in here, but if I wrote an article every time I wrote bad code, I wouldn't have time to write any bad code ;)<p>Edit: This particular issue is pretty common, and it's good to draw attention to it, but let's just call it what it is - a common bug.
We just use Immutable.js in our Redux stores. Then, using PureRenderMixin is trivial. You just need to be careful not to use the vanilla reducer composer from Redux.
How do you avoid the e => fn() here in stateless functional component?
This is very common case and I can't see other workaround than to use redux mapStateToProps,
or without redux maybe mapProps from recompose. Or to use something stupid like writing the item.id into data-attr-id on the li -element and digging out the id -value in the event handler...<p><pre><code> const List = props =>
<ul>
props.items.map(item =>
<li onClick={e => props.itemClicked(item.id)}>{item.name}</li>
)
</ul></code></pre>
I think that some of the issues that you're running into might be mitigated by taking advantage of the "key" attribute on repeated elements. There's more here: <a href="https://facebook.github.io/react/docs/multiple-components.html#dynamic-children" rel="nofollow">https://facebook.github.io/react/docs/multiple-components.ht...</a>
Is it wrong for me to think that having a thousand Cell elements on the page is the true anti-pattern? The user can really only see maybe 10-20 at one time. The cost of re-rendering on 15 rows should be trivial enough not to worry about creating a callback function in render.<p>Edit: To elaborate, you can solve this by using pagination (a common solution), or, if you want the user to be able to scroll and not click, occlusion culling. Someone out there must have written an occlusion culling library for React by now, surely.