Skip to content

Commit cd75a49

Browse files
bradwestfallbradwestfall
committed
new react 19 context
1 parent 4fd1e66 commit cd75a49

File tree

26 files changed

+89
-90
lines changed

26 files changed

+89
-90
lines changed

‎.eslintrc.cjs

-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ module.exports = {
1010
parser: '@typescript-eslint/parser',
1111
plugins: ['react-refresh'],
1212
rules: {
13-
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
1413
'no-unused-vars': 'off',
1514
'@typescript-eslint/no-unused-vars': 'off',
1615
},

‎react/_full-app/AuthContext.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createContext, useContext, useReducer, useEffect } from 'react'
1+
import { createContext, use, useReducer, useEffect } from 'react'
22
import { api } from '~/utils/api'
33
import type { User } from '~/utils/types'
44

@@ -71,11 +71,11 @@ export function AuthProvider({ children }: Props) {
7171
logout,
7272
}
7373

74-
return <AuthContext.Provider value={context} children={children} />
74+
return <AuthContext value={context} children={children} />
7575
}
7676

7777
export function useAuthContext() {
78-
const context = useContext(AuthContext)
78+
const context = use(AuthContext)
7979
if (!context) {
8080
throw Error('Use of `useAuthContext` is outside of `AuthProvider`')
8181
}

‎react/_full-app/DatePicker.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createContext, useState, useContext } from 'react'
1+
import { createContext, useState, use } from 'react'
22
import dayjs from 'dayjs'
33
import duration from 'dayjs/plugin/duration'
44
import isBetween from 'dayjs/plugin/isBetween'
@@ -74,7 +74,7 @@ export function DatePicker({
7474
setBaseMonth,
7575
}
7676

77-
return <Context.Provider value={context}>{children}</Context.Provider>
77+
return <Context value={context}>{children}</Context>
7878
}
7979

