Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

Sync with reactjs.org @ d4e42ab2 #239

Open
wants to merge 1,281 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
1281 commits
Select commit Hold shift + click to select a range
e0720af
[beta] Update CodeStep colors (#5089)
rickhanlonii Sep 23, 2022
59f0f98
[Beta] Tweak colors
gaearon Sep 23, 2022
4ff4d8f
Tweak the experimental notice
gaearon Sep 23, 2022
0826c79
Hide package.json where it is not relevant
gaearon Sep 23, 2022
bd0f7c0
[Beta] Use React versions from package.json (#5100)
gaearon Sep 23, 2022
d56aec2
[Beta] Remove inline useEvent impl (#5101)
gaearon Sep 23, 2022
26fc12c
[Beta] Remove linter TODOs (#5102)
gaearon Sep 24, 2022
4c37115
[Beta] Code style tweaks (#5104)
gaearon Sep 24, 2022
402581e
[Beta] Bump React/Next (#5105)
gaearon Sep 24, 2022
fcd0ca3
Revert "ts"
gaearon Sep 24, 2022
477bafa
Revert "useEvent"
gaearon Sep 24, 2022
372f852
[Beta] Next patch to fail on errors (#5106)
gaearon Sep 24, 2022
b59b64f
[Beta] Upgrade to MDX 2 (#5107)
gaearon Sep 24, 2022
e166848
Added RenderATL 2023 (#5108)
ThugDebugger Sep 24, 2022
2ad2bb3
Fix typo (#5111)
thomcleary Sep 25, 2022
6b4fe35
[Beta] Fully SSR CodeBlock (#5110)
gaearon Sep 25, 2022
c8bf6f8
[Beta] Fix CSS for long highlight lines
gaearon Sep 25, 2022
4f04184
[Beta] Optimize editor re-renders (#5113)
gaearon Sep 25, 2022
e3073b0
[Beta] Fix some CSS (#5114)
gaearon Sep 25, 2022
2a083f9
[Beta] Remove unused prop from context examples (#5117)
thomcleary Sep 26, 2022
1a69206
fix typo in useMemo() documentation [BETA] (#5119)
skromez Sep 26, 2022
ab8c1a4
Fix HTML and CSS highlighting
gaearon Sep 26, 2022
ed37a7d
[Beta] Disable runtime CSS-in-JS (#5122)
gaearon Sep 27, 2022
931fd96
[Beta] Exclude Markdown parser (#5123)
gaearon Sep 27, 2022
2805880
Remove bold from codestep
gaearon Sep 27, 2022
ea5810b
tweak landing copy
gaearon Sep 27, 2022
54e6276
[Beta] Fix header IDs (#5128)
gaearon Sep 28, 2022
8ae813f
[Beta] useEffect API (#5103)
gaearon Sep 29, 2022
edd2f4e
typo
gaearon Sep 29, 2022
f75d0e2
[Beta] Don't nest components (#5132)
gaearon Sep 29, 2022
004287e
grammar
gaearon Sep 29, 2022
9d7feb9
Tweak
gaearon Sep 29, 2022
d7761ed
Bump API to 70%
gaearon Sep 29, 2022
b6983c3
Fix lint
gaearon Sep 29, 2022
e30bfe8
[Beta] Add a survey (#5133)
gaearon Sep 29, 2022
fd81031
Point old site banner at Beta docs (#5134)
gaearon Sep 29, 2022
2e57382
Bolder CTA
gaearon Sep 29, 2022
3031668
Fix link
gaearon Sep 29, 2022
fbd8c82
Fix React Router 6.4+ link (#5135)
esvyridov Sep 29, 2022
35627be
Update my twitter name (#5141)
poteto Oct 1, 2022
664dd57
[Beta] Fix typos in 'Lifecycle of Reactive Effects' challenge descrip…
thomcleary Oct 2, 2022
45e3c1b
[Beta] Fixes for install instructions
gaearon Oct 3, 2022
3a9b0c8
[beta] fix: cleanup resize listener (#4847)
shanpriyan Oct 4, 2022
7de3a0b
[Beta] Added documentation for React.createFactory (#5120)
arati-1 Oct 4, 2022
1205097
[Beta] Add Alternatives to createFactory API (#5149)
gaearon Oct 4, 2022
88a2e53
fix typo
gaearon Oct 4, 2022
d9915ca
fix
gaearon Oct 4, 2022
8379534
[Beta] useId API (#5150)
gaearon Oct 4, 2022
b99298a
oops
gaearon Oct 4, 2022
7b0e3bd
[beta] Sandpack: fix package.json dependencies & remove cm-markdown d…
danilowoz Oct 4, 2022
440741d
[Beta] isValidElement API (#5152)
gaearon Oct 4, 2022
a224f9d
[Beta] Accurate MDX line numbers (#5153)
gaearon Oct 4, 2022
c741dd4
Fix
gaearon Oct 4, 2022
f24bc19
[Beta] createElement API (#5154)
gaearon Oct 5, 2022
6dcdaac
tweaks
gaearon Oct 5, 2022
fa30ccd
fix
gaearon Oct 5, 2022
9af5d8d
[Beta] useImperativeHandle API (#5157)
gaearon Oct 5, 2022
e6bc8db
[Beta] Remove some polyfills (#5158)
gaearon Oct 6, 2022
f3420fd
[beta] Sandpack: provide bare components and move styles (#5124)
danilowoz Oct 6, 2022
25d4589
[Beta] Prefetch CodeBlock (#5159)
gaearon Oct 6, 2022
3ac36ff
[Beta] Fix code styles (#5162)
gaearon Oct 7, 2022
06ab241
[Beta] Children API (#5163)
gaearon Oct 7, 2022
fba9eab
remove unused imports
gaearon Oct 7, 2022
9ccea25
[Beta] fix typo in 'Removing Effect Dependencies' (#5167)
thomcleary Oct 8, 2022
d07016a
[Beta] Rename Gotcha component to Pitfall (#5172)
alvarlagerlof Oct 9, 2022
8fe817e
[Beta] fix: gutter overlap with sandpack code on mobile (#5170)
shanpriyan Oct 16, 2022
641f20a
Scroll behavior (#5182)
AdnanOlarmmi Oct 17, 2022
ec6c673
fix: broken link for render-and-commt (#5184)
jukrb0x Oct 18, 2022
c69ff23
Revert "Scroll behavior (#5182)" (#5186)
gaearon Oct 18, 2022
30cafef
Fix 'queueing a series of state changes->updates' typo in beta docs (…
melissapthai Oct 18, 2022
415751c
[Beta] Remove superfluous IllustrationBlock title prop
gaearon Oct 18, 2022
0867cc1
[Beta] Show illustration credit on hover/tap (#5188)
gaearon Oct 18, 2022
e698f2f
[beta] broken links in updating-objects-in-state (#5190)
jukrb0x Oct 19, 2022
7e98d1f
fix(beta): removes debug console.log (#5189)
danecando Oct 19, 2022
d0a809a
[Beta] Note on Children vs children
gaearon Oct 19, 2022
36656af
[beta] Fix typo on apis/react-dom/render (#5191)
eps1lon Oct 19, 2022
d483aeb
[Beta] cloneElement API (#5194)
gaearon Oct 19, 2022
8a22e6e
[Beta] Sandpack bundler improvements (#5164)
danilowoz Oct 25, 2022
5d1cac5
Update 2022-03-08-react-18-upgrade-guide.md (#5208)
claidler Oct 26, 2022
8ab1291
[Beta] Sandpack: fix accessibility issue on Codeeditor (#5216)
danilowoz Oct 28, 2022
f4d42d6
[Beta] fix typo in apis/react/cloneElement (#5201)
SukkaW Oct 29, 2022
e21b37c
[Beta] Add missing dependencies (#5220)
holazz Oct 29, 2022
4df7cce
Fix broken links (#5225)
EzraBerendsen Oct 31, 2022
751a13f
Add github repo link in the footer (#5204)
arafatiqbal Oct 31, 2022
dee6aed
[Beta] fix useMemo API doc error. (#5224)
webpig Nov 1, 2022
fc7bd4d
Fix typo (#5222)
npentrel Nov 1, 2022
822330c
fix #5212 (#5213)
xnivaxhzne Nov 3, 2022
ec368f4
Update SandpackRoot.tsx (#5247)
danilowoz Nov 7, 2022
3915ef3
Add App.js Conf 2023 to the conferences page (#5248)
tsapeta Nov 7, 2022
27152d3
chore: move conf (#5249)
harish-sethuraman Nov 7, 2022
dc20245
Fix createContext href in React APIs (#5245)
AlekseiPopovDev Nov 8, 2022
40251d2
fix #5210 (#5211)
xnivaxhzne Nov 9, 2022
06ae637
Change footer link to React repo
gaearon Nov 11, 2022
3bba430
[Beta] Add missing styles to search box in modal (#5234)
zqianem Nov 13, 2022
bc39165
docs: Fix a broken link, add a missing quote (#5260)
aleksandr-kiliushin Nov 14, 2022
29b163a
Add "Meta Front-End Developer Professional Certificate" to Paid Cours…
hstarikov-coursera Nov 14, 2022
dd52cdd
[Beta] Remove remaining use of embed: scheme (#5265)
gaearon Nov 14, 2022
9d5d1e2
Update with correct index (#5266)
arafatiqbal Nov 15, 2022
eceab8f
[Beta] Fix toc overflow (#5267)
gaearon Nov 15, 2022
c581381
[Beta] React.Component API (#5196)
gaearon Nov 15, 2022
15e5bac
[Beta] Update text with cloneElement (#5268)
dhavall08 Nov 15, 2022
d2bf257
Clarify example
gaearon Nov 16, 2022
b44e18e
Add note about getSnapshotBeforeUpdate
gaearon Nov 16, 2022
081b568
[Beta] createRef API (#5270)
gaearon Nov 16, 2022
501de4a
[Beta] PureComponent API (#5271)
gaearon Nov 16, 2022
5e5eb21
[Beta] useDebugValue API (#5272)
gaearon Nov 16, 2022
543db5b
Fix title
gaearon Nov 16, 2022
28f30b4
Fix typo
gaearon Nov 16, 2022
1503e6b
[Beta] Fix Defining frameId in useAnimationLoop (#5277)
madany01 Nov 18, 2022
e50e563
Added undefined to in the list of possible return types of render fun…
kunxl-gg Nov 18, 2022
2896038
[Beta] Remove nav fadein
gaearon Nov 21, 2022
c19a34b
Fix typo in bookmark (#5279)
uthbees Nov 22, 2022
2381149
chore: its -> it is, to 1 line (#5292)
marcelrsoub Nov 25, 2022
5beee0a
fix: Use relative LICENSE-DOCS path in README (#5294)
andrewbrennanfr Nov 25, 2022
1a641bb
[Beta] Revamp navigation (#5287)
gaearon Nov 25, 2022
b562a4f
Rename breadcrumb
gaearon Nov 28, 2022
eef0910
Rename
gaearon Nov 28, 2022
a05c1d9
Add ReactNext 2023 (#5300)
adamkleingit Nov 29, 2022
f35d831
Fix key error (#5302)
rickhanlonii Nov 29, 2022
ed20748
[Beta] Rewrite Suspense API, add useDeferredValue API (#5308)
gaearon Dec 1, 2022
2128e1e
Update the link to the Node.js stream module (#5298)
xfq Dec 2, 2022
b3b6edd
[Beta] Add deps to useEffect example
gaearon Dec 2, 2022
2e7b147
Update acdlite picture (#5313)
acdlite Dec 2, 2022
cb9854a
[Beta] Add link anchor for ExpandableExample (Deep Dive) (#5310)
ibarapascal Dec 2, 2022
5414129
[Beta] Update the bundler (#5319)
gaearon Dec 5, 2022
e162995
[Beta] useTransition API (#5311)
gaearon Dec 6, 2022
2246611
fix: correct order of future conference dates content (#5307)
techieeliot Dec 6, 2022
640f42e
[Beta] useSyncExternalStore API (#5325)
gaearon Dec 7, 2022
2e539fa
[Beta] Anchor for individual challenges & deepdive (#5318)
ibarapascal Dec 7, 2022
51f0d2d
[API] Legacy renderTo* SSR methods (#5326)
gaearon Dec 7, 2022
583f9a7
Add missing stub for Profiler
gaearon Dec 7, 2022
e342965
Consistency naming tweaks
gaearon Dec 8, 2022
47916ff
[Beta] Fix broken links
gaearon Dec 8, 2022
c086b13
[beta] Add unmountComponentAtNode (#5328)
rickhanlonii Dec 8, 2022
a08caba
[Beta] Docs Contributors page (#5330)
gaearon Dec 8, 2022
a234788
Update reusing-logic-with-custom-hooks.md (#5331)
zetaraku Dec 8, 2022
e544ae4
Update team pages (#5329)
josephsavona Dec 8, 2022
cc1687b
[Beta] Fix a word from useMemo to useCallback (#5334)
dhavall08 Dec 8, 2022
3bd9bed
[Beta] renderToPipeableStream API (#5339)
gaearon Dec 9, 2022
0e508cb
Typo
gaearon Dec 9, 2022
d1a3e17
Typo
gaearon Dec 9, 2022
e6587b3
edits
gaearon Dec 11, 2022
b2e8dbf
[Beta] renderToReadableStream API (#5346)
gaearon Dec 11, 2022
01ec244
fix typo (#5343)
shuding Dec 11, 2022
84efcd3
[Beta] Edits to hydrateRoot
gaearon Dec 11, 2022
c883f62
typo
gaearon Dec 11, 2022
8bf3b48
[Beta] startTransition API (#5354)
gaearon Dec 12, 2022
c68c36f
[Beta] Profiler API (#5355)
gaearon Dec 12, 2022
45b1068
[Beta] Fix some code blocks
gaearon Dec 12, 2022
6031b00
[beta] Fix Chai recipe in docs (#5342)
ashrene-roy Dec 12, 2022
cfa9498
Fix link to new URL (#5281)
castor4bit Dec 12, 2022
ca61341
[Beta] Fixed a dead link in useTransition.md (#5356)
mihail-8480 Dec 13, 2022
bad27d1
[beta] Add StrictMode docs (#5340)
rickhanlonii Dec 13, 2022
c2566a5
[beta] Add findDOMNode (#5357)
rickhanlonii Dec 14, 2022
9eca28f
Tweak header
gaearon Dec 14, 2022
5d65144
Tweaks
gaearon Dec 14, 2022
06d472d
[Beta] Fixed Semicolon missing in a code snippet. #5337 (#5360)
abhinandanwadwa Dec 14, 2022
3bb6d8c
[Beta] createPortal API (#5362)
gaearon Dec 14, 2022
596b50c
[Beta] Split "Components" and "APIs" (#5363)
gaearon Dec 14, 2022
7a9fe8d
Wording tweak
gaearon Dec 14, 2022
3d87a27
[Beta] useInsertionEffect API (#5364)
gaearon Dec 14, 2022
98bb99e
Fix typo
gaearon Dec 15, 2022
24a3e04
Fix typo
gaearon Dec 15, 2022
add83fa
[Beta] Highlight <Foo> and <foo> differently (#5368)
gaearon Dec 16, 2022
a7f4260
Fix typo (#5371)
mathmarqq Dec 16, 2022
a8db9c0
[Beta] useLayoutEffect API (#5372)
gaearon Dec 16, 2022
1aadd78
Fix copypasta
gaearon Dec 16, 2022
84a1085
More credits
gaearon Dec 16, 2022
119177b
[Beta] useEvent -> useEffectEvent (#5373)
gaearon Dec 16, 2022
d542994
Typo
gaearon Dec 16, 2022
c4d2a6d
[Beta] Reorder example
gaearon Dec 17, 2022
5385031
[Beta] Fix scroll jumps on navigating to fragments (#5375)
gaearon Dec 17, 2022
6faa4f5
Add missing patch for #5368
gaearon Dec 17, 2022
868d525
Update index.md
gaearon Dec 17, 2022
966b7b8
[Beta] Move search outside tabs (#5389)
gaearon Dec 20, 2022
ff22655
Adding a minor grammatical correction. (#5388)
rahulrao0209 Dec 23, 2022
39b9599
Remove stale RFC link
gaearon Dec 23, 2022
dc4d82b
Change 'options object' to 'createOptions function' (#5394)
rahulrao0209 Dec 24, 2022
89ad619
useTransition add semicolon (#5384)
2239559319 Dec 24, 2022
167603a
Making serverUrl a reactive dependency for the provided example. (#5392)
rahulrao0209 Dec 24, 2022
d981e00
[Beta] react-dom: Components (#5383)
gaearon Dec 24, 2022
e2a0f2e
[Beta] Remove TOC from short pages
gaearon Dec 24, 2022
81b5f81
[beta] Tic-tac-toe tutorial rewrite (#5352)
mattcarrollcode Dec 24, 2022
302fb7a
Bump the numbers
gaearon Dec 24, 2022
bd9f3ea
Typo
gaearon Dec 24, 2022
147bab9
[Beta] Move Reference before Usage (#5399)
gaearon Dec 25, 2022
c793076
[Beta] APIs -> Reference (#5400)
gaearon Dec 25, 2022
88e689e
Always link to Usage for consistency
gaearon Dec 25, 2022
3473846
Fix above/below
gaearon Dec 25, 2022
8d51b16
[Beta] Remove some duplicated banners
gaearon Dec 25, 2022
4b68508
[Beta] Misc edits
gaearon Dec 25, 2022
20252cb
fix(typos): some small typos (#5401)
pfongkye Dec 26, 2022
ddde7e8
[Beta] Sidebar groups (#5402)
gaearon Dec 26, 2022
45e4b52
Fixed property "value" typo'd as "values" (#5404)
Dec 27, 2022
2a3bcb6
Minor grammatical correction (#5406)
rahulrao0209 Dec 27, 2022
bcf7759
[Beta] Fixes typo in editor-setup page (#5413)
filipenevola Dec 28, 2022
afb7d7a
Fixes a typo (#5411)
acharyasaagar Dec 29, 2022
c7efb5c
Minor grammatical correction (#5407)
rahulrao0209 Dec 29, 2022
33c4d58
Fix 404 for json file (#5403)
domscript Dec 29, 2022
f741a42
Fix #5412
gaearon Dec 29, 2022
9cd0db0
fix(typo): add missing closing character (#5415)
pfongkye Dec 29, 2022
e77ba1e
[beta] Fix inconsistent anchor link on `flushSync` page (#5429)
eps1lon Jan 1, 2023
0eba7f6
Fix typo in tutorial-tic-tac-toe.md (#5436)
derrekcoleman Jan 5, 2023
46b5a69
Fix typo in tutorial-tic-tac-toe.md (#5438)
rijavecb Jan 5, 2023
e8a64f6
Fix link
gaearon Jan 5, 2023
eefa33a
Fix typo in tutorial
sophiebits Jan 5, 2023
44390cd
Fix for ReactDOM.createRoot() example (#5437)
chalder Jan 6, 2023
05bf01d
[Beta] Add missing imports to ref pages (#5442)
gaearon Jan 6, 2023
b4ae933
Add missing X in starter Square component (#5445)
SecondThundeR Jan 7, 2023
52b2d7d
Bump json5 from 1.0.1 to 1.0.2 in /beta (#5446)
dependabot[bot] Jan 8, 2023
3ff6fe8
Fix typos in Suspense.md, useDeferredValue.md & useTransition.md (#5450)
tryonelove Jan 8, 2023
1d918b9
fix link (#5449)
domscript Jan 9, 2023
ddd3c7e
typo
gaearon Jan 10, 2023
09f0da6
typo
gaearon Jan 10, 2023
cde02f8
Fix Typo (#5433)
BeLi4L Jan 10, 2023
905b367
Update poteto description (#5462)
poteto Jan 15, 2023
38bf76a
Update broken link in "Synchronizing with effects" (#5461)
kshyr Jan 15, 2023
c9e2e39
[Beta] Refactor navigation logic (#5492)
gaearon Jan 23, 2023
7425ccf
[Beta] Blog MVP (#5493)
gaearon Jan 24, 2023
a260e0e
[Beta] Community (#5494)
gaearon Jan 24, 2023
dd366ed
Rm dead redirects
gaearon Jan 24, 2023
dd213e4
[Beta] Port some warning pages
gaearon Jan 24, 2023
e71c47a
Mention custom components
gaearon Jan 24, 2023
60d2937
Rm unused
gaearon Jan 24, 2023
d9dd87c
Redirect .html paths to legacy site
gaearon Jan 24, 2023
405870f
Remove unused
gaearon Jan 24, 2023
7b57cb6
More redirects
gaearon Jan 24, 2023
7320882
[Beta] Mention error boundaries
gaearon Jan 24, 2023
3b0be4f
Link to beta in content (#5495)
gaearon Jan 24, 2023
ef41566
Formatting nit
gaearon Jan 24, 2023
5ef6955
Simplify wording
gaearon Jan 24, 2023
af255ea
[Beta] Add React to <title>
gaearon Jan 24, 2023
5b8126a
[Beta] Clean URLs for analytics
gaearon Jan 24, 2023
b8dcdf4
Fix some links
gaearon Jan 24, 2023
79f5007
Update tutorial-tic-tac-toe.md (#5458)
derrekcoleman Jan 24, 2023
1fd3538
[Beta] Simplify Immer installation guide (#5499)
chernodub Jan 25, 2023
e8917a0
[Beta] Responsive iframes (#5500)
gaearon Jan 25, 2023
affb77d
Fix typo on useSyncExternalStore page (#5503)
jingsu96 Jan 26, 2023
d4e063f
fix(typos): remove misplaced word (#5510)
vicsantizo Jan 27, 2023
114ad3e
fix(typos): place word in the correct place (#5507)
vicsantizo Jan 27, 2023
5647a94
docs(tutorial-tic-tac-toe.md): fix typos (#5515)
myfreespirit Jan 29, 2023
e354061
Fix typo
gaearon Jan 30, 2023
720b37f
Update reference Profiler.md (#5502)
hwanyoungChoi Jan 31, 2023
0300f8a
Fix typo, closes #5505
gaearon Jan 31, 2023
0da108f
Update conference lists for beta docs (#5529)
apherio Jan 31, 2023
b2aeca6
Announce react india 2023 conference dates (#5525)
apherio Jan 31, 2023
6fa4673
Update instructions to Babel 7
gaearon Feb 1, 2023
683db72
Added react nexus to the conference list (#5536)
akiran Feb 2, 2023
d4e42ab
Add missing word (#5537)
beau-house Feb 2, 2023
67e2d09
merging all conflicts
react-translations-bot Feb 6, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
[Beta] Add link anchor for ExpandableExample (Deep Dive) (#5310)
* [Beta] add link anchor for expandable example

* [Beta] Rewrite Suspense API, add useDeferredValue API (#5308)

* [Beta] Rewrite Suspense API

* edits

* more udv

* edits

* edit

* more ref

* extract

* Temporary remove use

* [Beta] deep dive title reuse existing mechanism

* [Beta] adjust deep dive MDX format

* [Beta] fix deep dive MDX format mismatch

* [Beta] optional chain the condition for ReactNode

* Update the link to the Node.js stream module (#5298)

Fix #5297.

* [Beta] Add deps to useEffect example

* [Beta] throw error if no title found in deepdive

* [Beta] fix throw error in tsx

* Update acdlite picture (#5313)

I kinda like this one more

* [Beta] add link anchor for expandable example

* [Beta] deep dive title reuse existing mechanism

* [Beta] adjust deep dive MDX format

* [Beta] fix deep dive MDX format mismatch

* [Beta] optional chain the condition for ReactNode

* [Beta] throw error if no title found in deepdive

* [Beta] fix throw error in tsx

* [Beta] adjust deep dive MDX format

Co-authored-by: Jiawei.Jing <[email protected]>
Co-authored-by: dan <[email protected]>
Co-authored-by: Fuqiao Xue <[email protected]>
Co-authored-by: Andrew Clark <[email protected]>
  • Loading branch information
5 people authored Dec 2, 2022
commit cb9854a54984ef1288a8a2b8754897b15e75f433
32 changes: 19 additions & 13 deletions beta/src/components/MDX/ExpandableExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,25 @@ import {IconChevron} from '../Icon/IconChevron';
import {IconDeepDive} from '../Icon/IconDeepDive';
import {IconCodeBlock} from '../Icon/IconCodeBlock';
import {Button} from '../Button';
import {H4} from './Heading';

interface ExpandableExampleProps {
children: React.ReactNode;
title: string;
excerpt?: string;
type: 'DeepDive' | 'Example';
}

function ExpandableExample({
children,
title,
excerpt,
type,
}: ExpandableExampleProps) {
function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
const [isExpanded, setIsExpanded] = React.useState(false);
const isDeepDive = type === 'DeepDive';
const isExample = type === 'Example';

if (!Array.isArray(children) || children[0].type.mdxName !== 'h4') {
throw Error(
`Expandable content ${type} is missing a corresponding title at the beginning`
);
}

return (
<details
open={isExpanded}
Expand All @@ -40,8 +41,11 @@ function ExpandableExample({
className="list-none p-8"
tabIndex={-1 /* there's a button instead */}
onClick={(e) => {
// We toggle using a button instead of this whole area.
e.preventDefault();
// We toggle using a button instead of this whole area,
// with an escape case for the header anchor link
if (!(e.target instanceof SVGElement)) {
e.preventDefault();
}
}}>
<h5
className={cn('mb-4 uppercase font-bold flex items-center text-sm', {
Expand All @@ -62,9 +66,11 @@ function ExpandableExample({
)}
</h5>
<div className="mb-4">
<h3 className="text-xl font-bold text-primary dark:text-primary-dark">
{title}
</h3>
<H4
id={children[0].props.id}
className="text-xl font-bold text-primary dark:text-primary-dark">
{children[0].props.children}
</H4>
{excerpt && <div>{excerpt}</div>}
</div>
<Button
Expand All @@ -87,7 +93,7 @@ function ExpandableExample({
'dark:border-purple-60 border-purple-10 ': isDeepDive,
'dark:border-yellow-60 border-yellow-50': isExample,
})}>
{children}
{children.slice(1)}
</div>
</details>
);
Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/Children.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ export default function RowList({ children }) {

</Sandpack>

<DeepDive title="Why is the children prop not always an array?">
<DeepDive>

#### Why is the children prop not always an array? {/*why-is-the-children-prop-not-always-an-array*/}

In React, the `children` prop is considered an *opaque* data structure. This means that you shouldn't rely on how it is structured. To transform, filter, or count children, you should use the `Children` methods.

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/Fragment.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ function PostBody({ body }) {

</Sandpack>

<DeepDive title="How to write a Fragment without the special syntax?">
<DeepDive>

#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}

The example above is equivalent to importing `Fragment` from React:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/createElement.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,9 @@ export default function App() {

Both coding styles are fine, so you can use whichever one you prefer for your project. The main benefit of using JSX compared to `createElement` is that it's easy to see which closing tag corresponds to which opening tag.

<DeepDive title="What is a React element, exactly?">
<DeepDive>

#### What is a React element, exactly? {/*what-is-a-react-element-exactly*/}

An element is a lightweight description of a piece of the user interface. For example, both `<Greeting name="Taylor" />` and `createElement(Greeting, { name: 'Taylor' })` produce an object like this:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/isValidElement.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ It is very uncommon to need `isValidElement`. It's mostly useful if you're calli

Unless you have some very specific reason to add an `isValidElement` check, you probably don't need it.

<DeepDive title="React elements vs React nodes">
<DeepDive>

#### React elements vs React nodes {/*react-elements-vs-react-nodes*/}

When you write a component, you can return any kind of *React node* from it:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/memo.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,9 @@ label {

</Note>

<DeepDive title="Should you add memo everywhere?">
<DeepDive>

#### Should you add memo everywhere? {/*should-you-add-memo-everywhere*/}

If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.

Expand Down
8 changes: 6 additions & 2 deletions beta/src/content/apis/react/useCallback.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,9 @@ function ProductPage({ productId, referrer, theme }) {

</Note>

<DeepDive title="How is useCallback related to useMemo?">
<DeepDive>

#### How is useCallback related to useMemo? {/*how-is-usecallback-related-to-usememo*/}

You will often see [`useMemo`](/apis/react/useMemo) alongside `useCallback`. They are both useful when you're trying to optimize a child component. They let you [memoize](https://en.wikipedia.org/wiki/Memoization) (or, in other words, cache) something you're passing down:

Expand Down Expand Up @@ -171,7 +173,9 @@ function useCallback(fn, dependencies) {

</DeepDive>

<DeepDive title="Should you add useCallback everywhere?">
<DeepDive>

#### Should you add useCallback everywhere? {/*should-you-add-usecallback-everywhere*/}

If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.

Expand Down
8 changes: 6 additions & 2 deletions beta/src/content/apis/react/useDeferredValue.md
Original file line number Diff line number Diff line change
Expand Up @@ -457,7 +457,9 @@ input { margin: 10px; }

</Sandpack>

<DeepDive title="How does deferring a value work under the hood?">
<DeepDive>

#### How does deferring a value work under the hood? {/*how-does-deferring-a-value-work-under-the-hood*/}

You can think of it as happening in two steps:

Expand Down Expand Up @@ -894,7 +896,9 @@ This optimization requires `SlowList` to be wrapped in [`memo`.](/apis/react/mem

</Pitfall>

<DeepDive title="How is deferring a value different from debouncing and throttling?">
<DeepDive>

#### How is deferring a value different from debouncing and throttling? {/*how-is-deferring-a-value-different-from-debouncing-and-throttling*/}

There are two common optimization techniques you might have used before in this scenario:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -979,7 +979,9 @@ export async function fetchBio(person) {

Writing data fetching directly in Effects gets repetitive and makes it difficult to add optimizations like caching and server rendering later. [It's easier to use a custom Hook--either your own or maintained by the community.](/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks)

<DeepDive title="What are good alternatives to data fetching in Effects?">
<DeepDive>

#### What are good alternatives to data fetching in Effects? {/*what-are-good-alternatives-to-data-fetching-in-effects*/}

Writing `fetch` calls inside Effects is a [popular way to fetch data](https://www.robinwieruch.de/react-hooks-fetch-data/), especially in fully client-side apps. This is, however, a very manual approach and it has significant downsides:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/useId.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,9 @@ input { margin: 5px; }

</Pitfall>

<DeepDive title="Why is useId better than an incrementing counter?">
<DeepDive>

#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}

You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.

Expand Down
12 changes: 9 additions & 3 deletions beta/src/content/apis/react/useMemo.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,9 @@ Usually, this isn't a problem because most calculations are very fast. However,

</Note>

<DeepDive title="How to tell if a calculation is expensive?">
<DeepDive>

#### How to tell if a calculation is expensive? {/*how-to-tell-if-a-calculation-is-expensive*/}

In general, unless you're creating or looping over thousands of objects, it's probably not expensive. If you want to get more confidence, you can add a console log to measure the time spent in a piece of code:

Expand Down Expand Up @@ -89,7 +91,9 @@ Also note that measuring performance in development will not give you the most a

</DeepDive>

<DeepDive title="Should you add useMemo everywhere?">
<DeepDive>

#### Should you add useMemo everywhere? {/*should-you-add-usememo-everywhere*/}

If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful.

Expand Down Expand Up @@ -559,7 +563,9 @@ export default function TodoList({ todos, tab, theme }) {

**By wrapping the `visibleTodos` calculation in `useMemo`, you ensure that it has the *same* value between the re-renders** (until dependencies change). You don't *have to* wrap a calculation in `useMemo` unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in [`memo`,](/apis/react/memo) and this lets it skip re-rendering. There are a few other reasons to add `useMemo` which are described further on this page.

<DeepDive title="Memoizing individual JSX nodes">
<DeepDive>

#### Memoizing individual JSX nodes {/*memoizing-individual-jsx-nodes*/}

Instead of wrapping `List` in [`memo`](/apis/react/memo), you could wrap the `<List />` JSX node itself in `useMemo`:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/useRef.md
Original file line number Diff line number Diff line change
Expand Up @@ -472,7 +472,9 @@ function Video() {

Normally, writing or reading `ref.current` during render is not allowed. However, it's fine in this case because the result is always the same, and the condition only executes during initialization so it's fully predictable.

<DeepDive title="How to avoid null checks when initializing useRef later">
<DeepDive>

#### How to avoid null checks when initializing useRef later {/*how-to-avoid-null-checks-when-initializing-use-ref-later*/}

If you use a type checker and don't want to always check for `null`, you can try a pattern like this instead:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/apis/react/useState.md
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,9 @@ By convention, it's common to name the pending state argument for the first lett

React may [call your updaters twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure)

<DeepDive title="Is using an updater always preferred?">
<DeepDive>

#### Is using an updater always preferred? {/*is-using-an-updater-always-preferred*/}

You might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There is no harm in it, but it is also not always necessary.

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/learn/add-react-to-a-website.md
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,9 @@ The tool you just used is called Babel, and you can learn more about it from [it

If you're getting comfortable with build tools and want them to do more for you, [we cover some of the most popular and approachable toolchains here.](/learn/start-a-new-react-project)

<DeepDive title="React without JSX">
<DeepDive>

#### React without JSX {/*react-without-jsx*/}

Originally JSX was introduced to make writing components with React feel as familiar as writing HTML. Since then, the syntax has become widespread. However, there may be instances where you do not want to use or cannot use JSX. You have two options:

Expand Down
8 changes: 6 additions & 2 deletions beta/src/content/learn/choosing-the-state-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,9 @@ const fullName = firstName + ' ' + lastName;

As a result, the change handlers don't need to do anything special to update it. When you call `setFirstName` or `setLastName`, you trigger a re-render, and then the next `fullName` will be calculated from the fresh data.

<DeepDive title="Don't mirror props in state">
<DeepDive>

#### Don't mirror props in state {/*don-t-mirror-props-in-state*/}

A common example of redundant state is code like this:

Expand Down Expand Up @@ -1474,7 +1476,9 @@ button { margin: 10px; }

You can nest state as much as you like, but making it "flat" can solve numerous problems. It makes state easier to update, and it helps ensure you don't have duplication in different parts of a nested object.

<DeepDive title="Improving memory usage">
<DeepDive>

#### Improving memory usage {/*improving-memory-usage*/}

Ideally, you would also remove the deleted items (and their children!) from the "table" object to improve memory usage. This version does that. It also [uses Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) to make the update logic more concise.

Expand Down
6 changes: 4 additions & 2 deletions beta/src/content/learn/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,9 @@ return (

You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.

<DeepDive title="Are these two examples fully equivalent?">
<DeepDive>

#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}

If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `<li>`. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.

Expand Down Expand Up @@ -761,4 +763,4 @@ export default function DrinkList() {

</Solution>

</Challenges>
</Challenges>
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,9 @@ If you're not yet comfortable with switch statements, using if/else is completel

</Note>

<DeepDive title="Why are reducers called this way?">
<DeepDive>

#### Why are reducers called this way? {/*why-are-reducers-called-this-way*/}

Although reducers can "reduce" the amount of code inside your component, they are actually named after the [`reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) operation that you can perform on arrays.

Expand Down
6 changes: 4 additions & 2 deletions beta/src/content/learn/importing-and-exporting-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former

</Note>

<DeepDive title="Default vs named exports">
<DeepDive>

#### Default vs named exports {/*default-vs-named-exports*/}

There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.**

Expand Down Expand Up @@ -413,4 +415,4 @@ img { margin: 0 10px 10px 0; height: 90px; }

</Solution>

</Challenges>
</Challenges>
8 changes: 6 additions & 2 deletions beta/src/content/learn/keeping-components-pure.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,9 @@ Now your component is pure, as the JSX it returns only depends on the `guest` pr

In general, you should not expect your components to be rendered in any particular order. It doesn't matter if you call <Math><MathI>y</MathI> = 2<MathI>x</MathI></Math> before or after <Math><MathI>y</MathI> = 5<MathI>x</MathI></Math>: both formulas will resolve independently of each other. In the same way, each component should only "think for itself", and not attempt to coordinate with or depend upon others during rendering. Rendering is like a school exam: each component should calculate JSX on their own!

<DeepDive title="Detecting impure calculations with StrictMode">
<DeepDive>

#### Detecting impure calculations with StrictMode {/*detecting-impure-calculations-with-strict-mode*/}

Although you might not have used them all yet, in React there are three kinds of inputs that you can read while rendering: [props](/learn/passing-props-to-a-component), [state](/learn/state-a-components-memory), and [context.](/learn/passing-data-deeply-with-context) You should always treat these inputs as read-only.

Expand Down Expand Up @@ -197,7 +199,9 @@ If you've exhausted all other options and can't find the right event handler for

When possible, try to express your logic with rendering alone. You'll be surprised how far this can take you!

<DeepDive title="Why does React care about purity?">
<DeepDive>

#### Why does React care about purity? {/*why-does-react-care-about-purity*/}

Writing pure functions takes some habit and discipline. But it also unlocks marvelous opportunities:

Expand Down
4 changes: 3 additions & 1 deletion beta/src/content/learn/lifecycle-of-reactive-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,9 @@ In this example, `serverUrl` is not a prop or a state variable. It's a regular v

In other words, Effects "react" to all values from the component body.

<DeepDive title="Can global or mutable values be dependencies?">
<DeepDive>

#### Can global or mutable values be dependencies? {/*can-global-or-mutable-values-be-dependencies*/}

Mutable values (including global variables) aren't reactive.

Expand Down
14 changes: 10 additions & 4 deletions beta/src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,9 @@ li {

</Sandpack>

<DeepDive title="How to manage a list of refs using a ref callback">
<DeepDive>

#### How to manage a list of refs using a ref callback {/*how-to-manage-a-list-of-refs-using-a-ref-callback*/}

In the above examples, there is a predefined number of refs. However, sometimes you might need a ref to each item in the list, and you don't know how many you will have. Something like this **wouldn't work**:

Expand Down Expand Up @@ -430,7 +432,9 @@ export default function Form() {

In design systems, it is a common pattern for low-level components like buttons, inputs, and so on, to forward their refs to their DOM nodes. On the other hand, high-level components like forms, lists, or page sections usually won't expose their DOM nodes to avoid accidental dependencies on the DOM structure.

<DeepDive title="Exposing a subset of the API with an imperative handle">
<DeepDive>

#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}

In the above example, `MyInput` exposes the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with `useImperativeHandle`:

Expand Down Expand Up @@ -491,7 +495,9 @@ React sets `ref.current` during the commit. Before updating the DOM, React sets

**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.

<DeepDive title="Flushing state updates synchronously with flushSync">
<DeepDive>

#### Flushing state updates synchronously with flushSync {/*flushing-state-updates-synchronously-with-flush-sync*/}

Consider code like this, which adds a new todo and scrolls the screen down to the last child of the list. Notice how, for some reason, it always scrolls to the todo that was *just before* the last added one:

Expand Down Expand Up @@ -1193,4 +1199,4 @@ button { display: block; margin-bottom: 10px; }

</Solution>

</Challenges>
</Challenges>
Loading