From 366e58bbbbaad991c56ed220a18ffc89bae741c1 Mon Sep 17 00:00:00 2001 From: Rohit Gahlawat Date: Wed, 10 Jun 2026 12:22:41 +0530 Subject: [PATCH] refactor(web): replace useContext with use() in remaining components (#25193) (#37254) --- web/app/components/base/features/hooks.ts | 6 +++--- web/app/components/base/file-uploader/store.tsx | 6 +++--- web/app/components/datasets/common/image-uploader/store.tsx | 6 +++--- web/app/components/develop/code.tsx | 4 ++-- web/app/components/goto-anything/context.tsx | 4 ++-- web/context/external-api-panel-context.tsx | 4 ++-- web/context/external-knowledge-api-context.tsx | 4 ++-- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/web/app/components/base/features/hooks.ts b/web/app/components/base/features/hooks.ts index 7e2ec5a3ab1..f1e91621d8f 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(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(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 b281a9de8fb..d6df5ee4caf 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 export const FileContext = createContext(null) export function useStore(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(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 45c338d8bcd..f14cc9667fb 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 const FileContext = createContext(null) export function useFileStoreWithSelector(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(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 f06d4d72618..126d2df43c8 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 28fb08ac171..53c3ab1e1b2 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({ /** * 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 e50420c1694..5c6f0ad738b 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 265171d2086..64f23a3085a 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 } export const useExternalKnowledgeApi = () => { - const context = useContext(ExternalKnowledgeApiContext) + const context = use(ExternalKnowledgeApiContext) if (context === undefined) throw new Error('useExternalKnowledgeApi must be used within a ExternalKnowledgeApiProvider')