fix: table sort toggle — use single state object to prevent lost updates

Two separate useState calls (sort + order) caused React to skip
re-renders when clicking the same column — setSort returned the same
value so React bailed out, and the nested setOrder was lost.

Single state object guarantees a new reference on every click,
so React always re-renders and useListData always refetches.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-03-23 10:58:56 +01:00
parent 635c6fd0ff
commit d3a72c51a2

View File

@@ -1,23 +1,25 @@
import { useState, useCallback, useRef } from 'react' import { useState, useCallback, useRef } from 'react'
interface SortState {
sort: string
order: 'asc' | 'desc'
}
export default function useTableSort(defaultSort = 'id', defaultOrder: 'asc' | 'desc' = 'desc') { export default function useTableSort(defaultSort = 'id', defaultOrder: 'asc' | 'desc' = 'desc') {
const [sort, setSort] = useState(defaultSort) const [state, setState] = useState<SortState>({ sort: defaultSort, order: defaultOrder })
const [order, setOrder] = useState<'asc' | 'desc'>(defaultOrder)
const userClicked = useRef(false) const userClicked = useRef(false)
const handleSort = useCallback((column: string) => { const handleSort = useCallback((column: string) => {
userClicked.current = true userClicked.current = true
setSort(prev => { setState(prev => {
if (prev === column) { if (prev.sort === column) {
setOrder(o => (o === 'asc' ? 'desc' : 'asc')) return { sort: column, order: prev.order === 'asc' ? 'desc' : 'asc' }
return prev
} }
setOrder('desc') return { sort: column, order: 'desc' }
return column
}) })
}, []) }, [])
const activeSort = userClicked.current ? sort : null const activeSort = userClicked.current ? state.sort : null
return { sort, order, handleSort, activeSort } return { sort: state.sort, order: state.order, handleSort, activeSort }
} }