更新过滤器后如何呈现更新的列表

Question

Whenever, user is checking the checkbox, the factoryQuery array is getting updated. Search function is for filtering procurements array. I want the ProcurementList component to call search whenever factoryQuery is getting changed.

Search Function:

const search = () => {
        if(factoryQuery.length != 0){
        return procurements.filter(
            (procurement) =>
                factoryQuery.includes(procurement.data.factory_name.toLowerCase()));
        } else {
            return procurements; 
        }  
    };

Function called on checking a checkBox

const handleCheck = (e) => {
        var array = factoryQuery;
        if(e.target.checked){
            array.push(e.target.value.toLowerCase());
        }else{
            if(array.indexOf(e.target.value.toLowerCase()) != -1){
            array.splice(array.indexOf(e.target.value.toLowerCase()), 1);  
            }
        }
        setFactoryQuery(array);
    }

Component to render Procurements List:

<ProcurementsList procurements={search(procurements)} />

Answer 1

You should call the search method inside a useEffect hook and add factoryQuery in dependency array, that way it rerenders everytime factoryQuery changs