ARP-real-world.pdf

Component patterns have been around for a while, but in this
talk, I'll explain the ins and outs of each pattern in relatable language.

To do this, I'll employ graphical illustrations and everyday analogies
that'll help you intuitively understand these patterns.
The talk will then come full circle as I point you real-world examples of
these patterns in use!

Transcript

1. Ohans Emmanuel Advanced React Patterns In Plain, Approachable Language
2. • Snr. Frontend Engineer, Omio • ✏ Writer & Published Author • I dance & listen to Music while Quarantining alone. This is me.
3. • Introduce each pattern • ✏ See a basic example • Explore open-source community examples • ⁉ Answer questions How the talk is Structured
4. Custom Hooks: The foundational Pattern A mechanism to reuse stateful logic const useAdvancedPatterns = () => { } // state and effects isolated here // Must be called from a React fn component/other custom hook useAdvancedPatterns()
5. Small set of functions that do one thing and help you use the logic embedded in them. useEffectOnce() // a modified useEffect hook that only runs once. // subscribe to events. useEvent() usePromise() // resolves promise only while component is mounted
6. const values = useTable({columns,data,}) takes a very interesting approach to custom hooks. // use values to build your own UI
7. Pros 1. Single Responsibility Modules 2. Reduced Complexity 1. Bring your own UI Cons
8. The Compound Components Pattern Communicate the relationship between UI components and share implicit state by leveraging an explicit parent-child relationship. <MediumClap> <MediumClap.Icon /> <MediumClap.Total /> <MediumClap.Count /> </MediumClap>
9. <MediumClap> <Icon /> <Total /> <Count /> </MediumClap> This is equally valid: UI state is managed by the Parent and communicated through the component tree via the Context API
10. Consider how an Accordion component from ReachUI is used: import { Accordion, AccordionItem, AccordionButton } from “@reach/accordion”; return ( <Accordion> <AccordionItem> <h3><AccordionButton> Header </AccordionButton></h3> <AccordionPanel> Message </AccordionPanel> </AccordionItem> </Accordion> )
11. Pros 1. Flexible Markup Structure 2. Reduced Complexity 3. Separation of concerns 1. A little more work needs to be done Cons
12. Extensible Styles Overriding and adding new styles Core principle: Allow users style your components like they would other elements/ components <YourComponent className=`shouldWork`/> <YourComponent style=`shouldWork`/>
15. The Control Props Pattern Control props allow users of your component to control the UI state via certain “control” props. <YourComponent value=`string` onChange= {fn}/>
16. <Rating name=`size-medium` defaultValue={2} /> Consider the Rating component from Material-UI. // controlled <Rating value={someValue} onChange={someCallback} name=`size-medium` defaultValue={2} />
18. Pros 1. Inversion of control 1. Duplicate Code Cons
19. The Props Getters Pattern Provide a collection of props to users of your hooks/component const {getPropsCollection} = useYourHook() const propsCollection = getPropsCollection({ }) onClick: myClickHandler data-testId: `my-test-id`
20. useTable({data}) To make composing UIs easier, it offers a set of prop getters. <table {...getTableProps()}> //other UI elements go here </table> const {getTableProps, getTableBodyProps} =
21. State Initialisers Pattern Allowing for configurable initial state, and an optional state reset handler. const {value, reset} = useYourHook(initialState) ⁉ Passing props to state is generally frowned upon // internally const [internalState] = useState(initialState)
22. import { Formik } from ‘formik’ Consider the contrived Formik usage below: <Formik initialValues={{ firstName: “”, lastName: “”, email: “” }}> </Formik>
24. Pros 1. Important feature for most UI components 2. Easy to implement 1. May be trivial Cons
25. State Reducers Pattern State reducers allow you to cede state control to the users of your component. Also, by leveraging action types, you minimise code duplicates on the user’s side. const values = useYourHook(reducer, …otherArgs)
26. <Downshift stateReducer={stateReducer} /> Each time Downshift sets internal state, the reducer is invoked const stateReducer = (state, changes) => newState
28. Pros 1. Ultimate Inversion of control 1. The most complex of the bunch to implement Cons
29. • Go use these examples • ✏ Let me know what you think. @OhansEmmanuel • ⛑ Stay safe! Thank you. https://bit.ly/react-patterns-real-world