` that's rendered, or I want the `display` to change based on whether
42 | it's selected? We can easily add API surface area to support these use cases,
43 | but that's just more for us to code and more for users to learn. That's where
44 | compound components come in really handy!
45 |
46 | **Real World Projects that use this pattern:**
47 |
48 | - [`@reach/tabs`](https://reacttraining.com/reach-ui/tabs)
49 | - Actually most of [Reach UI](https://reacttraining.com/reach-ui) implements
50 | this pattern
51 |
52 | ## Exercise
53 |
54 | Production deploys:
55 |
56 | - [Exercise](http://advanced-react-patterns.netlify.app/isolated/exercise/02.js)
57 | - [Final](http://advanced-react-patterns.netlify.app/isolated/final/02.js)
58 |
59 | Every reusable component starts out as a simple implementation for a specific
60 | use case. It's advisable to not overcomplicate your components and try to solve
61 | every conceivable problem that you don't yet have (and likely will never have).
62 | But as changes come (and they almost always do), then you'll want the
63 | implementation of your component to be flexible and changeable. Learning how to
64 | do that is the point of much of this workshop.
65 |
66 | This is why we're starting with a super simple `
103 | I will have id "i-am-child-0"
104 | I will have id "i-am-child-1"
105 | I will have id "i-am-child-2"
106 |
107 | )
108 | }
109 | ```
110 |
111 | ## Extra Credit
112 |
113 | ### 1. 💯 Support DOM component children
114 |
115 | [Production deploy](http://advanced-react-patterns.netlify.app/isolated/final/02.extra-1.js)
116 |
117 | > A DOM component is a built-in component like `
`, `
127 |
128 | The button is on
129 | The button is off
130 | Hello
131 |
133 |
134 | )
135 | }
136 | ```
137 |
138 | Notice the error message in the console and try to fix it.
139 |
140 | ## 🦉 Feedback
141 |
142 | Fill out
143 | [the feedback form](https://ws.kcd.im/?ws=Advanced%20React%20Patterns%20%F0%9F%A4%AF&e=02%3A%20Compound%20Components&em=).
144 |
--------------------------------------------------------------------------------
/src/exercise/01.js:
--------------------------------------------------------------------------------
1 | // Context Module Functions
2 | // http://localhost:3000/isolated/exercise/01.js
3 |
4 | import * as React from 'react'
5 | import {dequal} from 'dequal'
6 |
7 | import * as userClient from '../user-client'
8 | import {useAuth} from '../auth-context'
9 |
10 | const UserContext = React.createContext()
11 | UserContext.displayName = 'UserContext'
12 |
13 | function userReducer(state, action) {
14 | switch (action.type) {
15 | case 'start update': {
16 | return {
17 | ...state,
18 | user: {...state.user, ...action.updates},
19 | status: 'pending',
20 | storedUser: state.user,
21 | }
22 | }
23 | case 'finish update': {
24 | return {
25 | ...state,
26 | user: action.updatedUser,
27 | status: 'resolved',
28 | storedUser: null,
29 | error: null,
30 | }
31 | }
32 | case 'fail update': {
33 | return {
34 | ...state,
35 | status: 'rejected',
36 | error: action.error,
37 | user: state.storedUser,
38 | storedUser: null,
39 | }
40 | }
41 | case 'reset': {
42 | return {
43 | ...state,
44 | status: null,
45 | error: null,
46 | }
47 | }
48 | default: {
49 | throw new Error(`Unhandled action type: ${action.type}`)
50 | }
51 | }
52 | }
53 |
54 | function UserProvider({children}) {
55 | const {user} = useAuth()
56 | const [state, dispatch] = React.useReducer(userReducer, {
57 | status: null,
58 | error: null,
59 | storedUser: user,
60 | user,
61 | })
62 | const value = [state, dispatch]
63 | return {children}
64 | }
65 |
66 | function useUser() {
67 | const context = React.useContext(UserContext)
68 | if (context === undefined) {
69 | throw new Error(`useUser must be used within a UserProvider`)
70 | }
71 | return context
72 | }
73 |
74 | function updateUser(dispatch, user, updates) {
75 | dispatch({type: 'start update', updates})
76 | userClient.updateUser(user, updates).then(
77 | updatedUser => dispatch({type: 'finish update', updatedUser}),
78 | error => dispatch({type: 'fail update', error}),
79 | )
80 | }
81 |
82 | function UserSettings() {
83 | const [{user, status, error}, userDispatch] = useUser()
84 |
85 | const isPending = status === 'pending'
86 | const isRejected = status === 'rejected'
87 |
88 | const [formState, setFormState] = React.useState(user)
89 |
90 | const isChanged = !dequal(user, formState)
91 |
92 | function handleChange(e) {
93 | setFormState({...formState, [e.target.name]: e.target.value})
94 | }
95 |
96 | function handleSubmit(event) {
97 | event.preventDefault()
98 | updateUser(userDispatch, user, formState);
99 | }
100 |
101 | return (
102 |
166 | )
167 | }
168 |
169 | function UserDataDisplay() {
170 | const [{user}] = useUser()
171 | return {JSON.stringify(user, null, 2)}
172 | }
173 |
174 | function App() {
175 | return (
176 |
185 |
186 |
189 |
190 | )
191 | }
192 |
193 | export default App
194 |
--------------------------------------------------------------------------------
/src/final/01.js:
--------------------------------------------------------------------------------
1 | // Context Module Functions
2 | // http://localhost:3000/isolated/final/01.js
3 |
4 | import * as React from 'react'
5 | import {dequal} from 'dequal'
6 |
7 | // ./context/user-context.js
8 |
9 | import * as userClient from '../user-client'
10 | import {useAuth} from '../auth-context'
11 |
12 | const UserContext = React.createContext()
13 | UserContext.displayName = 'UserContext'
14 |
15 | function userReducer(state, action) {
16 | switch (action.type) {
17 | case 'start update': {
18 | return {
19 | ...state,
20 | user: {...state.user, ...action.updates},
21 | status: 'pending',
22 | storedUser: state.user,
23 | }
24 | }
25 | case 'finish update': {
26 | return {
27 | ...state,
28 | user: action.updatedUser,
29 | status: 'resolved',
30 | storedUser: null,
31 | error: null,
32 | }
33 | }
34 | case 'fail update': {
35 | return {
36 | ...state,
37 | status: 'rejected',
38 | error: action.error,
39 | user: state.storedUser,
40 | storedUser: null,
41 | }
42 | }
43 | case 'reset': {
44 | return {
45 | ...state,
46 | status: null,
47 | error: null,
48 | }
49 | }
50 | default: {
51 | throw new Error(`Unhandled action type: ${action.type}`)
52 | }
53 | }
54 | }
55 |
56 | function UserProvider({children}) {
57 | const {user} = useAuth()
58 | const [state, dispatch] = React.useReducer(userReducer, {
59 | status: null,
60 | error: null,
61 | storedUser: user,
62 | user,
63 | })
64 | const value = [state, dispatch]
65 | return {children}
66 | }
67 |
68 | function useUser() {
69 | const context = React.useContext(UserContext)
70 | if (context === undefined) {
71 | throw new Error(`useUser must be used within a UserProvider`)
72 | }
73 | return context
74 | }
75 |
76 | // got this idea from Dan and I love it:
77 | // https://twitter.com/dan_abramov/status/1125773153584676864
78 | async function updateUser(dispatch, user, updates) {
79 | dispatch({type: 'start update', updates})
80 | try {
81 | const updatedUser = await userClient.updateUser(user, updates)
82 | dispatch({type: 'finish update', updatedUser})
83 | return updatedUser
84 | } catch (error) {
85 | dispatch({type: 'fail update', error})
86 | return Promise.reject(error)
87 | }
88 | }
89 |
90 | // export {UserProvider, useUserState, updateUser}
91 |
92 | // src/screens/user-profile.js
93 | // import {UserProvider, useUserState, updateUser} from './context/user-context'
94 | function UserSettings() {
95 | const [{user, status, error}, userDispatch] = useUser()
96 |
97 | const isPending = status === 'pending'
98 | const isRejected = status === 'rejected'
99 |
100 | const [formState, setFormState] = React.useState(user)
101 |
102 | const isChanged = !dequal(user, formState)
103 |
104 | function handleChange(e) {
105 | setFormState({...formState, [e.target.name]: e.target.value})
106 | }
107 |
108 | function handleSubmit(event) {
109 | event.preventDefault()
110 | updateUser(userDispatch, user, formState).catch(() => {
111 | /* ignore the error */
112 | })
113 | }
114 |
115 | return (
116 |
180 | )
181 | }
182 |
183 | function UserDataDisplay() {
184 | const [{user}] = useUser()
185 | return {JSON.stringify(user, null, 2)}
186 | }
187 |
188 | function App() {
189 | return (
190 |
199 |
200 |
203 |
204 | )
205 | }
206 |
207 | export default App
208 |
--------------------------------------------------------------------------------
/src/final/06.extra-3.js:
--------------------------------------------------------------------------------
1 | // Control Props
2 | // 💯 extract warnings to a custom hook
3 | // http://localhost:3000/isolated/final/06.extra-3.js
4 |
5 | import * as React from 'react'
6 | import warning from 'warning'
7 | import {Switch} from '../switch'
8 |
9 | const callAll = (...fns) => (...args) => fns.forEach(fn => fn?.(...args))
10 |
11 | const actionTypes = {
12 | toggle: 'toggle',
13 | reset: 'reset',
14 | }
15 |
16 | function toggleReducer(state, {type, initialState}) {
17 | switch (type) {
18 | case actionTypes.toggle: {
19 | return {on: !state.on}
20 | }
21 | case actionTypes.reset: {
22 | return initialState
23 | }
24 | default: {
25 | throw new Error(`Unsupported type: ${type}`)
26 | }
27 | }
28 | }
29 |
30 | function useControlledSwitchWarning(
31 | controlPropValue,
32 | controlPropName,
33 | componentName,
34 | ) {
35 | const isControlled = controlPropValue != null
36 | const {current: wasControlled} = React.useRef(isControlled)
37 |
38 | React.useEffect(() => {
39 | warning(
40 | !(isControlled && !wasControlled),
41 | `\`${componentName}\` is changing from uncontrolled to be controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled \`${componentName}\` for the lifetime of the component. Check the \`${controlPropName}\` prop.`,
42 | )
43 | warning(
44 | !(!isControlled && wasControlled),
45 | `\`${componentName}\` is changing from controlled to be uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled \`${componentName}\` for the lifetime of the component. Check the \`${controlPropName}\` prop.`,
46 | )
47 | }, [componentName, controlPropName, isControlled, wasControlled])
48 | }
49 |
50 | function useOnChangeReadOnlyWarning(
51 | controlPropValue,
52 | controlPropName,
53 | componentName,
54 | hasOnChange,
55 | readOnly,
56 | readOnlyProp,
57 | initialValueProp,
58 | onChangeProp,
59 | ) {
60 | const isControlled = controlPropValue != null
61 | React.useEffect(() => {
62 | warning(
63 | !(!hasOnChange && isControlled && !readOnly),
64 | `A \`${controlPropName}\` prop was provided to \`${componentName}\` without an \`${onChangeProp}\` handler. This will result in a read-only \`${controlPropName}\` value. If you want it to be mutable, use \`${initialValueProp}\`. Otherwise, set either \`${onChangeProp}\` or \`${readOnlyProp}\`.`,
65 | )
66 | }, [
67 | componentName,
68 | controlPropName,
69 | isControlled,
70 | hasOnChange,
71 | readOnly,
72 | onChangeProp,
73 | initialValueProp,
74 | readOnlyProp,
75 | ])
76 | }
77 |
78 | function useToggle({
79 | initialOn = false,
80 | reducer = toggleReducer,
81 | onChange,
82 | on: controlledOn,
83 | readOnly = false,
84 | } = {}) {
85 | const {current: initialState} = React.useRef({on: initialOn})
86 | const [state, dispatch] = React.useReducer(reducer, initialState)
87 |
88 | const onIsControlled = controlledOn != null
89 | const on = onIsControlled ? controlledOn : state.on
90 |
91 | useControlledSwitchWarning(controlledOn, 'on', 'useToggle')
92 | useOnChangeReadOnlyWarning(
93 | controlledOn,
94 | 'on',
95 | 'useToggle',
96 | Boolean(onChange),
97 | readOnly,
98 | 'readOnly',
99 | 'initialOn',
100 | 'onChange',
101 | )
102 |
103 | function dispatchWithOnChange(action) {
104 | if (!onIsControlled) {
105 | dispatch(action)
106 | }
107 | onChange?.(reducer({...state, on}, action), action)
108 | }
109 |
110 | const toggle = () => dispatchWithOnChange({type: actionTypes.toggle})
111 | const reset = () =>
112 | dispatchWithOnChange({type: actionTypes.reset, initialState})
113 |
114 | function getTogglerProps({onClick, ...props} = {}) {
115 | return {
116 | 'aria-pressed': on,
117 | onClick: callAll(onClick, toggle),
118 | ...props,
119 | }
120 | }
121 |
122 | function getResetterProps({onClick, ...props} = {}) {
123 | return {
124 | onClick: callAll(onClick, reset),
125 | ...props,
126 | }
127 | }
128 |
129 | return {
130 | on,
131 | reset,
132 | toggle,
133 | getTogglerProps,
134 | getResetterProps,
135 | }
136 | }
137 |
138 | function Toggle({on: controlledOn, onChange, readOnly}) {
139 | const {on, getTogglerProps} = useToggle({
140 | on: controlledOn,
141 | onChange,
142 | readOnly,
143 | })
144 | const props = getTogglerProps({on})
145 | return
167 |
168 |
171 | {timesClicked > 4 ? (
172 |
173 | Whoa, you clicked too much!
174 |
176 | ) : (
177 |
Click count: {timesClicked}
178 | )}
179 |
Reset
180 |
181 |
182 |
Uncontrolled Toggle:
183 |
185 | console.info('Uncontrolled Toggle onChange', ...args)
186 | }
187 | />
188 |
189 |
171 |
172 |
175 | {timesClicked > 4 ? (
176 |
177 | Whoa, you clicked too much!
178 |
180 | ) : (
181 |
Click count: {timesClicked}
182 | )}
183 |
Reset
184 |
185 |
186 |
Uncontrolled Toggle:
187 |
189 | console.info('Uncontrolled Toggle onChange', ...args)
190 | }
191 | />
192 |
193 |
63 |
Current Count: {state.count}
64 |
-
65 |
+
66 |
78 |
80 | )
81 | }
82 | ```
83 |
84 | > You can pull this example up here:
85 | > http://localhost:3000/isolated/examples/counter-before.js
86 |
87 | I want to focus in on the user of our reducer (the `Counter` component). Notice
88 | that they have to create their own `increment` and `decrement` functions which
89 | call `dispatch`. I don't think that's a super great API. It becomes even more of
90 | an annoyance when you have a sequence of `dispatch` functions that need to be
91 | called (like you'll see in our exercise).
92 |
93 | The first inclination is to create "helper" functions and include them in the
94 | context. Let's do that. You'll notice that we have to put it in
95 | `React.useCallback` so we can list our "helper" functions in dependency lists):
96 |
97 | ```javascript
98 | const increment = React.useCallback(
99 | () => dispatch({type: 'increment'}),
100 | [dispatch],
101 | )
102 | const decrement = React.useCallback(
103 | () => dispatch({type: 'decrement'}),
104 | [dispatch],
105 | )
106 | const value = {state, increment, decrement}
107 | return
175 |
Current Count: {state.count}
176 |
decrement(dispatch)}>-
177 |
increment(dispatch)}>+
178 |
2 |
3 |
4 | Learn how to build simple and flexible React Components and Hooks using
5 | modern patterns
6 |
7 |
8 | Not only learn great patterns you can use but also the strengths and
9 | weaknesses of each, so you know which to reach for to provide your custom
10 | hooks and components the flexibility and power you need.
11 |
12 |
13 |
14 |
19 |