React：防止变量重新渲染

Question

i recently found the issue of my problem but it's not solved yet, so i have a variable named data that have a bunch array of objects, i want to move it to global variable so it's not going to re-rendering but i can't because the fetchedData state prevent me from doing this and i can't move my state to global variable,i've tried several method like making a function outside it's component or using react.memo but it solve nothing. is there a way to achieve this?

here's my code Table.js :

import DataTable from "react-data-table-component";
import Columns from "./Columns.js";
...

const Table = () => {
  let [page, setPage] = useState(1);
  const [fetchedData, setFetchedData] = useState([]);
  var [selectedRowsData, setSelectedRowsData] = useState();

  const classes = useStyles();
  const dispatch = useDispatch();

  const checkBoxProps = {
    color: "primary",
  };

  useEffect(() => {
    const fetchAPI = async () => {
      setFetchedData(
        await dispatch(
          fetchTableList(
            localStorage.getItem("userId"),
            localStorage.getItem("auth"),
            page
          )
        )
      );
    };
    fetchAPI();
  }, [page]);

  const data = [
    ...fetchedData.map((val, i) => ({
      no: val.ROW_NUMBER,
      customerId: val.CUSTOMER_ID,
      customerName: val.CUSTOMER_NAME,
      poDate: val.PO_DATE,
      branchId: val.BRANCH_ID,
      passangerId: val.PASSANGER_ID,
      passangerBank: val.PASSANGER_BANK_NAME,
      passangerBankBranch: val.PASSANGER_BANK_BRANCH,
      created: val.CREATEBY,
    })),
  ];

  const handleChange = (state) => {
    console.log(state.selectedRows);
  };

  return (
    <div>
      <TableHeader />
      <div>
        <div>
          <DataTable
            columns={Columns}
            data={data}
            selectableRows
            selectableRowsComponent={Checkbox}
            selectableRowsComponentProps={checkBoxProps}
            onSelectedRowsChange={handleChange}
            noDataComponent={"Fetching data, please wait..."}
            selectableRowsHighlight
            customStyles={CustomTableStyle}
            conditionalRowStyles={CustomRowBackColor}
            dense
          />
          <div className={classes.footer}>
            <Footer />
            <div className={classes.paginationBox}>
              <Pagination
                nextPage={nextPage}
                previousPage={previousPage}
                page={page}
                setPage={setPage}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Table;```

Answer 1

useMemo can be used to control when the value of a given variable inside a functional component should be recomputed, eg

const data = useMemo(() => {
  return [
    ...fetchedData.map((val, i) => ({
      no: val.ROW_NUMBER,
      customerId: val.CUSTOMER_ID,
      customerName: val.CUSTOMER_NAME,
      poDate: val.PO_DATE,
      branchId: val.BRANCH_ID,
      passangerId: val.PASSANGER_ID,
      passangerBank: val.PASSANGER_BANK_NAME,
      passangerBankBranch: val.PASSANGER_BANK_BRANCH,
      created: val.CREATEBY,
    })),
  ];
}, [fetchedData])