得到太多的重新渲染。 React 限制渲染次数以防止无限循环

Question

Learning react by coding, i'm getting this error 'Too many re-renders. React limits the number of renders to prevent an infinite loop.' this kind of error is usually fixable using useEffect, but because it is in this function that dispatching should happen, i dont know how to put it in useEffect.

my graph is working fine but when i want to dispatch i get that error. Simply what i am returning in those functions i want to dispatch it also. Any advice? if needed some information ask me. English is not my mother language so could be mistakes

my code:

 import { Graph } from "react-d3-graph"; const visualGraph = useSelector((state: ) => state.Articlesgraph ); const filteredGraphData = data && { links: filteredGraphData.links.map((l) => { return { id: l.id, }; }), nodes: filteredGraphData?.nodes.map((n) => { return { id: n.id, }; }), }; const kk = () => { if (currentCam) { dispatch(ChangeGraphData(filteredGraphData)); } return filteredGraphData; }; const pp = () => { if (currentCam) { dispatch(ChangeGraphData(visualGraph)); } return visualGraph; }; <Graph data={filteredGraphData? kk(): pp()} />

Answer 1

You probably don't want to call kk or pp every render. Maybe use a memo?

const hasData = !!filteredGraphData;
const data = React.useMemo(() => hasData ? kk() : pp(), [ hasData ]);

return  <Graph data={data} />;

The dependency on hasData (instead of filteredGraphData ) is hopefully going to break your infinite loop.