Download to read offline
![DOUBLE/TRIPPLE ARRAY
function doubleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 2);
}
return result;
}
// input: [1, 2, 3]
// output: [2, 4, 6]
function trippleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 3);
}
return result;
}
// input: [1, 2, 3]
// output: [3, 6, 9]](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-4-2048.jpg)
![function trippleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 3);
}
return result;
}
// input: [1, 2, 3]
// output: [3, 6, 9]
function doubleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 2);
}
return result;
}
// input: [1, 2, 3]
// output: [2, 4, 6]
DOUBLE/TRIPPLE ARRAY](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-5-2048.jpg)
![function multiplyArr(vs, factor) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * factor);
}
return result;
}
MULTIPLY ARRAY](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-6-2048.jpg)
![MULTIPLY/ADD ARRAY
function multiplyArr(vs, factor) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * factor);
}
return result;
}
// input: [1, 2, 3], 3
// output: [3, 6, 9]
function addArr(vs, increment) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] + increment);
}
return result;
}
// input: [1, 2, 3], 3
// output: [4, 5, 6]](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-7-2048.jpg)
![function multiplyArr(vs, factor) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * factor);
}
return result;
}
// input: [1, 2, 3], 3
// output: [3, 6, 9]
function addArr(vs, increment) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] + increment);
}
return result;
}
// input: [1, 2, 3], 3
// output: [4, 5, 6]
MULTIPLY/ADD ARRAY](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-8-2048.jpg)
![function mapArray(vs, fn) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(fn(vs[i]));
}
return result;
}
MAP ARRAY](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-9-2048.jpg)
![REACT NOW
class Now extends React.Component {
state = {now: new Date()};
componentDidMount() {
this._timer = setInterval(
() => this.setState({now: new Date()}),
100,
);
}
componentWillUnmount() {
clearInterval(this._timer);
}
render() {
return this.state.now.[
this.props.utc ? 'toUTCString' : 'toString'
]();
}
}](https://image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-15-2048.jpg)
![DOUBLE/TRIPPLE ARRAY
function doubleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 2);
}
return result;
}
// input: [1, 2, 3]
// output: [2, 4, 6]
function trippleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 3);
}
return result;
}
// input: [1, 2, 3]
// output: [3, 6, 9]](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-4-2048.jpg)
![function trippleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 3);
}
return result;
}
// input: [1, 2, 3]
// output: [3, 6, 9]
function doubleArr(vs) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * 2);
}
return result;
}
// input: [1, 2, 3]
// output: [2, 4, 6]
DOUBLE/TRIPPLE ARRAY](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-5-2048.jpg)
![function multiplyArr(vs, factor) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * factor);
}
return result;
}
MULTIPLY ARRAY](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-6-2048.jpg)
![MULTIPLY/ADD ARRAY
function multiplyArr(vs, factor) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * factor);
}
return result;
}
// input: [1, 2, 3], 3
// output: [3, 6, 9]
function addArr(vs, increment) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] + increment);
}
return result;
}
// input: [1, 2, 3], 3
// output: [4, 5, 6]](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-7-2048.jpg)
![function multiplyArr(vs, factor) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] * factor);
}
return result;
}
// input: [1, 2, 3], 3
// output: [3, 6, 9]
function addArr(vs, increment) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(vs[i] + increment);
}
return result;
}
// input: [1, 2, 3], 3
// output: [4, 5, 6]
MULTIPLY/ADD ARRAY](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-8-2048.jpg)
![function mapArray(vs, fn) {
const result = [];
for (let i=0;i<vs.length;i ++) {
result.push(fn(vs[i]));
}
return result;
}
MAP ARRAY](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-9-2048.jpg)
![REACT NOW
class Now extends React.Component {
state = {now: new Date()};
componentDidMount() {
this._timer = setInterval(
() => this.setState({now: new Date()}),
100,
);
}
componentWillUnmount() {
clearInterval(this._timer);
}
render() {
return this.state.now.[
this.props.utc ? 'toUTCString' : 'toString'
]();
}
}](https://crownmelresort.com/image.slidesharecdn.com/poweringcodereusewithcontextandrenderprops-180917185704/75/Powering-code-reuse-with-context-and-render-props-15-2048.jpg)
More Related Content
Similar to Powering code reuse with context and render props
Powering code reuse with context and render props
- 1. September 2018 Powering CodeReuse with Context and Render Props Forbes Lindesay
- 2. Thanks to oursponsors!
- 3. FUNCTIONS AS FIRST CLASSVALUES
- 4. DOUBLE/TRIPPLE ARRAY function doubleArr(vs){ const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * 2); } return result; } // input: [1, 2, 3] // output: [2, 4, 6] function trippleArr(vs) { const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * 3); } return result; } // input: [1, 2, 3] // output: [3, 6, 9]
- 5. function trippleArr(vs) { constresult = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * 3); } return result; } // input: [1, 2, 3] // output: [3, 6, 9] function doubleArr(vs) { const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * 2); } return result; } // input: [1, 2, 3] // output: [2, 4, 6] DOUBLE/TRIPPLE ARRAY
- 6. function multiplyArr(vs, factor){ const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * factor); } return result; } MULTIPLY ARRAY
- 7. MULTIPLY/ADD ARRAY function multiplyArr(vs,factor) { const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * factor); } return result; } // input: [1, 2, 3], 3 // output: [3, 6, 9] function addArr(vs, increment) { const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] + increment); } return result; } // input: [1, 2, 3], 3 // output: [4, 5, 6]
- 8. function multiplyArr(vs, factor){ const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] * factor); } return result; } // input: [1, 2, 3], 3 // output: [3, 6, 9] function addArr(vs, increment) { const result = []; for (let i=0;i<vs.length;i ++) { result.push(vs[i] + increment); } return result; } // input: [1, 2, 3], 3 // output: [4, 5, 6] MULTIPLY/ADD ARRAY
- 9. function mapArray(vs, fn){ const result = []; for (let i=0;i<vs.length;i ++) { result.push(fn(vs[i])); } return result; } MAP ARRAY
- 10. MAP ARRAY function mapArray(vs,fn) { return vs.map(fn); }
- 11.
- 12. REACT NOW class Nowextends React.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.state.now.toString(); } }
- 13. REACT NOW class UTCNowextends React.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.state.now.toUTCString(); } }
- 14. class UTCNow extendsReact.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.state.now.toUTCString(); } } REACT NOW
- 15. REACT NOW class Nowextends React.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.state.now.[ this.props.utc ? 'toUTCString' : 'toString' ](); } }
- 16. REACT NOW class Nowextends React.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.props.render(this.state.now); } }
- 17. REACT NOW function LocalTime(){ return <Now render={now => now.toTimeString()} />; } function UTCTime() { return <Now render={now => now.toUTCTimeString()} />; } function LocalDateTime() { return <Now render={now => now.toString()} />; } function UTCDateTime() { return <Now render={now => now.toUTCString()} />; }
- 18. DATE FORMATTING Fri Sep14 2018 15:47:26 GMT+0200 (Central European Summer Time) <strong>Fri Sep 14 2018 </strong> 15:47:26 GMT+0200 (Central European Summer Time)
- 19. REACT NOW function DateTime(){ return ( <Now render={now => ( <React.Fragment> <strong>{now.toDateString()} </strong> {' ' + now.toTimeString()} </React.Fragment> )} /> ); }
- 20. “CHILDREN” IS JUST ASPECIAL PROPERTY
- 21. REACT NOW class Nowextends React.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.props.render(this.state.now); } }
- 22. REACT NOW class Nowextends React.Component { state = {now: new Date()}; componentDidMount() { this._timer = setInterval( () => this.setState({now: new Date()}), 100, ); } componentWillUnmount() { clearInterval(this._timer); } render() { return this.props.children(this.state.now); } }
- 23. function DateTime() { return( <Now render={now => ( <React.Fragment> <strong>{now.toDateString()} </strong> {' ' + now.toTimeString()} </React.Fragment> )} /> ); } REACT NOW
- 24. REACT NOW function DateTime(){ return ( <Now> {now => ( <React.Fragment> <strong>{now.toDateString()} </strong> {' ' + now.toTimeString()} </React.Fragment> )} </Now> ); }
- 25. STATE IS ANYTHINGTHAT CHANGES OVER TIME
- 26. REACT TREE COMPONENT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENTCOMPONENT COMPONENT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENT
- 27. REACT TREE COMPONENT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENTCOMPONENT COMPONENT COMPONENT COMPONENT COMPONENTCOMPONENTA
- 28. REACT TREE COMPONENT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENTCOMPONENT COMPONENT COMPONENT COMPONENT COMPONENTBA
- 29. REACT TREE COMPONENT COMPONENT COMPONENT PARENTCOMPONENTCOMPONENTCOMPONENT COMPONENT COMPONENT COMPONENT COMPONENTBA
- 30. REACT TREE COMPONENT COMPONENT COMPONENT PARENTCOMPONENTCOMPONENTCOMPONENT COMPONENT C COMPONENT COMPONENTBA
- 31. REACT TREE ROOT COMPONENT COMPONENT PARENTCOMPONENTCOMPONENTCOMPONENT COMPONENT C COMPONENT COMPONENTBA
- 32. REACT TREE ROOT COMPONENT COMPONENT PARENTCOMPONENTCOMPONENTCOMPONENT COMPONENT C COMPONENT COMPONENTBA
- 33. REACT TREE ROOT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENTCOMPONENT COMPONENT C COMPONENT COMPONENTBA External Store?
- 34. REACT TREE ROOT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENTCOMPONENT COMPONENT C COMPONENT COMPONENTBA
- 35. REACT TREE ROOT COMPONENT COMPONENT COMPONENTCOMPONENTCOMPONENTCOMPONENT COMPONENT C COMPONENT COMPONENTBA
- 36. REACT TREE ROOT SHARED PARENT COMPONENT COMPONENTCOMPONENTCOMPONENT C COMPONENT COMPONENT COMPONENT COMPONENTBA
- 37. REACT TREE ROOT SHARED PARENT COMPONENT COMPONENTCOMPONENT C COMPONENT COMPONENT D EBA SHARED PARENT 2
- 38. const Color =React.createContext('black'); function ThemedCircle() { return ( <Color.Consumer> {color => <Circle color={color} />} </Color.Consumer> ) } <React.Fragment> <Color.Provider value="blue"> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </Color.Provider> <Color.Provider value="red"> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </Color.Provider> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </React.Fragment>
- 39. const Color =React.createContext('black'); function ThemedCircle() { return ( <Color.Consumer> {color => <Circle color={color} />} </Color.Consumer> ) } <React.Fragment> <Color.Provider value="blue"> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </Color.Provider> <Color.Provider value="red"> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </Color.Provider> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </React.Fragment>
- 40. const Color =React.createContext('black'); function ThemedCircle() { return ( <Color.Consumer> {color => <Circle color={color} />} </Color.Consumer> ) } <React.Fragment> <Color.Provider value="blue"> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </Color.Provider> <Color.Provider value="red"> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </Color.Provider> <ThemedCircle /><ThemedCircle /><ThemedCircle /> </React.Fragment>
- 41. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider>
- 42. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider>
- 43. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider>
- 44. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider> OFF OFF OFF
- 45. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider> ON ON ON
- 46. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider> OFF OFF OFF
- 47. const Toggle =React.createContext({on: false, onToggle: () => {}}); class ToggleProvider extends React.Component { state = {on: false, onToggle: () => this.setState(s => ({on: !s.on}))}; render() { return ( <Toggle.Provider value={this.state}> {this.props.children} </Toggle.Provider> ); } } function ToggleButton() { return ( <Toggle.Consumer> {({on, onToggle}) => <button onClick={onToggle}>{on ? 'on' : 'off'} </button>} </Toggle.Consumer> ) } <ToggleProvider><ToggleButton /><ToggleButton /><ToggleButton /> </ToggleProvider> ON ON ON
- 48. SUMMARY ▸ Functions beingfirst class values means we can use them as parameters to enable more flexible code re-use ▸ Using functions as parameters allows highly customisable shared components, complete with state and lifecycle hooks. ▸ React Context lets you share state across the tree of your application ▸ Context still uses the React tree. This means it works with server side rendering and you can safely use it in parts of your app, as well as using it as a whole app solution. @ForbesLindesay