diff --git a/ui/src/components/flags/FlagTable.tsx b/ui/src/components/flags/FlagTable.tsx index 00278b362e..e0585c3e84 100644 --- a/ui/src/components/flags/FlagTable.tsx +++ b/ui/src/components/flags/FlagTable.tsx @@ -8,7 +8,7 @@ import { Row, useReactTable } from '@tanstack/react-table'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useMemo } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { DataTablePagination } from '~/components/ui/table-pagination'; @@ -138,7 +138,7 @@ export default function FlagTable(props: FlagTableProps) { const sorting = useSelector(selectSorting); const { data, isLoading, error } = useListFlagsQuery(namespace.key); - const flags = data?.flags || []; + const flags = useMemo(() => data?.flags || [], [data]); const { setError } = useError(); useEffect(() => { diff --git a/ui/src/components/segments/SegmentTable.tsx b/ui/src/components/segments/SegmentTable.tsx index 87d96a1b3b..a0c6c20b7c 100644 --- a/ui/src/components/segments/SegmentTable.tsx +++ b/ui/src/components/segments/SegmentTable.tsx @@ -8,7 +8,7 @@ import { Row, useReactTable } from '@tanstack/react-table'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { selectSorting, setSorting } from '~/app/segments/segmentsApi'; import { useTimezone } from '~/data/hooks/timezone'; @@ -130,7 +130,7 @@ export default function SegmentTable(props: SegmentTableProps) { const sorting = useSelector(selectSorting); const { data, isLoading, error } = useListSegmentsQuery(namespace.key); - const segments = data?.segments || []; + const segments = useMemo(() => data?.segments || [], [data]); const table = useReactTable({ data: segments, columns,