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:
@@ -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 }
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user