8080
/****************************************
@@ -87,7 +87,7 @@ type DatePickerCalendarProps = {
8787
}
8888

8989
export function DatePickerCalendar({ offset = 0 }: DatePickerCalendarProps) {
90-
const { baseMonthFirst, selectDate, selectedDates } = useContext(Context)
90+
const { baseMonthFirst, selectDate, selectedDates } = use(Context)
9191
// The first day of the base month
9292
const theFirst = offset === 0 ? baseMonthFirst : baseMonthFirst.add(offset, 'month')
9393

@@ -160,7 +160,7 @@ type DatePickerChangeMonthProps = {
160160
} & React.HTMLAttributes<HTMLButtonElement>
161161

162162
export function DatePickerChangeMonth({ children, to, ...props }: DatePickerChangeMonthProps) {
163-
const { setBaseMonth } = useContext(Context)
163+
const { setBaseMonth } = use(Context)
164164
return (
165165
<button
166166
type="button"
@@ -183,6 +183,6 @@ type DatePickerLabelProps = {
183183
}
184184

185185
export function DatePickerLabel({ format = 'MMMM', offset = 0 }: DatePickerLabelProps) {
186-
const { baseMonthFirst } = useContext(Context)
186+
const { baseMonthFirst } = use(Context)
187187
return <>{baseMonthFirst.add(offset, 'month').format(format)}</>
188188
}

‎react/_full-app/FavoriteContext.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createContext, useContext, useEffect, useLayoutEffect, useState } from 'react'
1+
import { createContext, use, useEffect, useLayoutEffect, useState } from 'react'
22

33
type Context = {
44
favorites: number[]
@@ -44,11 +44,11 @@ export function FavoriteProvider({ children }: Props) {
4444
isFavorite,
4545
}
4646

47-
return <FavoriteContext.Provider value={context} children={children} />
47+
return <FavoriteContext value={context} children={children} />
4848
}
4949

5050
export function useFavoriteContext() {
51-
const context = useContext(FavoriteContext)
51+
const context = use(FavoriteContext)
5252
if (!context) {
5353
throw Error('Use of `useFavoriteContext` is outside of `FavoriteProvider`')
5454
}

‎react/advanced-component-design/01-compound-components/lecture/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, createContext, useContext, useId } from 'react'
1+
import { useState, createContext, use, useId } from 'react'
22
import * as ReactDOM from 'react-dom/client'
33
import { Login } from './pages/Login'
44
import { Signup } from './pages/Signup'

‎react/advanced-component-design/03-advanced-composition/lecture/DatePicker.final.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { createContext, useState, useContext } from 'react'
1+
import React, { createContext, useState, use } from 'react'
22
import dayjs from 'dayjs'
33
import duration from 'dayjs/plugin/duration'
44
import isBetween from 'dayjs/plugin/isBetween'
@@ -74,7 +74,7 @@ export function DatePicker({
7474
setBaseMonth,
7575
}
7676

77-
return <Context.Provider value={context}>{children}</Context.Provider>
77+
return <Context value={context}>{children}</Context>
7878
}
7979

8080
/****************************************
@@ -87,7 +87,7 @@ type DatePickerCalendarProps = {
8787
}
8888

8989
export function DatePickerCalendar({ offset = 0 }: DatePickerCalendarProps) {
90-
const { baseMonthFirst, selectDate, selectedDates } = useContext(Context)
90+
const { baseMonthFirst, selectDate, selectedDates } = use(Context)
9191
// The first day of the base month
9292
const theFirst = offset === 0 ? baseMonthFirst : baseMonthFirst.add(offset, 'month')
9393

@@ -160,7 +160,7 @@ type DatePickerChangeMonthProps = {
160160
} & React.HTMLAttributes<HTMLButtonElement>
161161

162162
export function DatePickerChangeMonth({ children, to, ...props }: DatePickerChangeMonthProps) {
163-
const { setBaseMonth } = useContext(Context)
163+
const { setBaseMonth } = use(Context)
164164
return (
165165
<button {...props} data-datepicker-change-month="" onClick={() => setBaseMonth(to)}>
166166
{children}
@@ -178,6 +178,6 @@ type DatePickerLabelProps = {
178178
}
179179

180180
export function DatePickerLabel({ format = 'MMMM', offset = 0 }: DatePickerLabelProps) {
181-
const { baseMonthFirst } = useContext(Context)
181+
const { baseMonthFirst } = use(Context)
182182
return <>{baseMonthFirst.add(offset, 'month').format(format)}</>
183183
}

‎react/advanced-component-design/03-advanced-composition/lecture/DatePicker.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { createContext, useState, useContext } from 'react'
1+
import React, { createContext, useState, use } from 'react'
22
import dayjs from 'dayjs'
33
import duration from 'dayjs/plugin/duration'
44
import isBetween from 'dayjs/plugin/isBetween'
@@ -173,7 +173,7 @@ export function DatePickerCalendar({
173173
// } & React.HTMLAttributes<HTMLButtonElement>
174174

175175
// export function DatePickerChangeMonth({ children, to, ...props }: DatePickerChangeMonthProps) {
176-
// const { setBaseMonth } = useContext(Context)
176+
// const { setBaseMonth } = use(Context)
177177
// return (
178178
// <button {...props} data-datepicker-change-month="" onClick={() => setBaseMonth(to)}>
179179
// {children}
@@ -194,6 +194,6 @@ export function DatePickerCalendar({
194194
// format = 'MMMM',
195195
// offset = 0,
196196
// }: DatePickerLabelProps) {
197-
// const { baseMonthFirst } = useContext(Context)
197+
// const { baseMonthFirst } = use(Context)
198198
// return <>{baseMonthFirst.add(offset, 'month').format(format)}</>
199199
// }

‎react/advanced-compound-components/02-context-and-events/lecture/Accordion.final.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useId, useContext, createContext } from 'react'
1+
import React, { useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
const AccordionContext = createContext()
@@ -27,7 +27,7 @@ export const Accordion = React.forwardRef(
2727
setSelectedIndex(index)
2828
},
2929
}
30-
return <AccordionContext.Provider value={context} children={child} />
30+
return <AccordionContext value={context} children={child} />
3131
})
3232

3333
function onKeyDown(event) {
@@ -65,7 +65,7 @@ Accordion.displayName = 'Accordion'
6565
*/
6666

