score:1
Accepted answer
it's because you're updating the state on every render again and again. if you just simply call setdata()
inside the function, it will call this setter that invokes a re-render and triggers react to call your app
function again.
if you want to have a default state, you can do it like below. if you want to update the state, it should be done by other actions, like the click of a button, fetching some data, etc.
check out the demo below where i added a button that adds a new name to your nodes
array:
function app() {
const [data, setdata] = react.usestate({
nodes: [
{ name: 'max' },
{ name: 'george' },
{ name: 'jesus' },
{ name: 'ben' },
{ name: 'james' },
{ name: 'sam' },
{ name: 'sassms' },
],
edges: [
{ source: 'max', target: 'george' },
{ source: 'george', target: 'jesus' },
{ source: 'jesus', target: 'max' },
{ source: 'jesus', target: 'ben' },
{ source: 'james', target: 'ben' },
{ source: 'sam', target: 'sassms' },
{ source: 'sam', target: 'ben' },
],
});
return <graph colour="grey" data={data} setdata={setdata} />;
}
function graph(props) {
function addrandomname() {
props.setdata({
...props.data,
nodes: [
...props.data.nodes,
{ name: math.random().tostring(36).slice(2) },
],
});
}
return (
<react.fragment>
<button onclick={addrandomname}>add new name</button>
<h2>names</h2>
<p> {props.data.nodes.map((d) => d.name).join(', ')}
</p>
<h2>state</h2>
<pre>{json.stringify(props.data, null, 2)}</pre>
</react.fragment>
);
}
reactdom.render(
<react.strictmode>
<app />
</react.strictmode>,
document.getelementbyid('root')
);
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
Source: stackoverflow.com
Related Query
- React - Too many re-renders when using props
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop when using useState()
- node_modules has too many files when using react framework
- Too many re-renders in react when using useReducer Hook
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop and it disappear when i clear the stored session data
- React gives Too many renders error when trying to sort data
- How to fix error Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop using react?
- I am getting this error "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop." When trying the code
- React Too many re-renders when using setState hook inside callback function
- React error: Too many re-renders, when i try to conditonally render using a button
- Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
- "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
- how to pass props to the route when using react router <Link>
- How can I spread props to a React component that uses exact props when using Flow?
- React useEffect calls API too many time, How can I limit the API call to only once when my component renders?
- Too many re-renders. React limits the number of renders to prevent an infinite loop
- Too many re-renders. React limits the number of renders to prevent an infinite loop. Updating state of a functional component inside the render method
- Too many re-renders. React Limits the number of renders to prevent an infinite loop - React hooks
- Too many re-renders when trying to change array of components on click on React
- Chat App Using React and Socket.io Hanging After Sending Too Many Messages
- Too many re-renders when using custom hook
- Passing both match param and props into react component when using routing
- React function Component state - Too many re-renders. React limits the number of renders to prevent an infinite loop
- react redux props undefined on event listener when using mapDispatchToProps
- With React + TypeScript, how do I avoid typecasting when using optional props with defaults with strictNullChecks enabled?
- "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
- error too many re-renders. react limits the number of renders to prevent an infinite loop
- React re renders all items in array when new items are added despite using unique keys for all items
- React calculator too many renders
- why do i get Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
More Query from same tag
- passing function as prop, undefined error
- Reducing component scroll Reactjs?
- React proxy not conecting to api url
- React typscript - component with interface and additional props
- async onClick with multiple setStates not working as expected
- Simply use React State Management with Router
- React semantic ui multi column multi row form
- Enabling react-router's 'browserHistory' to work on live server
- The increment ++ operator doesn't work for setting react state
- How to fix pagination reset issue in react-table?
- simple event listener reactjs not working
- How to disable ESLint during build phase in React
- Too many API calls causing error 'Can't set headers after they are sent'
- Reactjs getting event from store with fluxible
- React Dropdown in Form From Existing Array
- How to type MUI Typography props? v5
- Using nested folders with react-rails prerender
- How to add files using JSZip from remote URL in ReactJS?
- Opening a sub-page in react
- React hangs with _dereq_
- Axios to Node (Express) GET Request
- Type not assignable on Component
- How to pass react-bootstrap carousel items to a Map function?
- userfirestoreforprofile is true but not showing data in firebase.profile in console
- How to make different webpages have different background using react (Backgriound should be maintained after refreshing as well)
- Getting InvalidValueError while passing state by useContext
- React editing specific item
- React.js: Use Header-Imported Javascript Library
- How to make multiple API calls within React Native and Reflux
- Setting and updating state in React JS with Dropdown component from Material UI