advanced react component patterns
@ankeetmaini on github, twitter and instagram
objectives
sleeping- code sharing (easily)
- back to top
problem #1
problem #2
- the responsive question
HoCs (higher order components)!
HoC checklist
- propagates props?
- debug name?
- refs?
- statics?
Have you ever???
import React from "react";
class NormalComponent extends React.Component {
render() {
const { message, fruit, butter } = this.props;
return (
<div>
<h2>Overloaded Component</h2>
<div>message: {message}</div>
<div>fruit: {fruit}</div>
<div>butter: {butter}</div>
</div>
);
}
}
export default withNothing(withThisAndThat(withThat(withThis(NormalComponent))));
What if there's another way?
Revisiting responsive feature with render prop!
name collisionprops propagationrefs handlingunnecessary wrappinghigher ordercomplex- boring
`render prop`
Jumping on to `render prop` bandwagon
Not convinced yet?
HoCs can be implemented with Render Props but not the other way round
Bonus slide - 1
- toggle
problem #3
theme or no theme?
the pain of passing props
topics mastered
- provider pattern
- context - legacy
- context - render props!
code links
-
https://github.com/ankeetmaini/advanced-react-component-patterns-talk
- the commits are arranged by step-0 to step-11 if you want to step through
-
https://github.com/ankeetmaini/react-redux-hack
- this contains the code for react-redux-hack which was done as part of live coding (Connect & Provider)
advanced react component patterns
By Ankeet Maini
