refactor(web): replace useContext with use() in remaining components (#25193) (#37254)

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)
 }

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 = {

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 = {

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

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

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')
 

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')