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‎

Lines changed: 0 additions & 1 deletion
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‎

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 5 additions & 5 deletions
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

0 commit comments

Comments
 (0)