frontend-code-review

Source excerpt starting at line 1.

1# Rule Catalog -- Performance2 3Update this file when adding, editing, or removing Performance rules so the catalog remains accurate.4 5## @xyflow/react data usage6 7IsUrgent: True8Category: Performance9 10### Description11 12When working with the flow graph powered by @xyflow/react v12, use `useNodes()` and `useEdges()` hooks for rendering UI that displays node/edge data. For callbacks that mutate or read node/edge state imperatively (e.g., inside event handlers), use `useReactFlow()` or `useStoreApi()` to access the store directly. Avoid pulling the full node/edge arrays in callbacks, as this creates unnecessary subscriptions and re-renders.13 14### Suggested Fix15 16```tsx17// Wrong -- subscribes to all node changes in a callback-only context18function MyPanel() {19  const nodes = useNodes();20  const handleExport = () => {21    const data = nodes.map((n) => n.data);22    exportFlow(data);23  };24  return <button onClick={handleExport}>Export</button>;25}26 27// Right -- use store API for imperative access28function MyPanel() {29  const { getNodes } = useReactFlow();30  const handleExport = () => {31    const data = getNodes().map((n) => n.data);32    exportFlow(data);33  };34  return <button onClick={handleExport}>Export</button>;35}36```37 38## Complex prop memoization with `useMemo`39 40IsUrgent: True41Category: Performance42 43### Description44 45Wrap complex prop values (objects, arrays, computed structures) in `useMemo` before passing them to child components. Without memoization, a new reference is created on every render, causing children wrapped in `React.memo` to re-render unnecessarily. This is especially critical in the flow canvas where hundreds of nodes may be rendered simultaneously.46 47### Suggested Fix48 49```tsx50// Wrong -- new object on every render51<GenericNode52  config={{53    template: data.node.template,54    display_name: data.node.display_name,55  }}56/>57 58// Right -- stable reference59const config = useMemo(60  () => ({61    template: data.node.template,62    display_name: data.node.display_name,63  }),64  [data.node.template, data.node.display_name],65);66 67<GenericNode config={config} />68```69 70## Avoid re-renders with `React.memo` and `useCallback`71 72IsUrgent: True73Category: Performance74 75### Description76 77Use `React.memo` for components that receive stable props and should not re-render when their parent re-renders. Use `useCallback` for callback functions passed as props to memoized children. This is critical for node components on the canvas: GenericNode and its sub-components should be memoized to avoid cascading re-renders when the flow state changes.78 79### Suggested Fix80 81```tsx82// Wrong -- inline callback causes child re-render83function ParentNode({ id }: { id: string }) {84  return (85    <ChildComponent86      onUpdate={(value: string) => updateNodeField(id, value)}87    />88  );89}90 91// Right -- stable callback reference92function ParentNode({ id }: { id: string }) {93  const handleUpdate = useCallback(94    (value: string) => updateNodeField(id, value),95    [id],96  );97  return <ChildComponent onUpdate={handleUpdate} />;98}99 100const ChildComponent = React.memo(({ onUpdate }: Props) => {101  // ...102});103```104 105## Lazy loading for heavy pages106 107IsUrgent: False108Category: Performance109 110### Description111 112Use `React.lazy()` with `<Suspense>` for route-level code splitting of heavy pages (flow editor, settings, store, etc.). This reduces the initial bundle size and improves first-load performance. Route definitions should use lazy imports rather than static imports for page components.113 114### Suggested Fix115 116```tsx117// Wrong -- static import of heavy page118import FlowEditor from "@/pages/FlowEditor";119 120// Right -- lazy loaded121const FlowEditor = React.lazy(() => import("@/pages/FlowEditor"));122 123<Suspense fallback={<LoadingSpinner />}>124  <FlowEditor />125</Suspense>126```127 128## No expensive operations in render functions129 130IsUrgent: True131Category: Performance132 133### Description134 135Do not perform expensive computations (deep object traversals, array sorting/filtering of large datasets, JSON parsing, regex on large strings) directly in the render body of a component. Move these into `useMemo` with appropriate dependencies, or into event handlers / effects if they produce side effects. The flow canvas may trigger frequent re-renders; keeping the render path lightweight is critical.136 137### Suggested Fix138 139```tsx140// Wrong -- sorts on every render141function NodeList({ nodes }: { nodes: NodeType[] }) {142  const sorted = nodes143    .filter((n) => n.data.showNode)144    .sort((a, b) => a.data.node.display_name.localeCompare(b.data.node.display_name));145 146  return <>{sorted.map((n) => <NodeCard key={n.id} node={n} />)}</>;147}148 149// Right -- memoized computation150function NodeList({ nodes }: { nodes: NodeType[] }) {151  const sorted = useMemo(152    () =>153      nodes154        .filter((n) => n.data.showNode)155        .sort((a, b) =>156          a.data.node.display_name.localeCompare(b.data.node.display_name),157        ),158    [nodes],159  );160 161  return <>{sorted.map((n) => <NodeCard key={n.id} node={n} />)}</>;162}163```164 165## Zustand selector optimization166 167IsUrgent: True168Category: Performance169 170### Description171 172When reading from Zustand stores, always use selectors to subscribe to only the specific slices of state the component needs. Selecting the entire store object causes the component to re-render on every store update, even for unrelated state changes. Langflow has 15+ Zustand stores; careless subscriptions can create cascading performance problems.173 174### Suggested Fix175 176```ts177// Wrong -- subscribes to entire store, re-renders on any change178const store = useFlowStore();179const nodes = store.nodes;180 181// Wrong -- inline object selector creates new reference each render182const { nodes, edges } = useFlowStore((state) => ({183  nodes: state.nodes,184  edges: state.edges,185}));186 187// Right -- individual selectors for each value188const nodes = useFlowStore((state) => state.nodes);189const edges = useFlowStore((state) => state.edges);190 191// Right -- use useShallow for multiple values if needed192import { useShallow } from "zustand/react/shallow";193 194const { nodes, edges } = useFlowStore(195  useShallow((state) => ({ nodes: state.nodes, edges: state.edges })),196);197```198 199## React Query: proper staleTime and gcTime configuration200 201IsUrgent: False202Category: Performance203 204### Description205 206Configure `staleTime` and `gcTime` (formerly `cacheTime`) appropriately for each query based on how frequently the data changes. Avoid leaving defaults (0ms staleTime) for data that rarely changes (e.g., component type definitions, user settings), as this causes unnecessary refetches. Conversely, do not set excessively long stale times for data that changes frequently (e.g., flow execution status).207 208### Suggested Fix209 210```ts211// Wrong -- default staleTime of 0, refetches on every mount212const { data } = useQuery({213  queryKey: ["componentTypes"],214  queryFn: getComponentTypes,215});216 217// Right -- component types rarely change, cache for 5 minutes218const { data } = useQuery({219  queryKey: ["componentTypes"],220  queryFn: getComponentTypes,221  staleTime: 5 * 60 * 1000,222});223```224 225## Avoid creating new objects/arrays inline in JSX226 227IsUrgent: False228Category: Performance229 230### Description231 232Do not create new object or array literals directly inside JSX props, especially for configuration objects, data arrays, or callback payloads. Each render creates a new reference, which defeats `React.memo` and `useMemo` optimizations in child components. Extract these to constants outside the component, or memoize them inside the component.233 234**Note**: Since this project uses Tailwind CSS, inline `style={}` props should be extremely rare. Use Tailwind classes with design tokens instead (see code-quality.md). This rule applies primarily to non-style object props like `config`, `data`, `options`, `columns`, etc.235 236### Suggested Fix237 238```tsx239// Wrong -- new config object every render, child re-renders even if data hasn't changed240function FlowSettings({ flowId }: { flowId: string }) {241  return (242    <SettingsPanel243      config={{ flowId, autoSave: true, showMinimap: false }}244    />245  );246}247 248// Right -- constant outside component for static values249const DEFAULT_SETTINGS = { autoSave: true, showMinimap: false } as const;250 251function FlowSettings({ flowId }: { flowId: string }) {252  const config = useMemo(253    () => ({ flowId, ...DEFAULT_SETTINGS }),254    [flowId],255  );256  return <SettingsPanel config={config} />;257}258 259// Wrong -- new array every render260<SelectComponent options={["option1", "option2", "option3"]} />261 262// Right -- constant outside component263const OPTIONS = ["option1", "option2", "option3"] as const;264<SelectComponent options={OPTIONS} />265```266