From fdad54db4c16633ef3b0a896047037d3585e8aab Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Oct 2023 11:06:26 -0700 Subject: [PATCH 1/7] Explain limitations of useSyncExternalStore with concurrency (#6339) * Explain limitations of useSyncExternalStore with concurrency Doesn't seem like we have this noted anywhere. * Pull out example to code block --- .../reference/react/useSyncExternalStore.md | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index 4169e231e..955b751f8 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -57,6 +57,26 @@ The current snapshot of the store which you can use in your rendering logic. * If a different `subscribe` function is passed during a re-render, React will re-subscribe to the store using the newly passed `subscribe` function. You can prevent this by declaring `subscribe` outside the component. +* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the transition update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store. + +* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be [marked as non-blocking transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX. + + For example, the following are discouraged: + + ```js + const LazyProductDetailPage = lazy(() => import('./ProductDetailPage.js')); + + function ShoppingApp() { + const selectedProductId = useSyncExternalStore(...); + + // ❌ Calling `use` with a Promise dependent on `selectedProductId` + const data = use(fetchItem(selectedProductId)) + + // ❌ Conditionally rendering a lazy component based on `selectedProductId` + return selectedProductId != null ? : ; + } + ``` + --- ## Usage {/*usage*/} @@ -425,4 +445,4 @@ function ChatIndicator({ userId }) { // ... } -``` \ No newline at end of file +``` From 88af66dbd1243594ad983e8463f9785c6e0a1450 Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Oct 2023 11:23:04 -0700 Subject: [PATCH 2/7] Fix comma splice --- .../reference/react/experimental_taintObjectReference.md | 2 +- src/content/reference/react/experimental_taintUniqueValue.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/experimental_taintObjectReference.md b/src/content/reference/react/experimental_taintObjectReference.md index ce91c3d0c..e3fd35a48 100644 --- a/src/content/reference/react/experimental_taintObjectReference.md +++ b/src/content/reference/react/experimental_taintObjectReference.md @@ -68,7 +68,7 @@ experimental_taintObjectReference( -**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. +**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md index eab73df5b..a67eebf77 100644 --- a/src/content/reference/react/experimental_taintUniqueValue.md +++ b/src/content/reference/react/experimental_taintUniqueValue.md @@ -130,7 +130,7 @@ In this example, the constant `password` is tainted. Then `password` is used to Other similar ways of deriving new values from tainted values like concatenating it into a larger string, converting it to base64, or returning a substring create untained values. -Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection, a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. +Tainting only protects against simple mistakes like explictly passing secret values to the client. Mistakes in calling the `taintUniqueValue` like using a global store outside of React, without the corresponding lifetime object, can cause the tainted value to become untainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns. From f2c45ea17f60285316055e3dfe339f473f8ca85b Mon Sep 17 00:00:00 2001 From: Sophie Alpert Date: Mon, 9 Oct 2023 11:57:24 -0700 Subject: [PATCH 3/7] Add labs icon to experimental APIs (#6346) --- src/sidebarReference.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/sidebarReference.json b/src/sidebarReference.json index d1de30620..f9049956f 100644 --- a/src/sidebarReference.json +++ b/src/sidebarReference.json @@ -130,11 +130,13 @@ }, { "title": "experimental_taintObjectReference", - "path": "/reference/react/experimental_taintObjectReference" + "path": "/reference/react/experimental_taintObjectReference", + "canary": true }, { "title": "experimental_taintUniqueValue", - "path": "/reference/react/experimental_taintUniqueValue" + "path": "/reference/react/experimental_taintUniqueValue", + "canary": true } ] }, From 43f4702f7897fa824833435107b68b7d7acf5203 Mon Sep 17 00:00:00 2001 From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com> Date: Tue, 10 Oct 2023 18:19:58 -0700 Subject: [PATCH 4/7] Fix typo in typescript.md (#6347) --- src/content/learn/typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 56fa5be5b..727974b1c 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -284,7 +284,7 @@ export default App = AppTSX; -This technique works when you have an default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. +This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. This causes the issue that you need to eliminate the `| null` in the type for context consumers. Our recommendation is to have the hook do a runtime check for it's existence and throw an error when not present: @@ -460,4 +460,4 @@ We recommend the following resources: - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) is a community-maintained cheatsheet for using TypeScript with React, covering a lot of useful edge cases and providing more breadth than this document. - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. \ No newline at end of file + - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. From 900a6693ef20cbcb59430fa45b7cc079735d0522 Mon Sep 17 00:00:00 2001 From: Rogin Farrer Date: Tue, 10 Oct 2023 18:50:12 -0700 Subject: [PATCH 5/7] Upgrade react-collapsed (#5893) * Upgrade react-collapsed * 4.0.4 --------- Co-authored-by: Rogin Farrer --- package.json | 2 +- .../Layout/Sidebar/SidebarRouteTree.tsx | 2 +- yarn.lock | 21 ++++--------------- 3 files changed, 6 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 5ff6adbab..472ef79c9 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", "react": "^0.0.0-experimental-16d053d59-20230506", - "react-collapsed": "npm:@gaearon/react-collapsed@3.1.0-forked.1", + "react-collapsed": "4.0.4", "react-dom": "^0.0.0-experimental-16d053d59-20230506", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 9a0dd23f5..a9fa575b5 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react'; import cn from 'classnames'; import {useRouter} from 'next/router'; import {SidebarLink} from './SidebarLink'; -import useCollapse from 'react-collapsed'; +import {useCollapse} from 'react-collapsed'; import usePendingRoute from 'hooks/usePendingRoute'; import type {RouteItem} from 'components/Layout/getRouteMeta'; diff --git a/yarn.lock b/yarn.lock index 5819fa4fa..8a3183cd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4797,11 +4797,6 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -performance-now@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" - integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= - periscopic@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.0.4.tgz#b3fbed0d1bc844976b977173ca2cd4a0ef4fa8d1" @@ -5284,13 +5279,6 @@ queue-microtask@^1.2.2: resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A== -raf@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39" - integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA== - dependencies: - performance-now "^2.1.0" - range-parser@~1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" @@ -5306,12 +5294,11 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" -"react-collapsed@npm:@gaearon/react-collapsed@3.1.0-forked.1": - version "3.1.0-forked.1" - resolved "https://registry.yarnpkg.com/@gaearon/react-collapsed/-/react-collapsed-3.1.0-forked.1.tgz#b287b81fc2af2971d7d7b523dc40b6cf116822ac" - integrity sha512-QkW55Upl4eeOtnDMOxasafDtDwaF+DpYKvHq8KZoNz9P477iUH8Ik1YFYuqtI7UA8mHm1/z66LD678dZCXwEEg== +react-collapsed@4.0.4: + version "4.0.4" + resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-4.0.4.tgz#4c6bce3a15286d43e95b6730ad70ec387a54caa9" + integrity sha512-8avvmnQxDYTgGZYVP9+3Z7doomxVEBoCkukpTmUHEIrAYvELZ5jNNfYCt/hCpHB6GmQbzZoDmnDupjsnQVgcCQ== dependencies: - raf "^3.4.1" tiny-warning "^1.0.3" react-devtools-inline@4.4.0: From e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 Mon Sep 17 00:00:00 2001 From: Soichiro Miki Date: Fri, 13 Oct 2023 20:21:15 +0900 Subject: [PATCH 6/7] Add 'ja' to deployedTranslations (#6351) --- src/components/Seo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index d0dcaab75..79f19f87c 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -22,6 +22,7 @@ const deployedTranslations = [ 'zh-hans', 'es', 'fr', + 'ja', // We'll add more languages when they have enough content. // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo. // It must be the same between all translations. From f251cbb03d90ecee1d9fd5b7511ed219f67c78f5 Mon Sep 17 00:00:00 2001 From: Miro Rauhala <4082806+mirorauhala@users.noreply.github.com> Date: Tue, 4 Feb 2025 17:32:25 +0200 Subject: [PATCH 7/7] fix merge issues --- .../learn/referencing-values-with-refs.md | 6 +----- src/content/learn/rendering-lists.md | 6 +----- .../learn/start-a-new-react-project.md | 21 +++---------------- src/content/learn/tutorial-tic-tac-toe.md | 8 ++----- src/content/learn/typescript.md | 8 ------- 5 files changed, 7 insertions(+), 42 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index fe2fe403d..8d85fe0b8 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -284,11 +284,7 @@ Sinun ei myöskään tarvitse huolehtia [mutaatioiden välttämistä](/learn/upd ## Ref ja DOM {/*refs-and-the-dom*/} -<<<<<<< HEAD -Voit osoittaa refin mihin tahansa arvoon. Kuitenkin yleisin käyttökohde refille on DOM elementin käsittely. Esimerkiksi, tämä on kätevää jos haluat focusoida syöttölaatikon ohjelmakoodissa. Kun annat refin `ref`-attribuuttiin JSX:ssä, kuten `
`, React asettaa vastaavan DOM elementin `myRef.current`:iin. Voit lukea lisää tästä [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) -======= -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 +Voit osoittaa refin mihin tahansa arvoon. Kuitenkin yleisin käyttökohde refille on DOM elementin käsittely. Esimerkiksi, tämä on kätevää jos haluat focusoida syöttölaatikon ohjelmakoodissa. Kun annat refin `ref`-attribuuttiin JSX:ssä, kuten `
`, React asettaa vastaavan DOM elementin `myRef.current`:iin. Kun elementti poistetaan DOM:sta, React päivittää `myRef.current` arvoksi `null`. Voit lukea lisää tästä [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) diff --git a/src/content/learn/rendering-lists.md b/src/content/learn/rendering-lists.md index bb4bee1d5..404052718 100644 --- a/src/content/learn/rendering-lists.md +++ b/src/content/learn/rendering-lists.md @@ -1086,11 +1086,7 @@ Tässä `` on lyhytsyntaksi joka "välitt #### Listat erottimella {/*list-with-a-separator*/} -<<<<<<< HEAD -Tämä esimerkki renderöi kuuluisan Katsushika Hokusain haikun, jokaisen rivin ollessa kääritty `

` tagin sisään. Tehtäväsi on sijoittaa `

` erotin jokaisen kappaleen jälkeen. Lopputuloksen rakennelman pitäisi näyttää tältä: -======= -This example renders a famous haiku by Tachibana Hokushi, with each line wrapped in a `

` tag. Your job is to insert an `

` separator between each paragraph. Your resulting structure should look like this: ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 +Tämä esimerkki renderöi kuuluisan Tachibana Hokushin haikun, jokaisen rivin ollessa kääritty `

` tagin sisään. Tehtäväsi on sijoittaa `

` erotin jokaisen kappaleen jälkeen. Lopputuloksen rakennelman pitäisi näyttää tältä: ```js
diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index a9a5b6568..0ce75d313 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -26,11 +26,7 @@ npx create-next-app@latest Jos olet uusi Next.js:ään, tutustu [Next.js tutoriaaliin.](https://nextjs.org/learn/foundations/about-nextjs) -<<<<<<< HEAD -Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/deployment) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. [Täysin staattiset Next.js-sovellukset](https://nextjs.org/docs/advanced-features/static-html-export) voidaan julkaista missö tahansa staattisessa hosting-ympäristössä. -======= -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports a [static export](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) which doesn't require a server. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 +Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/app/building-your-application/deploying) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös [staattista exporttia](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) joka ei edellytä palvelinta. ### Remix {/*remix*/} @@ -93,20 +89,9 @@ Nämä ominaisuudet ovat lähempänä tuotantokäyttöä joka päivä, ja olemme ### Next.js (App Router) {/*nextjs-app-router*/} -<<<<<<< HEAD -**[Next.js's App Router](https://beta.nextjs.org/docs/getting-started) on Next.js:n API:en uudelleensuunnittelu, joka tähtää React-tiimin full-stack arkkitehtuurin visioon.** Se antaa sinun hakea dataa asynkronisissa komponenteissa, jotka suoritetaan palvelimella tai jopa rakennusaikana. +**[Next.js's App Router](https://nextjs.org/docs) on Next.js:n API:en uudelleensuunnittelu, joka tähtää React-tiimin full-stack arkkitehtuurin visioon.** Se antaa sinun hakea dataa asynkronisissa komponenteissa, jotka suoritetaan palvelimella tai jopa rakennusaikana. -Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/deployment) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös [staattista vientiä](https://nextjs.org/docs/advanced-features/static-html-export), joka ei vaadi palvelinta. - - -**Next.js:n App Router on tällä hetkellä beta-vaiheessa eikä sitä vielä suositella tuotantokäyttöön** (maaliskuussa 2023). Kokeillaksesi sitä olemassa olevassa Next.js-projektissa, [seuraa tätä ohjeistusta](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app). - - -======= -**[Next.js's App Router](https://nextjs.org/docs) is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build. - -Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any Node.js or serverless hosting, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 +Next.js:ää ylläpitää [Vercel](https://vercel.com/). Voit [julkaista Next.js-sovelluksen](https://nextjs.org/docs/app/building-your-application/deploying) mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös [staattista exporttia](https://nextjs.org/docs/app/building-your-application/deploying/static-exports), joka ei vaadi palvelinta. diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 993cea0e6..c587b9b19 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -2075,17 +2075,13 @@ export default function Game() { } ``` -<<<<<<< HEAD -Voit nähdä miltä koodisi tulisi näyttää alla. Huomaa, että sinun tulisi nähdä virhe kehittäjätyökalujen konsolissa, joka sanoo: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` Korjaat tämän virheen seuraavassa osiossa. -======= -You can see what your code should look like below. Note that you should see an error in the developer tools console that says: +Voit nähdä miltä koodisi tulisi näyttää alla. Huomaa, että sinun tulisi nähdä virhe kehittäjätyökalujen konsolissa, jossa lukee: Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`. -You'll fix this error in the next section. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 +Korjaat tämän virheen seuraavassa osiossa. diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 241c8afcc..116773a9b 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -284,11 +284,7 @@ export default App = AppTSX; -<<<<<<< HEAD Tämä tekniikka toimii kun sinulla on oletusarvo joka on järkevä - mutta on tapauksia jolloin sitä ei ole, ja näissä tapauksissa `null` voi tuntua järkevältä oletusarvolta. Kuitenkin, jotta tyyppijärjestelmä ymmärtäisi koodisi, sinun täytyy eksplisiittisesti asettaa `ContextShape | null` `createContext`:lle. -======= -This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4 Tämä aiheuttaa ongelman jossa sinun täytyy eliminoida `| null` tyyppi kontekstin kuluttajilta. Suosituksemme on että hookki tekee runtime tarkistuksen sen olemassaolosta ja heittää virheen kun sitä ei ole: @@ -464,8 +460,4 @@ Suosittelemme seuraavia resursseja: - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) on yhteisön ylläpitämä lunttilappu TypeScriptin käyttöön Reactin kanssa, kattaa paljon hyödyllisiä reunoja ja tarjoaa enemmän syvyyttä kuin tämä dokumentti. -<<<<<<< HEAD - [TypeScript Community Discord](https://discord.com/invite/typescript) on hyvä paikka kysyä kysymyksiä ja saada apua TypeScriptin ja Reactin ongelmiin. -======= - - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues. ->>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4