score:0

Accepted answer

you can use a render prop but you have to branch inside the render function of hierarchygraph to detect whether or not you have to make the call. otherwise the request is triggered multiple times. here is a quick example:

const hierarchygraph = () => {
  const [rootnode, setrootnode] = usestate(null);

  if (!rootnode) {
    return (
      <fetcher
        url="/hierarchy"
        initialdata={{}}
        render={({ data }) => {
          setrootnode(gethierarchy(data));
        }}
      />
    );
  }

  return <div>render the data related to rootnode</div>;
};

an alternative solution is to inline the call inside the render function and perform the operation on each render. it depends on the use case but if the operation is cheap it might be simpler. the last alternative is to leverage useeffect rather than the fetcher component. its usage would be more suited than the render prop pattern since you can explicitly trigger the call to the api only once.

score:0

it causes infinite recursion because of setrootnode causing re-render of hierarchygraph and this again triggers setrootnode. you need to find a way to stop this state updates when it's not necessary e.g:

export const hierarchygraph = () => {
  const [data, setdata] = usestate({});

  return (
    <fetcher
      url="/hierarchy"
      initialdata={data}
      render={({ data: newdata }) => {
          if(data !== newdata) { 
            setdata(newdata);
          }
      }}
    />
  );
}

Related Query

More Query from same tag