동적 필터링을 사용하여 이 React 코드를 어떻게 더 최적화할 수 있습니까?

이번 주에 대시보드 성능을 최적화하는 작업이 주어졌습니다. 그리고 솔직히 말해서 최적화가 무엇을 의미하는지 잘 모르겠습니다. 인터넷 검색에서 나는 최적화하는 한 가지 방법이 불필요한 재렌더링을 줄이고 불필요한 API 호출을 피하는 것임을 발견했습니다.

그래서 다음과 같이 목표를 설정했습니다.

더 적은 수의 렌더를 사용하여 성능 향상(가능한 경우 useState 대신 useRef 도입)

불필요한 API 호출 제거(동일한 필터를 적용하거나 재설정을 반복해서 클릭할 때 API 호출이 트리거되지 않아야 함)

useReducer를 사용하고 내 파일에서 안티 패턴을 확인하는 올바른 방법
커스텀 훅

그리고 나는 minimal, workable example을 생각해 냈고 여기 working demo이 있습니다.

최적화를 달성하는 데 절반만 성공했습니다.

필터를 적용한 다음 다시 적용하면 모의 API를 호출하지 않습니다

.

resultLimit을 동일한 값으로 변경하면 api를 호출하지 않습니다.
내가 한 방법은 다음과 같습니다.

    const [page,setPage] = useState(1)//current page filter
    const [resultLimit,setResultLimit] = useState(10) //result limit filter,currently not implemented
    const [totalCount,setTotalCount] = useState(0) // total result count filter
    const [filters,setFilters] =useState<IFilterBugData>({
        platform:[],
        rootCause: [],
        reportedBy: [],
        assignedTo: [],
        status: [],
        defectCategory: [],
        severity: [],
        priority: [],
    })//filter options

    const [bugsData,setBugsData] = useState<IBug[]>([]) //bugs result

    const handleFilterDispatch = (state:IKeyValue[],payload:IFilterPayload) => {
        let _temp = [...state]
        switch(payload.action){
            case 'add':
                return _temp
            case 'reset':
                return []
            default:
                return _temp
        }
    }// use reducer for handling function temp filter state

    // const filterState = useRef<IKeyValue[]>([])
    const [filterState,filterDispatch] = useReducer(handleFilterDispatch,[])//temp filter state
    const [finalFilterState,setFinalFiterState] = useState<IKeyValue[]>([])//input filter state

    const memoizedInput:IInputBugData = useMemo(() => {
        return {
            filters:finalFilterState,
            page,
            resultLimit
        }
    },[finalFilterState,page,resultLimit])

    const getBugsData = useCallback(() =>   {
        console.log('inside memoized callback',memoizedInput)

        return getBugs(memoizedInput)
    }, [memoizedInput])

useEffect에서 memoized 함수getBugsData 호출

    useEffect(() => {
        console.log('rendering dataaaaaa')
        let {resultCount,currentPage,bugs,filters} = getBugsData()
        setBugsData(bugs)
        setFilters({...filters})
        setPage(currentPage)
        setTotalCount(resultCount)
    },[getBugsData])

하지만 실패한 것은

동일한 옵션을 선택 취소하고 선택하면 동일한 필터 상태가 생성되는 경우 여전히 api 호출이 발생합니다

.

재설정을 클릭하면 항상 api가 호출됩니다(적용된 필터가 없는 경우에도)

적용을 클릭하면 필터를 변경하지 않은 경우에도 다시 렌더링됨(한 번만)

제 질문은 여러분이 어떻게 다르게 하시겠습니까입니다.

참고: 사용자 정의 후크를 수행하고 있는지 또는 올바른 방법으로 useReducer/useCallback/useMemo를 수행하고 있는지 확실하지 않기 때문에 여러분은 내가 수행한 안티 패턴을 지적할 수도 있습니다.