Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 2b2d0f23 #570

Closed
wants to merge 30 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
13a73c1
Update the version 3 (#7161)
imparth7 Sep 16, 2024
505c85d
Update you-might-not-need-an-effect.md (#7169)
harish-sethuraman Sep 17, 2024
39abc60
Nit: server actions can't be passed events (#7175)
rickhanlonii Sep 19, 2024
c003ac4
Add stable fn notes to useMemo, useTransition, useState, and useReduc…
rickhanlonii Sep 22, 2024
e2f089d
Fix search results ranking and grouping (#7183)
rickhanlonii Sep 23, 2024
ec8f70f
rm insights prop to unbreak main
rickhanlonii Sep 23, 2024
8e6e81e
rm package-lock.json (#7184)
rickhanlonii Sep 23, 2024
8dba319
reactjsday-2024-Verona (#7171)
lxmarinkovic Sep 24, 2024
fe37c42
✨KOREAN(ko.react.dev) Translation Completed (#7185)
lumirlumir Sep 29, 2024
7e59348
Replace defunct placeKitten calls with loremFlicker and placeCat call…
pauljones0 Sep 30, 2024
a506983
chore(docs): fix typo (#7194)
bnzone Sep 30, 2024
8a62ce3
Add files via upload (#7182)
premdood Sep 30, 2024
ae9726a
Docs: Fix typos in thinking-in-react.md (#7179)
rammba Sep 30, 2024
6d2f337
Add React Native London Conf to the community conferences (#7173)
mojavad Sep 30, 2024
d418485
fix:#7158 issue (#7159)
imparth7 Sep 30, 2024
c7392cb
docs(act.md): correct ReactDOM to ReactDOMClient (#7156)
regchiu Sep 30, 2024
4436422
chore(typo): Fix comment to match code (#7147)
ssan93 Sep 30, 2024
7a8e256
Fix minor grammar issue in tutorial-tic-tac-toe.md (`a` to `an`) (#7136)
FarisPalayi Sep 30, 2024
4fe9c85
remove wrong reference of window (#7132)
youngvform Sep 30, 2024
8fee25f
Update renderToPipeableStream.md (#7131)
segmentationfaulter Sep 30, 2024
0f92834
fix: add missing blank lines between import statements and code block…
dev-satoshi Sep 30, 2024
ca2051f
fix: `@testing-library/react-native` links (#7124)
shubh73 Sep 30, 2024
d6df8eb
Add React Osaka to meetups (#7100)
martinheidegger Sep 30, 2024
d5aaa72
doc: Add missing return statement (#7081)
cst9221 Sep 30, 2024
589a1d3
doc: fix typo in updating-objects-in-state.md (#7077)
Rekl0w Sep 30, 2024
56b3832
Use correct link for translations progress site (#7199)
rammba Oct 1, 2024
1697ae8
fix: remove broken links in community/meetups (#7205)
juliogarciape Oct 3, 2024
bb38630
Add react-compiler-runtime instructions to compiler docs (#7213)
poteto Oct 7, 2024
2b2d0f2
`useActionState` pending example (#6989)
JakeSaterlay Oct 8, 2024
0c71121
merging all conflicts
react-translations-bot Oct 14, 2024
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
12 changes: 6 additions & 6 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ jobs:
analyze:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3

- name: Set up node
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: '20.x'

- name: Install dependencies
uses: bahmutov/[email protected]

- name: Restore next build
uses: actions/cache@v2
uses: actions/cache@v3
id: restore-build-cache
env:
cache-name: cache-next-build
Expand All @@ -41,7 +41,7 @@ jobs:
run: npx -p [email protected] report

- name: Upload bundle
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
Expand Down Expand Up @@ -73,7 +73,7 @@ jobs:
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare

- name: Upload analysis comment
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
Expand All @@ -82,7 +82,7 @@ jobs:
run: echo ${{ github.event.number }} > ./pr_number

- name: Upload PR number
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: pr_number
path: ./pr_number
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@docsearch/css": "^3.6.1",
"@docsearch/react": "^3.6.1",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
Expand Down
2 changes: 1 addition & 1 deletion src/components/MDX/Sandpack/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export function Preview({
/**
* The spinner component transition might be longer than
* the bundler loading, so we only show the spinner if
* it takes more than 1s to load the bundler.
* it takes more than 500s to load the bundler.
*/
timeout = setTimeout(() => {
setShowLoading(true);
Expand Down
12 changes: 11 additions & 1 deletion src/components/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,17 @@ export function Search({
onOpen,
onClose,
searchParameters = {
hitsPerPage: 5,
hitsPerPage: 30,
attributesToHighlight: [
'hierarchy.lvl0',
'hierarchy.lvl1',
'hierarchy.lvl2',
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
'hierarchy.lvl6',
'content',
],
},
}: SearchProps) {
useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2024/04/25/react-19-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@ npm install react-shallow-renderer --save-dev

##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/}

Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started).
Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro).

</Note>

Expand Down Expand Up @@ -524,7 +524,7 @@ We are deprecating `react-test-renderer` because it implements its own renderer

The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead.

In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience.
In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience.

## Notable changes {/*notable-changes*/}

Expand Down
2 changes: 1 addition & 1 deletion src/content/community/acknowledgements.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ We'd like to recognize a few people who have made significant contributions to R

This list is not exhaustive.

We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.reactjs.org/)
We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.react.dev/)

## Additional Thanks {/*additional-thanks*/}

Expand Down
10 changes: 10 additions & 0 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,21 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)

[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)

### reactjsday 2024 {/*reactjsday-2024*/}
October 25, 2024. In-person in Verona, Italy + online (hybrid event)

[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)

### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Native London Conf 2024 {/*react-native-london-2024*/}
November 14 & 15, 2024. In-person in London, UK

[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)

### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)

Expand Down
42 changes: 3 additions & 39 deletions src/content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Belo Horizonte](https://www.meetup.com/reactbh/)
* [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/)
* [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/)
* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/)
* [Joinville](https://www.meetup.com/pt-BR/React-Joinville/)
* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/)
* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/)
* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/)
* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
* [Salvador](https://www.meetup.com/pt-BR/ReactSSA)
* [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/)
* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/)

## Bolivia {/*bolivia*/}
* [Bolivia](https://www.meetup.com/ReactBolivia/)
Expand All @@ -51,32 +44,20 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
* [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)

## Chile {/*chile*/}
* [Santiago](https://www.meetup.com/es-ES/react-santiago/)

## China {/*china*/}
* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/)

## Colombia {/*colombia*/}
* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/)
* [Medellin](https://www.meetup.com/React-Medellin/)
* [Cali](https://www.meetup.com/reactcali/)

## Denmark {/*denmark*/}
* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)

## Egypt {/*egypt*/}
* [Cairo](https://www.meetup.com/react-cairo/)

## England (UK) {/*england-uk*/}
* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
* [React Advanced London](https://guild.host/react-advanced-london)
* [React Native London](https://guild.host/RNLDN)

## France {/*france*/}
* [Nantes](https://www.meetup.com/React-Nantes/)
* [Lille](https://www.meetup.com/ReactBeerLille/)
* [Paris](https://www.meetup.com/ReactJS-Paris/)

Expand All @@ -93,9 +74,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)

## Hungary {/*hungary*/}
* [Budapest](https://www.meetup.com/React-Budapest/)

## India {/*india*/}
* [Ahmedabad](https://www.meetup.com/react-ahmedabad/)
* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
Expand All @@ -117,6 +95,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
## Italy {/*italy*/}
* [Milan](https://www.meetup.com/React-JS-Milano/)

## Japan {/*japan*/}
* [Osaka](https://react-osaka.connpass.com/)

## Kenya {/*kenya*/}
* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)

Expand All @@ -138,12 +119,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Karachi](https://www.facebook.com/groups/902678696597634/)
* [Lahore](https://www.facebook.com/groups/ReactjsLahore/)

## Panama {/*panama*/}
* [Panama](https://www.meetup.com/React-Panama/)

## Peru {/*peru*/}
* [Lima](https://www.meetup.com/ReactJS-Peru/)

## Philippines {/*philippines*/}
* [Manila](https://www.meetup.com/reactjs-developers-manila/)
* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
Expand All @@ -160,7 +135,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet

## Spain {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
* [Canarias](https://www.meetup.com/React-Canarias/)

## Sweden {/*sweden*/}
* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
Expand All @@ -176,7 +150,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)

## US {/*us*/}
* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/)
* [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
Expand All @@ -187,7 +160,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
Expand All @@ -197,27 +169,19 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/)
* [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/)
* [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/)
* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/)
* [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/)
* [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/)
* [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/)
* [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/)
* [New York, NY - React.NYC](https://guild.host/react-nyc)
* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/)
* [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/)
* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/)
* [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/)
* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/)
* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/)
* [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/)
* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/)
* [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/)
* [San Francisco - Real World React](https://www.meetup.com/Real-World-React)
* [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/)
* [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/)
* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/)
* [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/)
* [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/)
* [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/)
* [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/)
Expand Down
28 changes: 14 additions & 14 deletions src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -124,35 +124,35 @@ export default function CatFriends() {
<>
<nav>
<button onClick={handleScrollToFirstCat}>
Tom
Neo
</button>
<button onClick={handleScrollToSecondCat}>
Maru
Millie
</button>
<button onClick={handleScrollToThirdCat}>
Jellylorum
Bella
</button>
</nav>
<div>
<ul>
<li>
<img
src="https://placekitten.com/g/200/200"
alt="Tom"
src="https://placecats.com/neo/300/200"
alt="Neo"
ref={firstCatRef}
/>
</li>
<li>
<img
src="https://placekitten.com/g/300/200"
alt="Maru"
src="https://placecats.com/millie/200/200"
alt="Millie"
ref={secondCatRef}
/>
</li>
<li>
<img
src="https://placekitten.com/g/250/200"
alt="Jellylorum"
src="https://placecats.com/bella/199/200"
alt="Bella"
ref={thirdCatRef}
/>
</li>
Expand Down Expand Up @@ -245,9 +245,9 @@ export default function CatFriends() {
return (
<>
<nav>
<button onClick={() => scrollToCat(catList[0])}>Tom</button>
<button onClick={() => scrollToCat(catList[5])}>Maru</button>
<button onClick={() => scrollToCat(catList[9])}>Jellylorum</button>
<button onClick={() => scrollToCat(catList[0])}>Neo</button>
<button onClick={() => scrollToCat(catList[5])}>Millie</button>
<button onClick={() => scrollToCat(catList[9])}>Bella</button>
</nav>
<div>
<ul>
Expand Down Expand Up @@ -948,7 +948,7 @@ const catList = [];
for (let i = 0; i < 10; i++) {
catList.push({
id: i,
imageUrl: 'https://placekitten.com/250/200?image=' + i
imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
});
}

Expand Down Expand Up @@ -1065,7 +1065,7 @@ const catList = [];
for (let i = 0; i < 10; i++) {
catList.push({
id: i,
imageUrl: 'https://placekitten.com/250/200?image=' + i
imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
});
}

Expand Down
25 changes: 23 additions & 2 deletions src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ These docs are still a work in progress. More documentation is available in the

<Note>
React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.

React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible.
</Note>

React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
Expand Down Expand Up @@ -226,6 +224,29 @@ module.exports = function () {

`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.

React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17.

<TerminalBlock>
npm install react-compiler-runtime@experimental
</TerminalBlock>

You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting:

```js {3}
// babel.config.js
const ReactCompilerConfig = {
target: '18' // '17' | '18' | '19'
};

module.exports = function () {
return {
plugins: [
['babel-plugin-react-compiler', ReactCompilerConfig],
],
};
};
```

### Vite {/*usage-with-vite*/}

If you use Vite, you can add the plugin to vite-plugin-react:
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -627,7 +627,11 @@ See the examples below for how to handle common patterns.

### React olmayan widget'ları kontrol etmek {/*controlling-non-react-widgets*/}

<<<<<<< HEAD
Bazen React'e yazılmamış UI widget'ları eklemek isteyebilirsiniz. Örneğin, sayfanıza bir harita bileşeni ekliyorsunuz. Bu harita `setZoomLevel()` metoduna sahip ve React kodunuzdaki `zoomLevel` state değişkenini yakınlaştırma seviyesi ile senkronize etmek istiyorsunuz. Efektiniz şuna benzeyecektir:
=======
Sometimes you need to add UI widgets that aren't written in React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this:
>>>>>>> 2b2d0f2309f49c82cf5bb88ea62fb2e44661c634

```js
useEffect(() => {
Expand Down
Loading
Loading