From 4c347f198ee150ad4a6065b1bdc7c0941e49b0fb Mon Sep 17 00:00:00 2001
From: Rohit Gahlawat <personal.rg56@gmail.com>
Date: Wed, 10 Jun 2026 12:23:04 +0530
Subject: [PATCH] refactor(web): replace useContext with use() in workflow
 components (#25193) (#37253)

---
 web/app/components/workflow/datasets-detail-store/store.ts  | 4 ++--
 web/app/components/workflow/hooks-store/store.ts            | 4 ++--
 .../json-schema-config-modal/visual-editor/context.tsx      | 4 ++--
 .../json-schema-config-modal/visual-editor/store.ts         | 4 ++--
 web/app/components/workflow/note-node/note-editor/store.ts  | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/web/app/components/workflow/datasets-detail-store/store.ts b/web/app/components/workflow/datasets-detail-store/store.ts
index e2910b84b1..1347ee375a 100644
--- a/web/app/components/workflow/datasets-detail-store/store.ts
+++ b/web/app/components/workflow/datasets-detail-store/store.ts
@@ -1,6 +1,6 @@
 import type { DataSet } from '@/models/datasets'
 import { produce } from 'immer'
-import { useContext } from 'react'
+import { use } from 'react'
 import { createStore, useStore } from 'zustand'
 import { DatasetsDetailContext } from './provider'
 
@@ -30,7 +30,7 @@ export const createDatasetsDetailStore = () => {
 }
 
 export const useDatasetsDetailStore = <T>(selector: (state: DatasetsDetailStore) => T): T => {
-  const store = useContext(DatasetsDetailContext)
+  const store = use(DatasetsDetailContext)
   if (!store)
     throw new Error('Missing DatasetsDetailContext.Provider in the tree')
 
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 050898a3cc..c01e42dc4a 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -11,7 +11,7 @@ import type { SchemaTypeDefinition } from '@/service/use-common'
 import type { FlowType } from '@/types/common'
 import type { VarInInspect } from '@/types/workflow'
 import { noop } from 'es-toolkit/function'
-import { useContext } from 'react'
+import { use } from 'react'
 import {
   useStore as useZustandStore,
 } from 'zustand'
@@ -159,7 +159,7 @@ export const createHooksStore = ({
 }
 
 export function useHooksStore<T>(selector: (state: Shape) => T): T {
-  const store = useContext(HooksStoreContext)
+  const store = use(HooksStoreContext)
   if (!store)
     throw new Error('Missing HooksStoreContext.Provider in the tree')
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx
index db2c8032bb..176abbcf69 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context.tsx
@@ -1,7 +1,7 @@
 import { noop } from 'es-toolkit/function'
 import {
   createContext,
-  useContext,
+  use,
   useRef,
 } from 'react'
 import { useMitt } from '@/hooks/use-mitt'
@@ -46,5 +46,5 @@ export const MittProvider = ({ children }: { children: React.ReactNode }) => {
 }
 
 export const useMittContext = () => {
-  return useContext(MittContext)
+  return use(MittContext)
 }
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/store.ts b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/store.ts
index b756c6fea6..1e3acd35ac 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/store.ts
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/store.ts
@@ -1,5 +1,5 @@
 import type { SchemaRoot } from '../../../types'
-import { useContext } from 'react'
+import { use } from 'react'
 import { createStore, useStore } from 'zustand'
 import { VisualEditorContext } from './context'
 
@@ -26,7 +26,7 @@ export const createVisualEditorStore = () => createStore<VisualEditorStore>(set
 }))
 
 export const useVisualEditorStore = <T>(selector: (state: VisualEditorStore) => T): T => {
-  const store = useContext(VisualEditorContext)
+  const store = use(VisualEditorContext)
   if (!store)
     throw new Error('Missing VisualEditorContext.Provider in the tree')
 
diff --git a/web/app/components/workflow/note-node/note-editor/store.ts b/web/app/components/workflow/note-node/note-editor/store.ts
index 4bba12b6f6..b2eafa2066 100644
--- a/web/app/components/workflow/note-node/note-editor/store.ts
+++ b/web/app/components/workflow/note-node/note-editor/store.ts
@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { use } from 'react'
 import {
   useStore as useZustandStore,
 } from 'zustand'
@@ -65,7 +65,7 @@ export const createNoteEditorStore = () => {
 }
 
 export function useStore<T>(selector: (state: Shape) => T): T {
-  const store = useContext(NoteEditorContext)
+  const store = use(NoteEditorContext)
   if (!store)
     throw new Error('Missing NoteEditorContext.Provider in the tree')
 
@@ -73,5 +73,5 @@ export function useStore<T>(selector: (state: Shape) => T): T {
 }
 
 export const useNoteEditorStore = () => {
-  return useContext(NoteEditorContext)!
+  return use(NoteEditorContext)!
 }