score:0
call the function outside of the useeffect.
function cal(props) {
const [allevents, setevents] = usestate({ events: [] });
async function getevents() {
const yearstart = `${currentyear}-01-01`;
const yearend = `${currentyear}-12-31`;
const data = await fetchevents(yearstart, yearend, 'hard discount', currentlang);
console.log('data:', data);
setevents(data);
console.log('allevents:', allevents);
}
useeffect(() => {
getevents();
}, [allevents]);
return (
<childcomp
eventdata={allevents}
/>
);
}
for example ;
useeffect(() => {
getcountries();
}, []);
const getcountries = async () => {
const response = await fetch("https://covid19.mathdro.id/api/countries");
const data = await response.json();
const arrayofcountry = data.countries;
setcountries(arrayofcountry);
setloading(false);
};
score:0
if i understood correctly you only need to fetch the async data once the component is rendered for the first time, so change the useeffect hook to a empty array and it will trigger the hook on the almost equivalent "componentdidmount()"
function cal(props) {
const [allevents, setevents] = usestate({ events: [] });
useeffect(() => {
async function getevents() {
const yearstart = `${currentyear}-01-01`;
const yearend = `${currentyear}-12-31`;
const data = await fetchevents(yearstart, yearend, 'hard discount', currentlang);
console.log('data:', data);
setevents(data);
console.log('allevents:', allevents);
}
getevents();
}, []);
return (
<childcomp
eventdata={allevents}
/>
);
}
score:0
as per your code, useeffect has dependency [allevents], that means every time allevents changes getevents() will be called,
i believe you just need it first time the component is mounted, so just remove dependency
useeffect(() => {
getevents();
}, [allevents]);
Source: stackoverflow.com
Related Query
- UseEffect function to update a state variable
- Warning: Can't perform a React state update on an unmounted component. useEffect cleanup function
- Redux state variable undefined in useEffect return function
- State variable inside a function defined within useEffect hook is not updating when value changes
- React hooks loses updated value of state variable inside cleanup function of useEffect
- React: Execute function in useEffect Hook to update state. Use the state value to return component A or B
- useEffect with function that update the state as dependency leads to infinite loop
- How do I pass a variable and the function to update its state as a prop in React?
- React: "Can't perform a React state update on an unmounted component" without useEffect function
- Update non state variable in React useEffect
- React useEffect causing: Can't perform a React state update on an unmounted component
- Why can't useEffect access my state variable in a return statement?
- Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. in Index.js
- React hooks function component prevent re-render on state update
- useState in useEffect does not update state
- useEffect - Can't perform a React state update on an unmounted component
- Update state within listener that is inside useEffect
- useEffect doesn't update state on route change
- How to trigger a state update without triggering it’s useEffect
- Use useState value in useEffect without making the state update useEffect
- React - useEffect running even when there was no change in state variable
- How to update state in map function in reactjs
- What is the better way to update other state variable which is dependent on another state variable while re-rendering?
- Run function to update state on component constructor (and later)
- React, can't access updated value of state variable inside function passed to setInterval() in useEffect()
- If a function updates a state variable which is an object and is called from a child component, what's the best way to avoid infinite renders?
- How to update my useEffect hook when State change happen in a different .js file's component in ReactJS?
- setTimeout function in useEffect outputs a cached state value
- Why useEffect doesn't call callback function if state doesn't change?
- Update Recoil state from async function
More Query from same tag
- Nested Object -> Element implicitly has an 'any' type because expression of type 'string' can't be used to index type
- React efficient way to bind event to many dom elements
- Display MONGODB data in React.js page
- Redirecting to external link using ReactJS
- How can I implement Cache-Control: public in Vercel
- What's the way to show the cointop 50 in webpage?
- how can i get input data from two dynamic form in react class component?
- Can I use relative path with webpack dev server - react js
- Azure ad authentication SPA token not able to authenticate by my API
- Async/Await preventing second promise from executing
- Input fields do not respond to changing state to empty object
- React: Uncaught (in promise) Error: Request failed with status code 400
- Problem with reading data from Cache API (still in promise?)
- setState conflicts with getDerivedStateFromProps
- Debugging React propType warnings
- Is there a way to get the coordinates from this draggable marker using google-map-react?
- REACT JS FIREBASE FIRESTORE- how can i update my field in a document?
- How do I get my React like button to increment when not liked, and then decrement when liked?
- How to call a function from Props interface in Typescript/React
- How to open PDF in browser onClick of React Button?
- Errors when updated babel and webpack version in react project
- Why is react setState not working inside useEffect?
- Efficient way to use display the results from the fetch?
- How to render conditionally based on alternating patterns?
- How to solve "useRef is not function error" in react js
- Update the state of the grandparent component
- How to properly display message between sender and receiver in reactjs
- Type 'undefined' cannot be used as an index type
- styled-components: extend styles and change element type
- react: ReactGridLayout.children[0].x must be a number