diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index 1e086b9b..fcac3773 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -6,8 +6,11 @@ on: types: - completed -permissions: {} - +permissions: + contents: read + issues: write + pull-requests: write + jobs: comment: runs-on: ubuntu-latest diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 83f5fa4f..22b75016 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1172,7 +1172,7 @@ async function Talks({ confId }) { } right={ - + - + } /> ); diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ec3a6eba..c3224e51 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -82,11 +82,9 @@ export function Page({ 'max-w-7xl mx-auto', section === 'blog' && 'lg:flex lg:flex-col lg:items-center' )}> - - - {children} - - + + {children} + {!isBlogIndex && (
- + logo by @sawaratsuki1004 )); return ( - +
{sequential ? (
    @@ -369,7 +369,7 @@ function IllustrationBlock({ )}
- + ); } diff --git a/src/content/blog/2024/12/05/react-19.md b/src/content/blog/2024/12/05/react-19.md index aac80a44..65bf4275 100644 --- a/src/content/blog/2024/12/05/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish -`refs` passed to classes are not passed as props since they reference the component instance. +`ref`s passed to classes are not passed as props since they reference the component instance. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index a2bcd196..a97f3d5b 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland. [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +### React Alicante 2025 {/*react-alicante-2025*/} +October 2-4, 2025. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + ### React Conf 2025 {/*react-conf-2025*/} October 7-8, 2025. Henderson, Nevada, USA and free livestream diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index 81fc5c21..b4da5cdf 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) * [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) +* [Rajasthan](https://reactrajasthan.com) ## Indonesia {/*indonesia*/} * [Indonesia](https://www.meetup.com/reactindonesia/) diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index dd98addc..6c239209 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -176,7 +176,7 @@ function Cup({ guest }) { } export default function TeaGathering() { - let cups = []; + const cups = []; for (let i = 1; i <= 12; i++) { cups.push(); } @@ -246,7 +246,7 @@ export default function TeaGathering() { ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); if (hours >= 0 && hours <= 6) { document.getElementById('time').className = 'night'; } else { @@ -308,7 +308,7 @@ body > * { ```js src/Clock.js active export default function Clock({ time }) { - let hours = time.getHours(); + const hours = time.getHours(); let className; if (hours >= 0 && hours <= 6) { className = 'night'; @@ -607,14 +607,20 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "Гісторыя Анкіта" }, {id: 1, label: "Гісторыя Тэйлара" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Прадухіленне вечнага росту памяці падчас чытання дакументаў. // Тут мы парушаем свае ўласныя правілы. @@ -703,14 +709,20 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "Гісторыя Анкіта" }, {id: 1, label: "Гісторыя Тэйлара" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Прадухіленне вечнага росту памяці падчас чытання дакументаў. // Тут мы парушаем свае ўласныя правілы. @@ -770,8 +782,13 @@ li { ```js src/StoryTray.js active export default function StoryTray({ stories }) { +<<<<<<< HEAD // Скапіруйце масіў! let storiesToDisplay = stories.slice(); +======= + // Copy the array! + const storiesToDisplay = stories.slice(); +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 // Не ўплывае на зыходны масіў: storiesToDisplay.push({ @@ -795,14 +812,20 @@ export default function StoryTray({ stories }) { import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; +<<<<<<< HEAD let initialStories = [ {id: 0, label: "Гісторыя Анкіта" }, {id: 1, label: "Гісторыя Тэйлара" }, +======= +const initialStories = [ + {id: 0, label: "Ankit's Story" }, + {id: 1, label: "Taylor's Story" }, +>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91 ]; export default function App() { - let [stories, setStories] = useState([...initialStories]) - let time = useTime(); + const [stories, setStories] = useState([...initialStories]) + const time = useTime(); // HACK: Прадухіленне вечнага росту памяці падчас чытання дакументаў. // Тут мы парушаем свае ўласныя правілы. diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 93bcc10f..ef7b76e0 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -741,9 +741,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -836,13 +836,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 4faf1878..fab6599f 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -464,7 +464,7 @@ export default function Toggle() { #### Fix debouncing {/*fix-debouncing*/} -In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost. diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md index c3da0c63..91fb6803 100644 --- a/src/content/learn/scaling-up-with-reducer-and-context.md +++ b/src/content/learn/scaling-up-with-reducer-and-context.md @@ -461,11 +461,11 @@ export default function TaskApp() { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); // ... return ( - - + + ... - - + + ); } ``` @@ -509,8 +509,8 @@ export default function TaskApp() { } return ( - - + +

Day off in Kyoto

- - + + ); } @@ -676,13 +676,13 @@ In the next step, you will remove prop passing. Now you don't need to pass the list of tasks or the event handlers down the tree: ```js {4-5} - - + +

