keep re-render issue for custom hook - useEffect, fixed by useMemo to wrap object

solution is:

for object, need wrap with useMemo in this case, if function, need wrap with useCallback

const accountRoles = useMemo(() => account?.roles || [], [])

 issue was in listing.tsx

const accountRoles = account?.roles || [], []

const [todoDocs] = useListingTodoDocs(listingId, accountRoles, false)

in useListingTodoDocs, ulilize useEffect to fetch data, acccountRoles is object, so always

change and trigger useEffect action.

useEffect(() => {

const fetchListingTodos = async () => {

const result = await client.query({

query: GET_TODO_DOCUMENTS,

variables: { listingId: listingId },

fetchPolicy: 'no-cache',

})

const {

data: { getTodoDocuments },

} = result

const filterTodosByRole =

accountRoles.length === 0

? getTodoDocuments.filter(

(doc: Document) =>

!doc.name.includes(LISTING_AGREEMENT_BROKER_SIGNATURE)

)

: getTodoDocuments

dispatch({

type: 'fetchListingTodosSuccess',

payload: filterTodosByRole,

})

}

fetchListingTodos()

}, [refreshFlag, client, listingId, accountRoles])