I am having a reusable component which takes an editable prop which can be toggled from outside. The problem is that whenever that toggle is activated the whole component rerenders including API calls which should be only called once. How can i prever rerender if the specific prop editable changes? Or what is the way to solve this issue?

What i would like to obtain is to get the API call only once in the component no matter how many times the editable prop changes. How can i achieve this?

Code bellow:

export const EditableTableList: React.FC<EditableTableListProps> = React.memo(({ columns, editEnabled, keyName, getData, sendChangeToParent }) => {
...
// THIS RERENDERS EVERYTIME EDITABLE CHANGES
  useEffect(() => {
    const getTableData = async () => {
      setLoadedData(false);
      setOriginalData(await getData());
      setLoadedData(true);
    }

    getTableData();
  }, [getData]);
...
}