T
TanStack•16mo ago
foreign-sapphire

When I select a row, the whole table rerenders.

I have a table and when I select a row the table gets rerendered. That is not a problem for me until I have to do a api call to get the data for a cell and it keeps calling the api when I select one row For example this is a column helper 
    columnHelper.accessor("website", {
      id: "website",
      cell: (item) => <WebsiteReferenceField id={item.getValue()} />,
      header: () => <span>Website</span>,
    }),
    columnHelper.accessor("website", {
      id: "website",
      cell: (item) => <WebsiteReferenceField id={item.getValue()} />,
      header: () => <span>Website</span>,
    }),
This WesiteRefereceField calls the api to get the value Can anyone help me how to stop this from rerendering? Thanks
6 Replies
rival-black
rival-black•16mo ago
why are you fetching on every render?
foreign-sapphire
foreign-sapphireOP•16mo ago
I am not, I tried with all of my knowledge to restrict the fetching on every render. here is the code for WebsiteRefereenceFIeld 
const WebsiteReferenceField = ({ id }: { id: number | undefined }) => {
  const [data, setData] = useState<WebsiteType | undefined>(undefined);
  const idRef = useRef<number | undefined>();

  const fetchData = useCallback(async () => {
    try {
      const response = await fetch(`${RESOURCES.WEBSITE}${id}/`);
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error(error);
    }
  }, [id]);

  useEffect(() => {
    if (id && id !== idRef.current) {
      idRef.current = id;
      fetchData();
    }
  }, [id, fetchData]);

  if (!id) return null;
  return (
    <>
      <p>{data?.domain}</p>
    </>
  );
};
const WebsiteReferenceField = ({ id }: { id: number | undefined }) => {
  const [data, setData] = useState<WebsiteType | undefined>(undefined);
  const idRef = useRef<number | undefined>();

  const fetchData = useCallback(async () => {
    try {
      const response = await fetch(`${RESOURCES.WEBSITE}${id}/`);
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error(error);
    }
  }, [id]);

  useEffect(() => {
    if (id && id !== idRef.current) {
      idRef.current = id;
      fetchData();
    }
  }, [id, fetchData]);

  if (!id) return null;
  return (
    <>
      <p>{data?.domain}</p>
    </>
  );
};
rival-black
rival-black•16mo ago
this seems like react-query could solve this really easily but I guess you're not using that it looks like somehow your cells are unmounting and then remounting causing the re-fetch fixing what's causing that would be ideal, but if you used react-query and its staleTime caching features, it would prevent excessive refetches with very little configuration effort.
foreign-sapphire
foreign-sapphireOP•16mo ago
Thanks I will use react query But where should I look for if I want to fix the issue of unmounting remounting?
rival-black
rival-black•16mo ago
for some debugging, console.log in the return of a useEffect to confirm it's happening
foreign-sapphire
foreign-sapphireOP•16mo ago
Hi, I have logged and seeing that when I click for a row, all the ReferenceField Compoent is being unmounted. I tried to use memo but it doesn't work Hi The issue has been resolved as soon as I integrate tanstack-query 🙂

Did you find this page helpful?