6767
export const AccordionItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
68-
const { selected } = useContext(AccordionContext)
68+
const { selected } = use(AccordionContext)
6969

7070
return (
7171
<div
@@ -86,7 +86,7 @@ AccordionItem.displayName = 'AccordionItem'
8686
*/
8787

8888
export const AccordionButton = React.forwardRef(({ children, onClick, ...props }, forwardedRef) => {
89-
const { buttonId, panelId, selected, selectPanel } = useContext(AccordionContext)
89+
const { buttonId, panelId, selected, selectPanel } = use(AccordionContext)
9090

9191
return (
9292
<button
@@ -111,7 +111,7 @@ AccordionButton.displayName = 'AccordionButton'
111111
*/
112112

113113
export const AccordionPanel = React.forwardRef(({ children, ...props }, forwardedRef) => {
114-
const { buttonId, panelId, selected } = useContext(AccordionContext)
114+
const { buttonId, panelId, selected } = use(AccordionContext)
115115

116116
return (
117117
<div

‎react/advanced-compound-components/02-context-and-events/lecture/Accordion.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useId, useContext, createContext } from 'react'
1+
import React, { useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
/**

‎react/advanced-compound-components/02-context-and-events/practice/Disclosure.final.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useId, useContext, createContext } from 'react'
1+
import React, { useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
const DisclosureContext = createContext()
@@ -18,17 +18,17 @@ export function Disclosure({ children, onChange, defaultOpen = false, ...props }
1818
}
1919

2020
return (
21-
<DisclosureContext.Provider value={context}>
21+
<DisclosureContext value={context}>
2222
<div {...props} data-disclosure="">
2323
{children}
2424
</div>
25-
</DisclosureContext.Provider>
25+
</DisclosureContext>
2626
)
2727
}
2828

2929
export const DisclosureButton = React.forwardRef(
3030
({ children, onClick, ...props }, forwardedRef) => {
31-
const { isOpen, panelId, onSelect } = useContext(DisclosureContext)
31+
const { isOpen, panelId, onSelect } = use(DisclosureContext)
3232

3333
return (
3434
<button
@@ -49,7 +49,7 @@ export const DisclosureButton = React.forwardRef(
4949
DisclosureButton.displayName = 'DisclosureButton'
5050

5151
export const DisclosurePanel = React.forwardRef(({ children, ...props }, forwardedRef) => {
52-
const { isOpen, panelId } = useContext(DisclosureContext)
52+
const { isOpen, panelId } = use(DisclosureContext)
5353

5454
return (
5555
<div

‎react/advanced-compound-components/02-context-and-events/practice/Disclosure.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useId, useContext, createContext } from 'react'
1+
import React, { useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
export function Disclosure({ children, defaultOpen = false, ...props }) {

‎react/advanced-compound-components/02-context-and-events/practice/GUIDE.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const context = {
1010
/* Put the props that we were passing down with cloneElement here instead */
1111
}
1212

13-
<DisclosureContext.Provider children={children} value={context} />
13+
<DisclosureContext children={children} value={context} />
1414
```
1515

1616
## Task Two: Add an `onChange` to `Disclosure`

‎react/advanced-compound-components/03-controlled-components/lecture/Accordion.final.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState, useId, useContext, createContext } from 'react'
1+
import React, { useRef, useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
const AccordionContext = createContext()
@@ -36,7 +36,7 @@ export const Accordion = React.forwardRef(
3636
}
3737
},
3838
}
39-
return <AccordionContext.Provider value={context} children={child} />
39+
return <AccordionContext value={context} children={child} />
4040
})
4141

4242
function onKeyDown(event) {
@@ -80,7 +80,7 @@ Accordion.displayName = 'Accordion'
8080
*/
8181

8282
export const AccordionItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
83-
const { selected } = useContext(AccordionContext)
83+
const { selected } = use(AccordionContext)
8484

8585
return (
8686
<div
@@ -101,7 +101,7 @@ AccordionItem.displayName = 'AccordionItem'
101101
*/
102102

103103
export const AccordionButton = React.forwardRef(({ children, onClick, ...props }, forwardedRef) => {
104-
const { buttonId, panelId, selected, selectPanel } = useContext(AccordionContext)
104+
const { buttonId, panelId, selected, selectPanel } = use(AccordionContext)
105105

106106
return (
107107
<button
@@ -126,7 +126,7 @@ AccordionButton.displayName = 'AccordionButton'
126126
*/
127127

128128
export const AccordionPanel = React.forwardRef(({ children, ...props }, forwardedRef) => {
129-
const { buttonId, panelId, selected } = useContext(AccordionContext)
129+
const { buttonId, panelId, selected } = use(AccordionContext)
130130

131131
return (
132132
<div

‎react/advanced-compound-components/03-controlled-components/lecture/Accordion.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useId, useContext, createContext } from 'react'
1+
import React, { useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
const AccordionContext = createContext()
@@ -25,7 +25,7 @@ export const Accordion = React.forwardRef(
2525
setSelectedIndex(index)
2626
},
2727
}
28-
return <AccordionContext.Provider value={context} children={child} />
28+
return <AccordionContext value={context} children={child} />
2929
})
3030

3131
function onKeyDown(event) {
@@ -63,7 +63,7 @@ Accordion.displayName = 'Accordion'
6363
*/
6464

6565
export const AccordionItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
66-
const { selected } = useContext(AccordionContext)
66+
const { selected } = use(AccordionContext)
6767

6868
return (
6969
<div
@@ -84,7 +84,7 @@ AccordionItem.displayName = 'AccordionItem'
8484
*/
8585

8686
export const AccordionButton = React.forwardRef(({ children, onClick, ...props }, forwardedRef) => {
87-
const { buttonId, panelId, selected, selectPanel } = useContext(AccordionContext)
87+
const { buttonId, panelId, selected, selectPanel } = use(AccordionContext)
8888

8989
return (
9090
<button
@@ -109,7 +109,7 @@ AccordionButton.displayName = 'AccordionButton'
109109
*/
110110

111111
export const AccordionPanel = React.forwardRef(({ children, ...props }, forwardedRef) => {
112-
const { buttonId, panelId, selected } = useContext(AccordionContext)
112+
const { buttonId, panelId, selected } = use(AccordionContext)
113113

114114
return (
115115
<div

‎react/advanced-compound-components/03-controlled-components/practice/Disclosure.final.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState, useId, useContext, createContext } from 'react'
1+
import React, { useRef, useState, useId, use, createContext } from 'react'
22
import { wrapEvent } from '../../utils'
33

44
const DisclosureContext = createContext()
@@ -37,17 +37,17 @@ export function Disclosure({
3737
}
3838

3939
return (
40-
<DisclosureContext.Provider value={context}>
40+
<DisclosureContext value={context}>
4141
<div {...props} data-disclosure="">
4242
{children}
4343
</div>
44-
</DisclosureContext.Provider>
44+
</DisclosureContext>
4545
)
4646
}
4747

4848
export const DisclosureButton = React.forwardRef(
4949
({ children, onClick, ...props }, forwardedRef) => {
50-
const { isOpen, panelId, onSelect } = useContext(DisclosureContext)
50+
const { isOpen, panelId, onSelect } = use(DisclosureContext)
5151

5252
return (
5353
<button
@@ -68,7 +68,7 @@ export const DisclosureButton = React.forwardRef(
6868
DisclosureButton.displayName = 'DisclosureButton'
6969

7070
export const DisclosurePanel = React.forwardRef(({ children, ...props }, forwardedRef) => {
71-
const { isOpen, panelId } = useContext(DisclosureContext)
71+
const { isOpen, panelId } = use(DisclosureContext)
7272

7373
return (
7474
<div

0 commit comments

Comments
 (0)