diff --git a/content/4-component-composition/5-context/react/App.jsx b/content/4-component-composition/5-context/react/App.jsx
index dee7d03a..c8c9a5e0 100644
--- a/content/4-component-composition/5-context/react/App.jsx
+++ b/content/4-component-composition/5-context/react/App.jsx
@@ -1,7 +1,6 @@
-import { useState, createContext } from "react";
+import { useState } from "react";
 import UserProfile from "./UserProfile";
-
-export const UserContext = createContext();
+import { UserContext } from "./UserContext";
 
 export default function App() {
   // In a real app, you would fetch the user data from an API
diff --git a/content/4-component-composition/5-context/react/UserContext.jsx b/content/4-component-composition/5-context/react/UserContext.jsx
new file mode 100644
index 00000000..c5d5d2e5
--- /dev/null
+++ b/content/4-component-composition/5-context/react/UserContext.jsx
@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const UserContext = createContext();