Implementation:Infiniflow Ragflow CommonHooks

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, React_Hooks
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete collection of commonly reused React hooks for modal management, deep comparison, set operations, and responsive design in the RAGFlow frontend.

Description

The common-hooks.tsx module provides reusable hooks including: useSetModalState (modal open/close/loading management), useDeepCompareEffect (deep equality effect), useSetSelectedRecord (selection state management), useHandleSearchChange (debounced search input), and responsive breakpoint hooks.

Usage

Import these hooks throughout the frontend as utility primitives for common UI patterns like modal dialogs, search inputs, and selection state.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/hooks/common-hooks.tsx
• Lines: 1-146

Signature

export function useSetModalState(): {
  visible: boolean;
  showModal: () => void;
  hideModal: () => void;
  loading: boolean;
  switchLoading: () => void;
};

export function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void;
export function useSetSelectedRecord<T>(): { currentRecord: T; setRecord: (r: T) => void };
export function useHandleSearchChange(): { searchValue: string; handleChange: (e) => void };

Import

import { useSetModalState, useDeepCompareEffect } from '@/hooks/common-hooks';

I/O Contract

Inputs

Name	Type	Required	Description
—	—	—	Parameterless hooks; no external inputs

Outputs

Name	Type	Description
useSetModalState()	object	Modal state (visible, showModal, hideModal, loading)
useDeepCompareEffect()	void	Effect with deep comparison

Usage Examples

import { useSetModalState } from '@/hooks/common-hooks';

function MyPage() {
  const { visible, showModal, hideModal } = useSetModalState();
  return (
    <>
      <Button onClick={showModal}>Open</Button>
      <Dialog open={visible} onClose={hideModal} />
    </>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment