Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 62973c1

Browse files
add displayName to contexts
1 parent 42cbca1 commit 62973c1

File tree

10 files changed

+29
-0
lines changed

10 files changed

+29
-0
lines changed

‎src/auth-context.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import React from 'react'
66
const AuthContext = React.createContext({
77
user: {username: 'jakiechan', tagline: '', bio: ''},
88
})
9+
AuthContext.displayName = 'AuthContext'
910
const AuthProvider = ({user, ...props}) => (
1011
<AuthContext.Provider value={user} {...props} />
1112
)

‎src/exercise/01.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,18 @@ experiment a bit. It'll help your learning and retention to struggle with this.
6767
- https://reactjs.org/docs/context.html
6868
- https://reactjs.org/docs/hooks-reference.html#usecontext
6969

70+
🦉 Tip: You may notice that the context provider/consumers in React DevTools
71+
just display as `Context.Provider` and `Context.Consumer`. That doesn't do a
72+
good job differentiating itself from other contexts that may be in your app.
73+
Luckily, you can set the context `displayName` and it'll display that name for
74+
the `Provider` and `Consumer`. Hopefully in the future this will happen
75+
automatically ([learn more](https://github.com/babel/babel/issues/11241)).
76+
77+
```javascript
78+
const MyContext = React.createContext()
79+
MyContext.displayName = 'MyContext'
80+
```
81+
7082
## Extra Credit
7183

7284
### 💯 export hooks

‎src/exercise/02.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@ it's selected? We can easily add API surface area to support these use cases,
3535
but that's just more for us to code and more for users to learn. That's where
3636
compound components come in really handy!
3737

38+
Real World Components that implement Compound Components
39+
40+
- [`@react/tooltip`](https://reacttraining.com/reach-ui/tooltip)
41+
- Actually most of [Reach UI](https://reacttraining.com/reach-ui) implements
42+
this pattern
43+
3844
## Exercise
3945

4046
Every reusable component starts out as a simple implementation for a specific

‎src/final/01.extra-1.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import * as userClient from '../user-client'
1010
import {useAuth} from '../auth-context'
1111

1212
const UserContext = React.createContext()
13+
UserContext.displayName = 'UserContext'
1314

1415
function userReducer(state, action) {
1516
switch (action.type) {

‎src/final/01.extra-2.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import * as userClient from '../user-client'
1010
import {useAuth} from '../auth-context'
1111

1212
const UserStateContext = React.createContext()
13+
UserStateContext.displayName = 'UserStateContext'
1314
const UserDispatchContext = React.createContext()
15+
UserDispatchContext.displayName = 'UserDispatchContext'
1416

1517
function userReducer(state, action) {
1618
switch (action.type) {

‎src/final/01.extra-3.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import * as userClient from '../user-client'
1010
import {useAuth} from '../auth-context'
1111

1212
const UserStateContext = React.createContext()
13+
UserStateContext.displayName = 'UserStateContext'
1314
const UserDispatchContext = React.createContext()
15+
UserDispatchContext.displayName = 'UserDispatchContext'
1416

1517
function userReducer(state, action) {
1618
switch (action.type) {

‎src/final/01.extra-4.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import * as userClient from '../user-client'
1010
import {useAuth} from '../auth-context'
1111

1212
const UserStateContext = React.createContext()
13+
UserStateContext.displayName = 'UserStateContext'
1314
const UserDispatchContext = React.createContext()
15+
UserDispatchContext.displayName = 'UserDispatchContext'
1416

1517
function userReducer(state, action) {
1618
switch (action.type) {

‎src/final/01.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import * as userClient from '../user-client'
99
import {useAuth} from '../auth-context'
1010

1111
const UserContext = React.createContext()
12+
UserContext.displayName = 'UserContext'
1213

1314
function userReducer(state, action) {
1415
switch (action.type) {

‎src/final/03.extra-1.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import React from 'react'
55
import {Switch} from '../switch'
66

77
const ToggleContext = React.createContext()
8+
ToggleContext.displayName = 'ToggleContext'
89

910
function Toggle({children}) {
1011
const [on, setOn] = React.useState(false)

‎src/final/03.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from 'react'
44
import {Switch} from '../switch'
55

66
const ToggleContext = React.createContext()
7+
ToggleContext.displayName = 'ToggleContext'
78

89
function Toggle({children}) {
910
const [on, setOn] = React.useState(false)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /