diff --git a/web/app/components/base/features/hooks.ts b/web/app/components/base/features/hooks.ts
index 7e2ec5a3ab..f1e91621d8 100644
--- a/web/app/components/base/features/hooks.ts
+++ b/web/app/components/base/features/hooks.ts
@@ -1,10 +1,10 @@
 import type { FeatureStoreState } from './store'
-import { useContext } from 'react'
+import { use } from 'react'
 import { useStore } from 'zustand'
 import { FeaturesContext } from './context'
 
 export function useFeatures<T>(selector: (state: FeatureStoreState) => T): T {
-  const store = useContext(FeaturesContext)
+  const store = use(FeaturesContext)
   if (!store)
     throw new Error('Missing FeaturesContext.Provider in the tree')
 
@@ -12,5 +12,5 @@ export function useFeatures<T>(selector: (state: FeatureStoreState) => T): T {
 }
 
 export function useFeaturesStore() {
-  return useContext(FeaturesContext)
+  return use(FeaturesContext)
 }
diff --git a/web/app/components/base/file-uploader/store.tsx b/web/app/components/base/file-uploader/store.tsx
index b281a9de8f..d6df5ee4ca 100644
--- a/web/app/components/base/file-uploader/store.tsx
+++ b/web/app/components/base/file-uploader/store.tsx
@@ -3,7 +3,7 @@ import type {
 } from './types'
 import {
   createContext,
-  useContext,
+  use,
   useRef,
 } from 'react'
 import {
@@ -33,7 +33,7 @@ type FileStore = ReturnType<typeof createFileStore>
 export const FileContext = createContext<FileStore | null>(null)
 
 export function useStore<T>(selector: (state: Shape) => T): T {
-  const store = useContext(FileContext)
+  const store = use(FileContext)
   if (!store)
     throw new Error('Missing FileContext.Provider in the tree')
 
@@ -41,7 +41,7 @@ export function useStore<T>(selector: (state: Shape) => T): T {
 }
 
 export const useFileStore = () => {
-  return useContext(FileContext)!
+  return use(FileContext)!
 }
 
 type FileProviderProps = {
diff --git a/web/app/components/datasets/common/image-uploader/store.tsx b/web/app/components/datasets/common/image-uploader/store.tsx
index 45c338d8bc..f14cc9667f 100644
--- a/web/app/components/datasets/common/image-uploader/store.tsx
+++ b/web/app/components/datasets/common/image-uploader/store.tsx
@@ -3,7 +3,7 @@ import type {
 } from './types'
 import {
   createContext,
-  useContext,
+  use,
   useRef,
 } from 'react'
 import {
@@ -33,7 +33,7 @@ type FileStore = ReturnType<typeof createFileStore>
 const FileContext = createContext<FileStore | null>(null)
 
 export function useFileStoreWithSelector<T>(selector: (state: Shape) => T): T {
-  const store = useContext(FileContext)
+  const store = use(FileContext)
   if (!store)
     throw new Error('Missing FileContext.Provider in the tree')
 
@@ -41,7 +41,7 @@ export function useFileStoreWithSelector<T>(selector: (state: Shape) => T): T {
 }
 
 export const useFileStore = () => {
-  return useContext(FileContext)!
+  return use(FileContext)!
 }
 
 type FileProviderProps = {
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index f06d4d7261..126d2df43c 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -10,7 +10,7 @@ import {
 import {
   Children,
   createContext,
-  useContext,
+  use,
   useEffect,
   useRef,
   useState,
@@ -327,7 +327,7 @@ export function Code({ children, ...props }: IChildProps) {
 }
 
 export function Pre({ children, ...props }: IChildrenProps) {
-  const isGrouped = useContext(CodeGroupContext)
+  const isGrouped = use(CodeGroupContext)
 
   if (isGrouped)
     return children
diff --git a/web/app/components/goto-anything/context.tsx b/web/app/components/goto-anything/context.tsx
index 28fb08ac17..53c3ab1e1b 100644
--- a/web/app/components/goto-anything/context.tsx
+++ b/web/app/components/goto-anything/context.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import * as React from 'react'
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, use, useEffect, useState } from 'react'
 import { usePathname } from '@/next/navigation'
 import { isInWorkflowPage } from '../workflow/constants'
 
@@ -29,7 +29,7 @@ const GotoAnythingContext = createContext<GotoAnythingContextType>({
 /**
  * Hook to use the GotoAnything context
  */
-export const useGotoAnythingContext = () => useContext(GotoAnythingContext)
+export const useGotoAnythingContext = () => use(GotoAnythingContext)
 
 type GotoAnythingProviderProps = {
   children: ReactNode
diff --git a/web/context/external-api-panel-context.tsx b/web/context/external-api-panel-context.tsx
index e50420c169..5c6f0ad738 100644
--- a/web/context/external-api-panel-context.tsx
+++ b/web/context/external-api-panel-context.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { createContext, useContext, useState } from 'react'
+import { createContext, use, useState } from 'react'
 
 type ExternalApiPanelContextType = {
   showExternalApiPanel: boolean
@@ -21,7 +21,7 @@ export const ExternalApiPanelProvider: React.FC<{ children: React.ReactNode }> =
 }
 
 export const useExternalApiPanel = () => {
-  const context = useContext(ExternalApiPanelContext)
+  const context = use(ExternalApiPanelContext)
   if (context === undefined)
     throw new Error('useExternalApiPanel must be used within an ExternalApiPanelProvider')
 
diff --git a/web/context/external-knowledge-api-context.tsx b/web/context/external-knowledge-api-context.tsx
index 265171d208..64f23a3085 100644
--- a/web/context/external-knowledge-api-context.tsx
+++ b/web/context/external-knowledge-api-context.tsx
@@ -2,7 +2,7 @@
 
 import type { FC, ReactNode } from 'react'
 import type { ExternalAPIItem, ExternalAPIListResponse } from '@/models/datasets'
-import { createContext, useCallback, useContext, useMemo } from 'react'
+import { createContext, use, useCallback, useMemo } from 'react'
 import { useExternalKnowledgeApiList } from '@/service/knowledge/use-dataset'
 
 type ExternalKnowledgeApiContextType = {
@@ -38,7 +38,7 @@ export const ExternalKnowledgeApiProvider: FC<ExternalKnowledgeApiProviderProps>
 }
 
 export const useExternalKnowledgeApi = () => {
-  const context = useContext(ExternalKnowledgeApiContext)
+  const context = use(ExternalKnowledgeApiContext)
   if (context === undefined)
     throw new Error('useExternalKnowledgeApi must be used within a ExternalKnowledgeApiProvider')