score:0
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);
}
}}
/>
);
}
Source: stackoverflow.com
Related Query
- how to handle useEffect with render props in react
- How to handle props injected by HOC in React with Typescript?
- How to load child component with props on first render with React Hooks
- How to handle typescript function overloading with React Props
- How to mock properly with Jest a React component using render props
- With React Router : How to render a component multiple times with differents props each time in a Route?
- how to render React components with props from client
- How to render component again at the top level with the new props in React 0.14
- How to use TypeScript generics with React render props
- how can i render a component with an API call with props react js
- How to render React component with passed in props on click
- How to call loading function with React useEffect only once
- How to specify (optional) default props with TypeScript for stateless, functional React components?
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to focus something on next render with React Hooks
- How to render images with react on server side?
- React form with multiple buttons - how to choose one to handle onSubmit event?
- How to render a string with JSX in React
- How to render images with React JS using map or loop?
- How to handle React Router with Node Express routing
- HOC's and Render Props With Functional Components in React 16
- React useEffect cleanup with current props
- how to deal with css imports for react server-side render
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- how to change image src using props with styled component and react
- How to create new elements with React mapping props
- issue with how to render with react router
- How to properly render a 404 page in React with React-Router?
- How to reset React hook state with setTimeout in useEffect
- How to check if state default boolean false is changing to true with React Hook useEffect
More Query from same tag
- React JS, Why my page tile is not changing?
- Can a mutable object in Redux store that is only mutated outside of Redux cause unexpected side effects?
- useCallback and IntersectionObserver's callback still gets the old value of a Redux state before getting the new value
- Passing runtime data from a component to a HoC?
- Re-render same component on url change in react
- TypeError: Cannot read property 'name' of undefined [reactjs] with oracle database
- Prevent re-rendering unchanged items in todo app with React Context and useReducer
- how to pull 1 button to the left and 2 button to the right in react>
- MaterialUI: Paper or Card title
- Find right solution to include React + TypeScript at the same time in Laravel Mix webpack.mix?
- React useContext keep data after redirect?
- how to register an event handler for the capture phase in React-js?
- React table 7 gives issue for unique key
- Control raspberry pi via website in React.js?
- React Auto Horizontal Scroll
- ApexCharts barchart vertical categories logic in ReactJs?
- Calling child API in React JS
- How to create dropdown list with description in React
- Redux - Invalid attempt to spread non-iterable instance
- How do I use spread operator in useEffect without infinite loop?
- Expressjs cors issue when fetching from different origin
- React pass state to nested components not working
- How to add "CLEAR" button to IonDateTime?
- How to change css style of a collection of objects from event of another in React?
- useEffect() infinitely runs for some reason
- React reducer giving error
- How to handle onClick code if user clicks "open link in new tab" in React js
- Overloading browser's window object - Will it cause performance issues?
- How to filter via search with two components [reactjs]
- Can't access Javascript object within React Component