React's Equipment System - Higher-Order Component | ReactJS Norway

In this talk, it was discussed how to use Higher Order Components to keep your React applications organized, well-structured and maintainable. Oussama was also talking about how pure functions keep code clean and how these same principles can be applied to React components.

Presenter: Oussama Zaki
=====================================================

Follow us

- ReactJS Norway's site: http://bit.ly/2ka4hC8 

- Facebook: http://bit.ly/2kxmHxW 

- Instagram: http://bit.ly/2kpysnJ 

- Twitter: http://bit.ly/2kaehvl 

- Youtube: https://youtu.be/3kAu4Nbo6oE 

Sponsored by Stooic Labs (http://bit.ly/2oTE4dF)
Organizer: Domenico Solazzo (http://bit.ly/2jRxj8j)

Transcript

1. React’s Equipment System  Higher-Order Component. Oussama Zaki
3. Code-Reuse For The Win.
4. What about the behaviour?
5. export function Loader(props) { if (!props.showLoader) { return null; } return ( <div> <div className="loader"></div> <p>{props.message}</p> </div> ); }
6. export function Alert(props) { if (!props.showAlert) { return null; } return ( <div className={props.type}> <h3>{props.title}</h3> </div> ); }
7. Higher-Order Components
8. “ A higher-order component is a function that takes a component as an input and returns an enhanced version of it. “
9. Functional Programming
10. Functions are First-class citizens
11. function square(number) { return number * number; } var square = function (number) { return number * number; }; array.map(square); var squareWrapper = function () { console.log('Returning a function'); return (number) => number * number; };
12. function square(number) { return number * number; } var square = function (number) { return number * number; }; array.map(square); var squareWrapper = function () { console.log('Returning a function'); return (number) => number * number; };
13. function square(number) { return number * number; } var square = function (number) { return number * number; }; array.map(square); var squareWrapper = function () { console.log('Returning a function'); return (number) => number * number; };
14. function square(number) { return number * number; } var square = function (number) { return number * number; }; array.map(square); var squareWrapper = function () { console.log('Returning a function'); return (number) => number * number; };
15. Higher-order Functions
16. const a = () => { return ... } const b = () => { return () => { return ... } } const b = () => () => {}
17. const a = () => { return ... } const b = () => { return () => { return ... } } const b = () => () => {}
18. const a = () => { return ... } const b = () => { return () => { return ... } } const b = () => () => {}
19. const a = () => { return ... } const b = () => { return () => { return ... } } const b = () => () => {} const bs = () => () => () => () => {}
20. const number = 15; const increment = num => num + 1; const decrement = num => num - 1; const double = num => num * 2; const operation = increment(decrement(double(number)));
21. const HoC = BaseComponent => EnhancedComponent
22. Let’s try it out!
23. Do
24. Pass Unrelated Props Through to the Wrapped Component
25. render() { const { enhanceProp, ...passThroughProps } = this.props; const injectedProp = someStateOrInstanceMethod; // Pass props to wrapped component return ( <WrappedComponent injectedProp={injectedProp} {...passThroughProps} /> ); }
26. Maximizing Composability
27. const myContainer = connect(mapStateToProps, mapDispatchToProps)(myComponent); const enhance = connect(mapStateToProps, mapDispatchToProps); const myContainer = enhance(myComponent);
28. const myContainer = connect(mapStateToProps, mapDispatchToProps)(myComponent); const enhance = connect(mapStateToProps, mapDispatchToProps); const myContainer = enhance(myComponent);
29. Wrap the Display Name for Easy Debugging
30. Don’t!
31. Don’t Use HOCs Inside the render Method
32. render() { const EnhancedComponent = enhance(MyComponent); return <EnhancedComponent />; }
33. Static methods and Refs
34. Don’t over use HoC
35. Thank you!