useEffect doesn't fire when data change

Question

I created a table with filter. every thing worked well. Later on, I wanted to change the filters from material ui to Core ui. I created one filter and tried to test it before moving. But it didn't work. The problem that useEffect doesn't fire no matter what. I even tried to put variable x and increment it when a click happen and put it as arguement in useEffect. but nothing happen.

function renderTableData(will render my table every time I pick a filter) function onSiteChange(a function trigger when I pick a filter) function UpdateTableData (will feed my table for the 1st time)

thank you

******************************** RENDER TABLE *********************
  const renderTableData = () => {
    return (
      <div className="selectTable">
        <div
          className="ag-theme-alpine"
          style={{
            height: "75vh",
            width: "110wh",
            alignContent: "center",
            alignItems: "center",
            alignSelf: "center",
          }}
        >
          <AgGridReact
            rowData={dataFiltred}
            rowHeight={rowHeight}
            rowStyle={{ textAlign: "center" }}
          >
            <AgGridColumn field="Pseudo"></AgGridColumn>
            <AgGridColumn field="Site"></AgGridColumn>
            <AgGridColumn field="Langue"></AgGridColumn>
            <AgGridColumn field="Actif_Inactif"></AgGridColumn>
            <AgGridColumn field="Date_Formation"></AgGridColumn>
            <AgGridColumn field="Formateur"></AgGridColumn>
            <AgGridColumn field="Nature_Formation"></AgGridColumn>
            <AgGridColumn field="Durée"></AgGridColumn>
            <AgGridColumn field="Action"></AgGridColumn>
          </AgGridReact>
        </div>
      </div>
    );
  };

  // ********************************* logic *********************

  function onSiteChange(value, type) {
    if (type === "Site") {
      value.forEach((elem) => {
        rowData.forEach((data) => {
          if (data["Site"] === elem["value"]) {
            dataSiteFiltred.push(data);
          }
        });
      });
      console.log(dataSiteFiltred);
      if (dataSiteFiltred.length) {
        dataFiltred = [];
        dataSiteFiltred.forEach((elem94) => {
          dataFiltred.push(elem94);
        });
      }
    }
  }

  function updateTableData() {
    if (!dataFiltred.length) {
      rowData.forEach((elem) => {
        dataFiltred.push(elem);
      });
    }
  }
  updateTableData();

  useEffect(
    () => {
      renderTableData();
      console.log("fired");
    },
    [dataFiltred],
    [dataSiteFiltred]
  );

Answer 1

You haven't used any state, or change states or props which are not causing re-render and useEffect acordingly

You will need to have yourdataFiltred and dataSiteFiltred store in a state then update it in order to cause re-rendering/useEffect.

Something like this:

const [dataFiltred, setDataFiltred] = useState([]);

and update your state like this:

setDataFiltred([...dataFiltred, elem94]);

---

useEffect only accept one dependency array

So if you want to watch both arrays do this:

 useEffect(
    () => {
      renderTableData();
      console.log("fired");
    },[dataFiltred, dataSiteFiltred]
  );

In case it does not activate useEffect after array change, you could consider use Array.length

 useEffect(
    () => {
      renderTableData();
      console.log("fired");
    },[dataFiltred.length, dataSiteFiltred.length]
  );