Day off in Kyoto

- - + + ``` Instead, any component that needs the task list can read it from the `TaskContext`: @@ -730,13 +730,13 @@ export default function TaskApp() { ); return ( - - + +

Day off in Kyoto

- - + + ); } @@ -921,11 +921,11 @@ export function TasksProvider({ children }) { const [tasks, dispatch] = useReducer(tasksReducer, initialTasks); return ( - - + + {children} - - + + ); } ``` @@ -963,11 +963,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1174,11 +1174,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -1363,4 +1363,3 @@ As your app grows, you may have many context-reducer pairs like this. This is a - You can have many context-reducer pairs like this in your app. - diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 1cb6d6c0..22658667 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -260,9 +260,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -310,9 +310,9 @@ export default function MyApp() { const object = useMemo(() => ({ kind: "complex" }), []); return ( - + - + ) } diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index c04510f8..5717460d 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -240,7 +240,7 @@ export default function ModalContent({ onClose }) { It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way. -Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. +Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. diff --git a/src/content/reference/react-dom/static/prerender.md b/src/content/reference/react-dom/static/prerender.md index aac6d96b..4bbf6c35 100644 --- a/src/content/reference/react-dom/static/prerender.md +++ b/src/content/reference/react-dom/static/prerender.md @@ -68,7 +68,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to #### Caveats {/*caveats*/} -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. @@ -231,7 +231,7 @@ async function renderToString() { const {prelude} = await prerender(, { bootstrapScripts: ['/main.js'] }); - + const reader = prelude.getReader(); let content = ''; while (true) { @@ -317,7 +317,6 @@ Any Suspense boundaries with incomplete children will be included in the prelude ### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/} -The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. +The `prerender` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. To stream content as it loads, use a streaming server render API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). - \ No newline at end of file diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md index fb8073ef..cc99c52d 100644 --- a/src/content/reference/react-dom/static/prerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md @@ -69,7 +69,7 @@ On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to #### Caveats {/*caveats*/} -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the a nonce value in the prerender itself. +`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. @@ -95,7 +95,7 @@ app.use('/', async (request, response) => { const { prelude } = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'], }); - + response.setHeader('Content-Type', 'text/plain'); prelude.pipe(response); }); @@ -232,7 +232,7 @@ async function renderToString() { const {prelude} = await prerenderToNodeStream(, { bootstrapScripts: ['/main.js'] }); - + return new Promise((resolve, reject) => { let data = ''; prelude.on('data', chunk => { @@ -320,4 +320,3 @@ Any Suspense boundaries with incomplete children will be included in the prelude The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads. To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream). - diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 8e58af8f..09acbc7d 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1814,9 +1814,9 @@ function Form() { export default function MyApp() { return ( - +
- + ) } ``` @@ -1900,9 +1900,9 @@ function Form() { export default function MyApp() { return ( - + - + ) } ``` diff --git a/src/content/reference/react/apis.md b/src/content/reference/react/apis.md index cbab4a0e..6cb99090 100644 --- a/src/content/reference/react/apis.md +++ b/src/content/reference/react/apis.md @@ -11,7 +11,6 @@ In addition to [Hooks](/reference/react) and [Components](/reference/react/compo --- * [`createContext`](/reference/react/createContext) lets you define and provide context to the child components. Used with [`useContext`.](/reference/react/useContext) -* [`forwardRef`](/reference/react/forwardRef) lets your component expose a DOM node as a ref to the parent. Used with [`useRef`.](/reference/react/useRef) * [`lazy`](/reference/react/lazy) lets you defer loading a component's code until it's rendered for the first time. * [`memo`](/reference/react/memo) lets your component skip re-renders with same props. Used with [`useMemo`](/reference/react/useMemo) and [`useCallback`.](/reference/react/useCallback) * [`startTransition`](/reference/react/startTransition) lets you mark a state update as non-urgent. Similar to [`useTransition`.](/reference/react/useTransition) diff --git a/src/content/reference/react/cloneElement.md b/src/content/reference/react/cloneElement.md index 6bcea51b..4e29ff20 100644 --- a/src/content/reference/react/cloneElement.md +++ b/src/content/reference/react/cloneElement.md @@ -414,9 +414,9 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - + {renderItem(item)} - + ); })} ``` @@ -472,12 +472,12 @@ export default function List({ items, renderItem }) { {items.map((item, index) => { const isHighlighted = index === selectedIndex; return ( - {renderItem(item)} - + ); })}
diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 03b09f8a..2161fa63 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -38,14 +38,15 @@ const ThemeContext = createContext('light'); `createContext` returns a context object. -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: -* `SomeContext.Provider` lets you provide the context value to components. +* `SomeContext` lets you provide the context value to components. * `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` is a legacy way to provide the context value before React 19. --- -### `SomeContext.Provider` {/*provider*/} +### `SomeContext` Provider {/*provider*/} Wrap your components into a context provider to specify the value of this context for all components inside: @@ -54,13 +55,21 @@ function App() { const [theme, setTheme] = useState('light'); // ... return ( - + - + ); } ``` + + +Starting in React 19, you can render `` as a provider. + +In older versions of React, use ``. + + + #### Props {/*provider-props*/} * `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it. @@ -141,11 +150,11 @@ function App() { // ... return ( - - + + - - + + ); } ``` @@ -187,11 +196,11 @@ import { ThemeContext, AuthContext } from './Contexts.js'; function App() { // ... return ( - - + + - - + + ); } ``` @@ -214,4 +223,3 @@ const ThemeContext = createContext('light'); This value never changes. React only uses this value as a fallback if it can't find a matching provider above. To make context change over time, [add state and wrap components in a context provider.](/reference/react/useContext#updating-data-passed-via-context) - diff --git a/src/content/reference/react/legacy.md b/src/content/reference/react/legacy.md index b22a9c97..f4e3ebe2 100644 --- a/src/content/reference/react/legacy.md +++ b/src/content/reference/react/legacy.md @@ -30,6 +30,6 @@ These APIs were removed in React 19: * [`createFactory`](https://18.react.dev/reference/react/createFactory): use JSX instead. * Class Components: [`static contextTypes`](https://18.react.dev//reference/react/Component#static-contexttypes): use [`static contextType`](#static-contexttype) instead. * Class Components: [`static childContextTypes`](https://18.react.dev//reference/react/Component#static-childcontexttypes): use [`static contextType`](#static-contexttype) instead. -* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context.Provider`](/reference/react/createContext#provider) instead. +* Class Components: [`static getChildContext`](https://18.react.dev//reference/react/Component#getchildcontext): use [`Context`](/reference/react/createContext#provider) instead. * Class Components: [`static propTypes`](https://18.react.dev//reference/react/Component#static-proptypes): use a type system like [TypeScript](https://www.typescriptlang.org/) instead. * Class Components: [`this.refs`](https://18.react.dev//reference/react/Component#refs): use [`createRef`](/reference/react/createRef) instead. diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 26fa9ed9..01d6290f 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -226,12 +226,12 @@ export default function MyApp() { } return ( - + - + ); } diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 557a71ca..91e19c4b 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -74,9 +74,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -116,9 +116,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } diff --git a/src/content/reference/react/useContext.md b/src/content/reference/react/useContext.md index ce06e703..f69c49af 100644 --- a/src/content/reference/react/useContext.md +++ b/src/content/reference/react/useContext.md @@ -38,11 +38,11 @@ function MyComponent() { #### Returns {/*returns*/} -`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. +`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/reference/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. #### Caveats {/*caveats*/} -* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. +* `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. * React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/reference/react/memo) does not prevent the children receiving fresh context values. * If your build system produces duplicates modules in the output (which can happen with symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. @@ -70,9 +70,9 @@ To pass context to a `Button`, wrap it or one of its parent components into the ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { return ( - + - + ); } @@ -98,9 +98,9 @@ const ThemeContext = createContext(null); export default function MyApp() { return ( - + - + ) } @@ -183,14 +183,14 @@ Often, you'll want the context to change over time. To update context, combine i function MyPage() { const [theme, setTheme] = useState('dark'); return ( - + - + ); } ``` @@ -213,7 +213,7 @@ const ThemeContext = createContext(null); export default function MyApp() { const [theme, setTheme] = useState('light'); return ( - + - + ) } @@ -317,14 +317,14 @@ const CurrentUserContext = createContext(null); export default function MyApp() { const [currentUser, setCurrentUser] = useState(null); return ( - - + ); } @@ -411,8 +411,8 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); const [currentUser, setCurrentUser] = useState(null); return ( - - + Use dark mode - - + + ) } @@ -596,16 +596,16 @@ export default function MyApp() { function MyProviders({ children, theme, setTheme }) { const [currentUser, setCurrentUser] = useState(null); return ( - - + {children} - - + + ); } @@ -775,11 +775,11 @@ export function TasksProvider({ children }) { ); return ( - - + + {children} - - + + ); } @@ -978,9 +978,9 @@ export default function MyApp() { const [theme, setTheme] = useState('light'); return ( <> - + - + - +