diff --git a/contents/questions/system-design/dropdown-menu/solution/en-US.mdx b/contents/questions/system-design/dropdown-menu/solution/en-US.mdx
index ccb32d8df..6f21ffa41 100644
--- a/contents/questions/system-design/dropdown-menu/solution/en-US.mdx
+++ b/contents/questions/system-design/dropdown-menu/solution/en-US.mdx
@@ -147,7 +147,7 @@ This approach is used by [Headless UI](https://headlessui.com/react/menu) and [B
 
 In this approach, the menu is rendered as a direct child of the `<body>` and positioned `absolute`-ly to the **page** by getting the element's `offsetTop` and `offsetLeft` to get the coordinates of the `<button>` relative to the page and adding its height (`offsetHeight`) to get the final Y position to render the menu.
 
-In React, this can be done using [React Portals](https://beta.reactjs.org/reference/react-dom/createPortal), which lets you render outside the DOM hierarchy of the parent component. A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. Common examples include dropdown menus, tooltips, modals.
+In React, this can be done using [React Portals](https://react.dev/reference/react-dom/createPortal), which lets you render outside the DOM hierarchy of the parent component. A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. Common examples include dropdown menus, tooltips, modals.
 
 <iframe
   src="https://codesandbox.io/embed/dropdown-menu-relative-page-r4zoiu
diff --git a/contents/questions/system-design/image-carousel/solution/en-US.mdx b/contents/questions/system-design/image-carousel/solution/en-US.mdx
index 0786d7607..0085a2799 100644
--- a/contents/questions/system-design/image-carousel/solution/en-US.mdx
+++ b/contents/questions/system-design/image-carousel/solution/en-US.mdx
@@ -35,7 +35,7 @@ There's no need to separate the "Model" and the "ViewModel" in this component be
 
 ### Flux architecture
 
-A [Flux](https://facebook.github.io/flux/)/[Redux](https://redux.js.org/)/[Reducer](https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context)-like architecture is recommended to abstract away the action sources from the action logic/implementation. Some actions can be triggered by interacting with various UI elements, periodically by a timer, or keypresses.
+A [Flux](https://facebook.github.io/flux/)/[Redux](https://redux.js.org/)/[Reducer](https://react.dev/learn/scaling-up-with-reducer-and-context)-like architecture is recommended to abstract away the action sources from the action logic/implementation. Some actions can be triggered by interacting with various UI elements, periodically by a timer, or keypresses.
 
 ---
 
diff --git a/contents/questions/system-design/modal-dialog/solution/en-US.mdx b/contents/questions/system-design/modal-dialog/solution/en-US.mdx
index eec3d4768..b40646cea 100644
--- a/contents/questions/system-design/modal-dialog/solution/en-US.mdx
+++ b/contents/questions/system-design/modal-dialog/solution/en-US.mdx
@@ -110,7 +110,7 @@ Most of the modal's contents in the header/body/footer will be provided by the u
 
 #### Breaking out of DOM hierarchy
 
-Rendering the modal is more tricky than it seems due to the fact that modals are being displayed over the page and does not follow the normal flow of page elements. It's important to render the modal outside of the DOM hierarchy of the parents, because if the parents contain styling that clips its contents, the modal contents might not be fully visible. Here's an example from the [React docs](https://beta.reactjs.org/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal) demonstrating the issue.
+Rendering the modal is more tricky than it seems due to the fact that modals are being displayed over the page and does not follow the normal flow of page elements. It's important to render the modal outside of the DOM hierarchy of the parents, because if the parents contain styling that clips its contents, the modal contents might not be fully visible. Here's an example from the [React docs](https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal) demonstrating the issue.
 
 <iframe
   src="https://codesandbox.io/embed/wnr51p?fontsize=14&hidenavigation=1&theme=dark&module=/App.js,/NoPortalExample.js,/PortalExample.js,/ModalContent.js,/styles.css&view=split"
@@ -126,7 +126,7 @@ Rendering the modal is more tricky than it seems due to the fact that modals are
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 />
 
-In React, rendering outside the DOM hierarchy of the parent component can be achieved using [React Portals](https://beta.reactjs.org/reference/react-dom/createPortal). Common use cases of portals include tooltips, dropdown menus, popovers.
+In React, rendering outside the DOM hierarchy of the parent component can be achieved using [React Portals](https://react.dev/reference/react-dom/createPortal). Common use cases of portals include tooltips, dropdown menus, popovers.
 
 #### Overlay
 
diff --git a/contents/questions/user-interface/tabs/frameworks/react/solution/index.mdx b/contents/questions/user-interface/tabs/frameworks/react/solution/index.mdx
index d161a98a8..b6d3c0078 100644
--- a/contents/questions/user-interface/tabs/frameworks/react/solution/index.mdx
+++ b/contents/questions/user-interface/tabs/frameworks/react/solution/index.mdx
@@ -5,7 +5,7 @@ import Notes from '../../../notes.mdx';
 
 Implementing a basic (not fully accessible) Tabs component in React is quite simple due to the fact that only one state value is needed, the currently active tab item. React also helps to keep the state and the UI in sync, which is more troublesome to do so in Vanilla JavaScript.
 
-For simplicity sake, we'll create an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they want you to implement a controlled or uncontrolled component.
+For simplicity sake, we'll create an [uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they want you to implement a controlled or uncontrolled component.
 
 ### Props (API Design)
 
diff --git a/contents/questions/user-interface/todo-list/frameworks/react/solution.mdx b/contents/questions/user-interface/todo-list/frameworks/react/solution.mdx
index b57cb13a6..fbb2122ae 100644
--- a/contents/questions/user-interface/todo-list/frameworks/react/solution.mdx
+++ b/contents/questions/user-interface/todo-list/frameworks/react/solution.mdx
@@ -6,7 +6,7 @@ We will need two state values: `tasks` and `newTask`.
 
 `tasks`: Since there's a list of tasks that can be modified, we will need it to be part of the component's state. When rendering a list of elements in React, we need to specify a `key` for each item. We cannot use the text of the task as the `key` because they are not guaranteed to be unique. It is typically a bad practice to use array `index` as `key`s, but for this question, it is acceptable. The most foolproof method is to generate a unique ID for each task. Libraries like [`uuid`](https://github.com/uuidjs/uuid) come to mind, but in this case, a simple incrementing counter will do. Since we want `id`s to be globally unique, it is initialized in the module scope, outside of the component.
 
-`newTask`: state to represent the new task input field, although that is not strictly necessary if we prefer [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html). However, it is generally more common to make `input` fields controlled, aka backed by component state. The initial value for this state should not be `null` as React will show a warning otherwise.
+`newTask`: state to represent the new task input field, although that is not strictly necessary if we prefer [uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). However, it is generally more common to make `input` fields controlled, aka backed by component state. The initial value for this state should not be `null` as React will show a warning otherwise.
 
 ### Adding tasks
 
