The document discusses higher-order components in JavaScript, particularly in the context of React, emphasizing the concept of functions as first-class citizens. It includes examples of stateless components, composition vs. inheritance, and the use of external libraries like Recompose to manage component state. The document concludes with practical coding patterns and links to additional resources.

1. HIGHER-ORDER
COMPONENTS
Ilya Gelman

2. Ilya Gelman
- Organizer of AngularJS-IL & ReactJS-Israel
- Organizer of ReactNext 2016
- Author of The Complete Redux Book
Consultant @ 500Tech

3. JS

4. Functions are
first-class citizens
wut?

5. function square(number) {
return number * number;
}
var square = function (number) {
return number * number;
};
console.log(square);
const square = (number) => number * number;
array.map(square);

6. function square(number) {
return number * number;
}
var square = function (number) {
return number * number;
};
console.log(square);
const square = (number) => number * number;
array.map(square);

7. function square(number) {
return number * number;
}
var square = function (number) {
return number * number;
};
console.log(square);
const square = (number) => number * number;
array.map(square);

8. function square(number) {
return number * number;
}
var square = function (number) {
return number * number;
};
console.log(square);
const square = (number) => number * number;
array.map(square);

9. HIGHER-ORDER

10. HIGHER-ORDER

11. const a = () => { ... }
const b = (f) => { ... }
b(a);
const c = () => {
return () => {
...
}
}

