diff --git a/web/app/components/base/features/__tests__/context.spec.tsx b/web/app/components/base/features/__tests__/context.spec.tsx
index 64bfb256f2a..4be4e00d266 100644
--- a/web/app/components/base/features/__tests__/context.spec.tsx
+++ b/web/app/components/base/features/__tests__/context.spec.tsx
@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { useContext } from 'react'
+import { use } from 'react'
 import { FeaturesContext, FeaturesProvider } from '../context'
 
 const TestConsumer = () => {
-  const store = useContext(FeaturesContext)
+  const store = use(FeaturesContext)
   if (!store)
     return <div>no store</div>
 
@@ -34,10 +34,10 @@ describe('FeaturesProvider', () => {
   })
 
   it('should maintain the same store reference across re-renders', () => {
-    const storeRefs: Array<ReturnType<typeof useContext>> = []
+    const storeRefs: Array<React.ContextType<typeof FeaturesContext>> = []
 
     const StoreRefCollector = () => {
-      const store = useContext(FeaturesContext)
+      const store = use(FeaturesContext)
       storeRefs.push(store)
       return null
     }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/store/__tests__/provider.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/store/__tests__/provider.spec.tsx
index 7796c83e17f..f12fa9fbfd0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/store/__tests__/provider.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/store/__tests__/provider.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { useContext } from 'react'
+import { use } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import DataSourceProvider, { DataSourceContext } from '../provider'
 
@@ -11,7 +11,7 @@ vi.mock('../', () => ({
 
 // Test consumer component that reads from context
 function ContextConsumer() {
-  const store = useContext(DataSourceContext)
+  const store = use(DataSourceContext)
   return (
     <div data-testid="context-value" data-has-store={store !== null}>
       {store ? 'has-store' : 'no-store'}
@@ -65,7 +65,7 @@ describe('DataSourceProvider', () => {
       const storeValues: Array<typeof mockStore | null> = []
 
       function StoreCapture() {
-        const store = useContext(DataSourceContext)
+        const store = use(DataSourceContext)
         storeValues.push(store as typeof mockStore | null)
         return null
       }
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/store/index.ts b/web/app/components/datasets/documents/create-from-pipeline/data-source/store/index.ts
index 03fa2ed7e36..75b00b9f618 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/store/index.ts
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/store/index.ts
@@ -3,7 +3,7 @@ import type { LocalFileSliceShape } from './slices/local-file'
 import type { OnlineDocumentSliceShape } from './slices/online-document'
 import type { OnlineDriveSliceShape } from './slices/online-drive'
 import type { WebsiteCrawlSliceShape } from './slices/website-crawl'
-import { useContext } from 'react'
+import { use } from 'react'
 import { createStore, useStore } from 'zustand'
 import { DataSourceContext } from './provider'
 import { createCommonSlice } from './slices/common'
@@ -29,7 +29,7 @@ export const createDataSourceStore = () => {
 }
 
 export const useDataSourceStoreWithSelector = <T>(selector: (state: DataSourceShape) => T): T => {
-  const store = useContext(DataSourceContext)
+  const store = use(DataSourceContext)
   if (!store)
     throw new Error('Missing DataSourceContext.Provider in the tree')
 
@@ -37,7 +37,7 @@ export const useDataSourceStoreWithSelector = <T>(selector: (state: DataSourceSh
 }
 
 export const useDataSourceStore = () => {
-  const store = useContext(DataSourceContext)
+  const store = use(DataSourceContext)
   if (!store)
     throw new Error('Missing DataSourceContext.Provider in the tree')
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
index 79f71d27c9e..41b0acd8cf5 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 import { cn } from '@/utils/classnames'
 import styles from './quota-panel.module.css'
 
@@ -41,7 +41,7 @@ const SystemQuotaCard = ({
 }
 
 const Label = ({ children, className }: { children: ReactNode, className?: string }) => {
-  const variant = useContext(VariantContext)
+  const variant = use(VariantContext)
   return (
     <div className={cn(
       'relative z-1 flex items-center gap-1 truncate px-1.5 pt-1 system-xs-medium',
diff --git a/web/app/components/workflow/hooks-store/__tests__/provider.spec.tsx b/web/app/components/workflow/hooks-store/__tests__/provider.spec.tsx
index bbd9636e5e5..eb43c9ca416 100644
--- a/web/app/components/workflow/hooks-store/__tests__/provider.spec.tsx
+++ b/web/app/components/workflow/hooks-store/__tests__/provider.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react'
-import { useContext } from 'react'
+import { use } from 'react'
 import { HooksStoreContext, HooksStoreContextProvider } from '../provider'
 
 const mockRefreshAll = vi.fn()
@@ -27,7 +27,7 @@ vi.mock('../store', async () => {
 })
 
 const Consumer = () => {
-  const store = useContext(HooksStoreContext)
+  const store = use(HooksStoreContext)
   return <div>{store ? 'has-hooks-store' : 'missing-hooks-store'}</div>
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx b/web/app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx
index 37944f71913..c09c31032d0 100644
--- a/web/app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mcp-tool-availability.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { ReactNode } from 'react'
-import { createContext, useContext } from 'react'
+import { createContext, use } from 'react'
 
 type MCPToolAvailabilityContextValue = {
   versionSupported?: boolean
@@ -26,7 +26,7 @@ export const MCPToolAvailabilityProvider = ({
 )
 
 export const useMCPToolAvailability = (): MCPToolAvailability => {
-  const context = useContext(MCPToolAvailabilityContext)
+  const context = use(MCPToolAvailabilityContext)
   if (context === undefined)
     return { allowed: true }