diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index 083d4e052ca..ae327125145 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -187,7 +187,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js
+```js src/Tooltip.js
 import { useRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -263,7 +263,7 @@ React guarantees that the code inside `useLayoutEffect` and any state updates sc
 
 <Sandpack>
 
-```js
+```js src/App.js
 import ButtonWithTooltip from './ButtonWithTooltip.js';
 
 export default function App() {
@@ -337,7 +337,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js
+```js src/Tooltip.js
 import { useRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
@@ -410,7 +410,7 @@ Here is the same example, but with [`useEffect`](/reference/react/useEffect) ins
 
 <Sandpack>
 
-```js
+```js src/App.js
 import ButtonWithTooltip from './ButtonWithTooltip.js';
 
 export default function App() {
@@ -484,7 +484,7 @@ export default function ButtonWithTooltip({ tooltipContent, ...rest }) {
 }
 ```
 
-```js
+```js src/Tooltip.js
 import { useRef, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import TooltipContainer from './TooltipContainer.js';
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index e505622db70..22f700c67fb 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -225,7 +225,7 @@ export default function App() {
 
 ```
 
-```js
+```js src/TodoList.js
 import { useMemo } from 'react';
 import { filterTodos } from './utils.js'