12. () => () => () => () => (

13. const awesomeMiddleware =
({ dispatch, getState }) =>
(next) =>
(action) => { ... }

14. const awesomeMiddleware =
({ dispatch, getState }) =>
(next) =>
(action) => { ... }

16. HIGHER-ORDER
COMPONENT

17. class BaseComponent extends React.Component { ... }
class InputComponent extends BaseComponent { ... }
class Checkbox extends InputComponent { ... }

18. COMPOSITION
VS.
INHERITANCE

19. COMPOSITION VS. INHERITANCE
What things do What things are
Extend as you need Predict the future
Separated Tightly coupled
Startup Enterprise

20. THE
BANANA/GORILLA
PROBLEM

21. class Checkbox extends React.Component {
constructor() {
Object.asign(this, {
validate(...),
enlargeOnMobile(),
disableIf(...)
})
}
}

22. STATELESS
COMPONENTS
Available from React 0.14+

23. const DropDown = ({ list = [] }) => (
<div className="dropdown">
<ul>
{ list.map((item) => <li>{ item }</li>) }
</ul>
</div>
);

24. const DropDown = ({ list = [] }) => (
<div className="dropdown">
<ul>
{ list.map((item) => <li>{ item }</li>) }
</ul>
</div>
);

25. const loadOptions = (Component) =>
class LoadOptions extends React.Component {
constructor() {
super();
this.state = {
loaded: false,
list: null
}
}
componentDidMount() {
API.fetchOptions().then(
(list) =>
this.setState({ loaded: true, list })
);
}
render() {
return this.state.loaded &&
<Component list={ this.state.list }/>;
}
};

26. const loadOptions = (Component) =>
class LoadOptions extends React.Component {
constructor() {
super();
this.state = {
loaded: false,
list: null
}
}
componentDidMount() {
API.fetchOptions().then(
(list) =>
this.setState({ loaded: true, list })
);
}
render() {
return this.state.loaded &&
<Component list={ this.state.list }/>;
}
};

27. const loadOptions = (Component) =>
class LoadOptions extends React.Component {
constructor() {
super();
this.state = {
loaded: false,
list: null
}
}
componentDidMount() {
API.fetchOptions().then(
(list) =>
this.setState({ loaded: true, list })
);
}
render() {
return this.state.loaded &&
<Component list={ this.state.list }/>;
}
};

28. const loadOptions = (Component) =>
class LoadOptions extends React.Component {
constructor() {
super();
this.state = {
loaded: false,
list: null
}
}
componentDidMount() {
API.fetchOptions().then(
(list) =>
this.setState({ loaded: true, list })
);
}
render() {
return this.state.loaded &&
<Component list={ this.state.list }/>;
}
};

29. const loadOptions = (Component) =>
class LoadOptions extends React.Component {
constructor() {
super();
this.state = {
loaded: false,
list: null
}
}
componentDidMount() {
API.fetchOptions().then(
(list) =>
this.setState({ loaded: true, list })
);
}
render() {
return this.state.loaded &&
<Component list={ this.state.list }/>;
}
};

30. const loadOptions = (Component) =>
class LoadOptions ...
const loadOptions = (Component) => {
class LoadOptions ...
return React.createElement(LoadOptions);
}

31. const DropDown = (...) => (...);
const LazyDropDown = loadOptions(DropDown);
const App = () => (
<div>
<LazyDropDown />
</div>
);

32. const DropDown = (...) => (...);
const App = () => (
<div>
{ loadOptions(DropDown) }
</div>
);

33. const logProps = (Component) => {
console.log(Component.props);
return Component;
};

34. const DropDown = (...) => (...);
const App = () => (
<div>
{ logProps(<DropDown list={ … } />) }
</div>
);

35. DECORATOR

36. npm i recompose -S

37. react-next.com

38. import { withState } from 'recompose';
const DropDown = ({ list, visible, setVisibility }) => (
<div className="dropdown"
onClick={ () => setVisibility(visible => !visible) }>
{ visible && <ul>/* { ... } */</ul> }
</div>
);
export default withState(
'visible', // value on state
'setVisibility', // callback to change the state
false // initial value
)(DropDown);

39. import { withState } from 'recompose';
const DropDown = ({ list, visible, setVisibility }) => (
<div className="dropdown"
onClick={ () => setVisibility(visible => !visible) }>
{ visible && <ul>/* { ... } */</ul> }
</div>
);
export default withState(
'visible', // value on state
'setVisibility', // callback to change the state
false // initial value
)(DropDown);

40. import { withState } from 'recompose';
const DropDown = ({ list, visible, setVisibility }) => (
<div className="dropdown"
onClick={ () => setVisibility(visible => !visible) }>
{ visible && <ul>/* { ... } */</ul> }
</div>
);
export default withState(
'visible', // value on state
'setVisibility', // callback to change the state
false // initial value
)(DropDown);

41. import { withState } from 'recompose';
const DropDown = ({ list, visible, setVisibility }) => (
<div className="dropdown"
onClick={ () => setVisibility(visible => !visible) }>
{ visible && <ul>/* { ... } */</ul> }
</div>
);
export default withState(
'visible', // value on state
'setVisibility', // callback to change the state
false // initial value
)(DropDown);

42. import { withState, mapProps, pure } from 'recompose';
...
withState(..., mapProps(..., pure(MyComponent)));

43. pick(unique(flatten(map(array))));

44. ))))))));

46. pick(unique(flatten(map(array))));
compose(
pick,
unique,
flatten,
map
)(array);

47. function compose(...fns) {
const lastFn = fns[fns.length - 1]
const restFns = fns.slice(0, -1)
return (target) =>
restFns.reduceRight(
(composed, f) => f(composed),
lastFn(target)
)
}

48. function compose(...fns) {
const lastFn = fns[fns.length - 1]
const restFns = fns.slice(0, -1)
return (target) =>
restFns.reduceRight(
(composed, f) => f(composed),
lastFn(target)
)
}

49. function compose(...fns) {
const lastFn = fns[fns.length - 1]
const restFns = fns.slice(0, -1)
return (target) =>
restFns.reduceRight(
(composed, f) => f(composed),
lastFn(target)
)
}

50. function compose(...fns) {
const lastFn = fns[fns.length - 1]
const restFns = fns.slice(0, -1)
return (target) =>
restFns.reduceRight(
(composed, f) => f(composed),
lastFn(target)
)
}

51. – Prefer composition over inheritance
– Use stateless components
– npm install recompose
– Don’t miss ReactNext 2016

52. Read our blog:
http://blog.500tech.com
Ilya Gelman
ilya@500tech.com