useSelector and useEffect rerender optimization-CodePudding

I have table component with tableRows stored in useState.

Also I have searcher component outside of table component.

When data inside of searcher changes, tableRows updates inside useEffect.

And it works good, but it causes two rerender. And i understand why. First rerender because of useSelector, and the second because useEffect have useSelector value as dependency.

But how to avoid one rerender. I want it to rerenders when tableRows changes, but not when searcher changes.

const CatalogTable: React.FC<CatalogTableProps> = ({rows}) => {
    const [tableRows, setTableRows] = React.useState(rows)
    const searcher = useSelector(getTableSearcher, shallowEqual)

    const getData = async () => {
        const {data} = await CatalogService.getAllCatalogProducts({page: 1, searcher: searcher})
        setTableRows(data.products)
    }


    React.useEffect(() => {
        if(searcher)
            getData()
    }, [searcher])

    return (
        <>
            <div className={styles.defaultTable}>
                <Table
                    headers={headers}
                    label="Products catalog"
                    rows={tableRows}
                    total={total}
                    pagination
                    addButton
                    editButtons
                    searcher
                    getPage={(page: number) => nextPage(page)}
                    type='catalog'
                />
            </div>
        </>
    )
}

export default CatalogTable

CodePudding user response：

One of the possible solutions is memoization:

const CatalogTable: React.FC<CatalogTableProps> = ({rows}) => {
    const [tableRows, setTableRows] = React.useState(rows)
    const searcher = useSelector(getTableSearcher, shallowEqual)

    const getData = async () => {
        const {data} = await CatalogService.getAllCatalogProducts({page: 1, searcher: searcher})
        setTableRows(data.products)
    }


    React.useEffect(() => {
        if(searcher)
            getData()
    }, [searcher])

    const result = useMemo( () =>
        <>
            <div className={styles.defaultTable}>
                <Table
                    headers={headers}
                    label="Products catalog"
                    rows={tableRows}
                    total={total}
                    pagination
                    addButton
                    editButtons
                    searcher
                    getPage={(page: number) => nextPage(page)}
                    type='catalog'
                />
            </div>
        </>, [tableRows]
    );

  return result;
}

export default CatalogTable

another solution is putting both tableRows and search query inside redux store and update them simultaneously through async middleware.

CodePudding user response：

It re-renders because your state is changing, which is the expected result. This is because tableRows is being set inside the useEffect (there's a setTableRows inside the effect, which depends on the searcher).

Not sure how the component is being used, since you are passing some initial rows in the props and reseting the rows (setTableRows) inside the component, but from your comment seems that you don't really care about changes in the searcher. A solution to accomplish what you want would be to just pass the rows as props and remove the state from the component, in that way your component would only care about the rows and not about the searcher.

Anyway, optimizing re-renders is not the best way to go, unless your rendering is slow. Also, it is safer to define async calls inside the useEffect, this way is easier to assure that all required dependencies are in the dependencies array.