React component patterns

Transcript

1. @jankowiak_dawid
2. Higher Order Component Function as a Child (Render Function) Compound Components Reducer Component
3. Connect(react-redux) Recompose Redux-Form Function that takes a component as a parameter and returns another component
4. const ApplicantInfoPage = ({ data, isLoading, error }) => {...}; export default withFetch( ownProps => `/api/applicants/${ownProps.match.props.id}` )(ApplicantInfoPage);
5. const withFetch = urlGetter => BaseComponent => class WithFetch extends React.Component { state = { isLoading: true, error: null, data: null }; static displayName = `WithFetch(${wrapDisplayName( BaseComponent )})`;
6. componentDidMount() { axios .get(urlGetter(this.props)) .then(({ data }) => this.setState({ data, isLoading: false })) .catch(error => this.setState({ error, isLoading: false })); }
7. render() { if (this.state.isLoading === true) { return <Loading />; } if (this.state.error !== null) { return <ErrorPanel />; } return <BaseComponent {...this.props} data={this.state.data} />; } };
8. 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
9. 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:
10. 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
11. <Paging items={itemsArray} itemsPerPage={10} render={item => ( <div>{item.name}</div> )} />; <Paging items={itemsArray} itemsPerPage={10} > {item => ( <div>{item.name}</div> )} </Paging>;
12. 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> ); } }
13. Used as regular components Simple to implement Dynamic in nature Nesting (hell?) Returning large component tree may introduce performance problems
14. 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:
15. Table List Accordion Tabs Carousel Components that share the local state
16. <Carousel> <Item> <img src="some-nsfw.png" /> </Item> <Item active> <h1>Bold title</h1> </Item> </Carousel>;
17. const Item = ({ children, isHighlighted }) => ( <section className={isHighlighted ? 'highlighted' : ''}> {children} </section> )
18. class Carousel extends Component { state = { activeIndex: null }; render() { const { state: { activeIndex }, props: { children } } = this; return ( <div> <PrevButton onClick={this.handlePreviewClick()} /> {this.getActiveItem(children, activeIndex)} {this.getDottedMenu(children)} <NextButton onClick={this.handleNextClick()} /> </div> ); }
19. ... getActiveItem(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 }); } ...
20. ... getDottedMenu(items) { return React.Children.map(items, (item, index) => <DotMenuItem onClick={() => this.setState({ activeIndex: index })} /> ); } }
21. Enables creating general purpose sharable components Require a lot of imperative manual work Local state harder to manage from outside
22. React.Children.toArray React.Children.map React.cloneElement React.Children.count React.Children.only React.Children.forEach React.isValidElement
23. 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:
24. Component with State Machine, inspired by ReasonReact, feels like Redux in component Rediscovered from recompose (bet all familiar with redux had this idea)
25. class Counter extends ReducerComponent { state = { count: 0 }; increment(_e) { return "increment"; } decrement(_e) { return "decrement"; }
26. reducer(state, action) { switch (action) { case "increment": return { count: state.count + 1 }; case "decrement": return { count: state.count - 1 }; } }
27. render() { return ( <div> Counter: {this.state.count} <button onClick={this.dispatch(this.increment)}>+</button> <button onClick={this.dispatch(this.decrement)}>-</button> </div> ); } }
28. class ReducerComponent extends React.Component { reducer(state, action) { return state; } dispatch(actionCreator) { return (...eventArgs) => { this.setState((prevState, _props) => { this.reducer(prevState, actionCreator(...eventArgs)); }); }; } }
29. 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)
30. 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:
31. Higher Order Component Lets you add behaviour to components Function As a Child (Render Function) Lets you focus on what will be rendered Compound Components Lets you create groups of components with shared state Reducer Component Lets you manage a component state in a single place
32. @jankowiak_dawid