React Component Patterns WDI version

In which I present most popular React design patterns like: Higher order Component, Function as a Child (Render Prop), Provider Component, Compound Components, and Reducer Component. I describe each pattern and discuss it's tradeoff, and also provide usage and implementation examples.

Transcript

1. React Component Patterns @jankowiak_dawid HolidayCheck
2. >>>Pytania? Zadawaj je, oceniaj prelekcję, komentuj lub polub poprzez sli.do: WarszawskieDniInformatyki.pl/slido
3. Higher Order Component Function as a Child (Render Function) Provider Component Compound Components Reducer Component
4. Connect(react-redux) Recompose Redux-Form Function that takes a component as a parameter and returns another component
5. const ApplicantInfoPage = ({ data }) => {...}; export default withFetch( ownProps => `/api/applicants/${ownProps.match.props.id}` )(ApplicantInfoPage);
6. const withFetch = urlGetter => BaseComponent => class WithFetch extends React.Component { state = { isLoading: true, error: null, data: null }; static displayName = `WithFetch(${wrapDisplayName( BaseComponent )})`;
7. componentDidMount() { axios .get(urlGetter(this.props)) .then(({ data }) => this.setState({ data, isLoading: false })) .catch(error => this.setState({ error, isLoading: false })); }
8. render() { if (this.state.isLoading === true) { return <Loading />; } if (this.state.error !== null) { return <ErrorPanel />; } return <BaseComponent {...this.props} data={this.state.data} />; } };
9. Lets you mix behaviours Simple to use Composable (like regular function composition) Applicable before use (cannot be used in render function) Refs aren’t passed through Static methods must be copied over
10. https://github.com/acdlite/recompose/blob/master/docs/performance.md https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 More on the topic:
11. Downshift React-Motion React-Router v4 react-virtualized Passing a function to a component (as a prop or children of component) that tells it what to render
12. <Paging items={itemsArray} itemsPerPage={10} render={item => ( <div>{item.name}</div> )} />; <Paging items={itemsArray} itemsPerPage={10} > {item => ( <div>{item.name}</div> )} </Paging>;
13. class Paging extends Component { … render() { const items = this.getItems(); return ( <div> {items.map(this.prop.render)} {this.renderButtons()} </div> ); } } class Paging extends Component { … render() { const items = this.getItems(); return ( <div> {items.map(this.prop.children)} {this.renderButtons()} </div> ); } }
14. Used as regular components Simple to implement Dynamic in nature Nesting (hell?) Returning large component tree may introduce performance problems
15. https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce https://blog.kentcdodds.com/introducing-downshift-for-react-b1de3fca0817 http://americanexpress.io/faccs-are-an-antipattern/ More on the topic:
16. React-Redux React-Intl React-Router Expose data or heavy computation to children components via context
17. const App = () => ( <AuthenticationProvider> <div> <NavBar /> <BrowserRouter> <Route exact path="/" component={Home} /> <Route path="/profile" component={Profile} /> <Route path="/campaigns" component={Campaigns} /> </BrowserRouter> </div> </AuthenticationProvider> );
18. const UserShape = PropTypes.shape({ firstName: PropTypes.string, lastName: PropTypes.string, avatarUrl: PropTypes.string, … });
19. const UserShape = PropTypes.shape({ firstName: PropTypes.string, lastName: PropTypes.string, avatarUrl: PropTypes.string, … });
20. class AuthenticationProvider extends React.Component { static childContextTypes = { user: UserShape }; state = { isAuthenticated: false, user: null }; getChildContext() { return { user: this.state.user }; }
21. componentDidMount() { checkCookie().then(user => this.setState({ isAuthenticated: true, user }) ); } handleAuthentication = user => { setCookie(user); this.setState({ isAuthenticated: true, user }); };
22. render() { if (this.state.isAuthenticated) { return React.Children.only(this.props.children); } return ( <Authentication onAuthenticated={this.handleAuthentication} /> ); } }
23. const withUser = BaseComponent => class extends React.Component { static contextTypes = { user: UserShape }; render() { return ( <BaseComponent {...this.props} user={this.context.user} /> ); } };
24. Helps with passing data down the component tree Introduces indirectness Not needed when there is a global state manager Abstract how data is passing
25. http://lucasmreis.github.io/blog/simple-react-patterns/ https://egghead.io/lessons/react-implement-a-react-context-provider https://www.robinwieruch.de/react-provider-pattern-context/ More on the topic:
26. Table List Accordion Tabs Carousel Components that share the local state
27. <Carousel> <Item> <img src="some-nsfw.png" /> </Item> <Item active> <h1>Bold title</h1> </Item> </Carousel>;
28. const Item = ({ children, isHighlighted }) => ( <section className={isHighlighted ? 'highlighted' : ''}> {children} </section> )
29. class Carousel extends Component { state = { activeIndex: null }; render() { const { state: { activeIndex }, props: { children } } = this; return ( <div> <PrevButton onClick={this.handlePreviewClick()} /> {this.renderActiveItem(children, activeIndex)} {this.renderDottedMenu(children)} <NextButton onClick={this.handleNextClick()} /> </div> ); }
30. ... renderActiveItem(items, activeIndex) { const item = React.Children.toArray(items).find((item, index) => { if (activeIndex !== null) return index === activeIndex; return item.props.active === true; }); return React.cloneElement(item, { isHighlighted: true }); } ...
31. ... renderDottedMenu(items) { return React.Children.map(items, (item, index) => <DotMenuItem onClick={() => this.setState({ activeIndex: index })} /> ); } }
32. Enables creating general purpose sharable components Require a lot of imperative manual work Local state harder to manage from outside
33. React.Children.toArray React.Children.map React.cloneElement React.Children.count React.Children.only React.Children.forEach React.isValidElement
34. http://mxstbr.blog/2017/02/react-children-deepdive/ https://youtu.be/hEGg-3pIHlE http://developingthoughts.co.uk/using-the-react-children-api/ More on the topic:
35. Component with State Machine, inspired by ReasonReact, feels like Redux in component Rediscovered from recompose (bet all familiar with redux had this idea)
36. class Counter extends ReducerComponent { state = { count: 0 }; increment(_e) { return "increment"; } decrement(_e) { return "decrement"; }
37. reducer(state, action) { switch (action) { case "increment": return { count: state.count + 1 }; case "decrement": return { count: state.count - 1 }; } }
38. render() { return ( <div> Counter: {this.state.count} <button onClick={this.dispatch(this.increment)}>+</button> <button onClick={this.dispatch(this.decrement)}>-</button> </div> ); } }
39. class ReducerComponent extends React.Component { reducer(state, action) { return state; } dispatch(actionCreator) { return (...eventArgs) => { this.setState((prevState) => { this.reducer(prevState, actionCreator(...eventArgs)); }); }; } }
40. Simple to manage a complex state For small apps/complex local states Requires familiarity with a reducing state Not needed when other State libraries are present (Redux/MobX)
41. https://twitter.com/_developit/status/905250269306474497 https://twitter.com/jaredpalmer/status/905170062679662594 https://twitter.com/_developit/status/905427773891727360 https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html More on the topic:
42. Higher Order Component Lets you add behaviour to components Function As a Child (Render Function) Lets you focus on what will be rendered Provider Component Lets you pass data deep down the component tree Compound Components Lets you create groups of components with shared state
44. @jankowiak_dawid