# @types/react-dom

<div data-processed="true" data-subtree="aimfl,mfl" id="bkmrk-%40types%2Freact-dom" jscontroller="v48bt" jsuid="JY9r6_9" style="display: contents;">`@types/react-dom`</div>is <mark class="HxTRcb" data-processed="true">a TypeScript definition package from the DefinitelyTyped project that provides type information for the [react-dom](https://www.google.com/search?client=ubuntu-sn&channel=fs&q=react-dom&mstk=AUtExfD0el60w1UFWrdjeaK66vjv8Sx85mg1MsIt7NfrYdqoGPsoINnouUlHZXMXzYJQEYwcs4ZHYmlczfkbRKxI1XWIZgAYzCpG8HQR-8uHsIHiOxQSbnUf6iITch5hQoIELCJlu0xFkG1XQJ2diJ_bUazfnDYrxiZP_Ji8VR--TAzslrvM-A7501A9j-6CtrNQpv8EsN68T8XVWgwlHOVP6O0NFbNaODrv2nwKY6IwBMjfZ1V4Hdz5AxkN5d4_e0TFbLVW1EbcEnjMa1PKlnUXQMB0&csui=3&ved=2ahUKEwiYsdP-n7CRAxX5S2wGHawMMCQQgK4QegQIARAC) library</mark>, essential for building React apps with TypeScript to get autocompletion and type safety for DOM-specific React functions like `ReactDOM.render()` and server-side rendering methods, installed via npm or yarn alongside `react` and `@types/react`.<span class="uJ19be notranslate" data-processed="true" data-wiz-uids="JY9r6_g,JY9r6_h,JY9r6_i"><span class="vKEkVd" data-animation-atomic="" data-processed="true"> </span></span>

<div class="Y3BBE" data-hveid="CAEQAA" data-processed="true" data-sfc-cp="" id="bkmrk-" jsaction="rcuQ6b:&JY9r6_8|npT2md" jscontroller="zcfIf" jsuid="JY9r6_8">  
</div><div class="Fsg96" data-processed="true" data-sfc-cp="" id="bkmrk--1" jsaction="rcuQ6b:&JY9r6_m|npT2md" jscontroller="KHhJQ" jsuid="JY9r6_m">  
</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk-purpose-%26-use" jscontroller="a7qCn" jsuid="JY9r6_n" role="heading">**Purpose &amp; Use**</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk--2" jscontroller="a7qCn" jsuid="JY9r6_n" role="heading">  
</div>- <span class="T286Pc" data-processed="true" data-sfc-cp="">**Type Definitions**: Adds static types for `react-dom`, allowing TypeScript to understand functions, properties, and return types for DOM manipulation within React.</span>
- <span class="T286Pc" data-processed="true" data-sfc-cp="">**TypeScript Integration**: Crucial for TypeScript projects using React, providing IntelliSense and error checking for `react-dom` APIs.</span>
- <span class="T286Pc" data-processed="true" data-sfc-cp="">**Server-Side Rendering (SSR)**: Includes types for `ReactDOMServer` for SSR scenarios.</span><span class="uJ19be notranslate" data-processed="true" data-wiz-uids="JY9r6_14,JY9r6_15,JY9r6_16"><span class="vKEkVd" data-animation-atomic="" data-processed="true"> </span></span>

<div class="Fsg96" data-processed="true" data-sfc-cp="" id="bkmrk--3" jsaction="rcuQ6b:&JY9r6_1a|npT2md" jscontroller="KHhJQ" jsuid="JY9r6_1a">  
</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk-installation" jscontroller="a7qCn" jsuid="JY9r6_1b" role="heading">**Installation**</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk--4" jscontroller="a7qCn" jsuid="JY9r6_1b" role="heading">  
</div><div class="Fsg96" data-processed="true" data-sfc-cp="" id="bkmrk--5" jsaction="rcuQ6b:&JY9r6_1f|npT2md" jscontroller="KHhJQ" jsuid="JY9r6_1f">  
</div><div class="r1PmQe" data-hveid="CAUQAA" data-processed="true" data-wiz-uids="JY9r6_1h,JY9r6_1i,JY9r6_1j" id="bkmrk-bash" jscontroller="HP6Sjf" jsuid="JY9r6_1g"><div data-processed="true"><div class="pHpOfb" data-animation-atomic="" data-processed="true"><div class="vVRw1d" data-processed="true">bash</div></div></div></div>```
npm install --save-dev @types/react @types/react-dom
# or
yarn add -D @types/react @types/react-dom

```

<div class="Y3BBE" data-hveid="CAYQAA" data-processed="true" data-sfc-cp="" id="bkmrk-note%3A-you%27ll-typical" jsaction="rcuQ6b:&JY9r6_1m|npT2md" jscontroller="zcfIf" jsuid="JY9r6_1m">*Note: You'll typically install `@types/react` and `@types/react-dom` together for a full setup.*<span class="uJ19be notranslate" data-processed="true" data-wiz-uids="JY9r6_1q,JY9r6_1r,JY9r6_1s"><span class="vKEkVd" data-animation-atomic="" data-processed="true"> </span></span></div><div class="Y3BBE" data-hveid="CAYQAA" data-processed="true" data-sfc-cp="" id="bkmrk--6" jsaction="rcuQ6b:&JY9r6_1m|npT2md" jscontroller="zcfIf" jsuid="JY9r6_1m">  
</div><div class="Fsg96" data-processed="true" data-sfc-cp="" id="bkmrk--7" jsaction="rcuQ6b:&JY9r6_1u|npT2md" jscontroller="KHhJQ" jsuid="JY9r6_1u">  
</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk-key-exports" jscontroller="a7qCn" jsuid="JY9r6_1v" role="heading">**Key Exports**</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk--8" jscontroller="a7qCn" jsuid="JY9r6_1v" role="heading">  
</div>- <span class="T286Pc" data-processed="true" data-sfc-cp="">`ReactDOM`: For client-side rendering (e.g., `ReactDOM.createRoot()`).</span>
- <span class="T286Pc" data-processed="true" data-sfc-cp="">`ReactDOMServer`: For server-side rendering (e.g., `ReactDOMServer.renderToString()`).</span><span class="uJ19be notranslate" data-processed="true" data-wiz-uids="JY9r6_28,JY9r6_29,JY9r6_2a"><span class="vKEkVd" data-animation-atomic="" data-processed="true"> </span></span>

<div class="Fsg96" data-processed="true" data-sfc-cp="" id="bkmrk--9" jsaction="rcuQ6b:&JY9r6_2d|npT2md" jscontroller="KHhJQ" jsuid="JY9r6_2d">  
</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk-how-it-works" jscontroller="a7qCn" jsuid="JY9r6_2e" role="heading">**How it Works**</div><div aria-level="3" class="otQkpb" data-animation-nesting="" data-processed="true" data-sfc-cp="" id="bkmrk--10" jscontroller="a7qCn" jsuid="JY9r6_2e" role="heading">  
</div><div class="Y3BBE" data-hveid="CAoQAA" data-processed="true" data-sfc-cp="" id="bkmrk-when-you-use-react-w" jsaction="rcuQ6b:&JY9r6_2i|npT2md" jscontroller="zcfIf" jsuid="JY9r6_2i">When you use React with TypeScript, `@types/react-dom` (and `@types/react`) provides the "contracts" for how these libraries work, ensuring you're using them correctly and catching potential bugs before runtime</div>