score:2
Accepted answer
useeffect(() => {
if (callfromspace === "blub") {
setchecked(true);
}
}, [callfromspace]); // 'checked' should be excluded.
when you update checked
it would effect useeffect()
eventually setchecked(true)
called again...
so, you should exclude checked
on the dependency of useeffect()
.
score:0
the correct way to do it would be put yout async function inside the effect
import react, { useeffect, usestate } from "react";
const asyncfetch = () => "blub";
export default function app() {
const [checked, setchecked] = usestate(false);
const [trycheck, settrycheck] = usestate(false);
useeffect(() => {
const fetchfromspace = async () => {
const response = await asyncfetch();
if (callfromspace === "blub") {
setchecked(true);
}
}
if(trycheck){
fetchfromspace();
}
}, [trycheck]);
return (
<div classname="app">
<input
type="checkbox"
checked={checked}
onchange={(e) => settrycheck(e.target.checked)}
/>
</div>
);
}
score:0
if you need to only do the check once, and have no dependency for it as it seems to be the case, run your useeffect only once and call your async function directly inside of it.
import react, { useeffect, usestate } from "react";
const asyncfetch = async () => "blub"; // this function need to return a promise
export default function app() {
const [checked, setchecked] = usestate(false);
useeffect(() => {
asyncfetch().then(response => {
if (callfromspace === "blub") {
setchecked(true); // will update your state as soon as your request returns
}
});
}, []); // no dependency, will only run once
return (
<div classname="app">
<input
type="checkbox"
checked={checked}
onchange={(e) => setchecked(e.target.checked)}
/>
</div>
);
}
Source: stackoverflow.com
Related Query
- React Hooks: init local state after data is fetched
- Unable to set response data in my local state using hooks in react
- How to set local JSON data as state using hooks React
- How to get the changed state after an async action, using React functional hooks
- React hooks state variable not updating after rerender
- React Redux, rerendering after data was fetched and mapped into component?
- how to get state right after state change in react hooks
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- Why does the useEffect() seem to reset my local state after receiving data from a socket?
- React setState not working after deleting data from state copy
- Updating react state after data is sent to api
- How to switch the state of buttons in react hooks after updating it through rest api?
- Why does storing Open Weather Api fetched data in saved state not render in React JS?
- map function on React state - state with fetched API data
- React Hooks Wrapper not getting updated after state change in useEffect
- React 16.8 hooks - child component won't re-render after updating parent state
- When to update local react state based on data from redux?
- Not able to set state in React Hooks using data received from Axios
- How can I make react render the new state modifications after I have updated the state with hooks and context
- React render component asynchronously, after data is fetched
- React JS: previousState in setState is not keeping the data of the previous state after the state is updated
- React - using nested objects as state with hooks to fill form data
- How to modify data after waiting for it to be fetched react axios
- How to set state after data fetch complete in React
- Handling state after fetching data - React
- Local state gets reset after adding a new item in React
- How do I fetch data (via GET) after some React state updates?
- Restore form submission state after failed submission with react hooks
- How to call a method after successfully storing data in state in react
- Component local state not updating with react custom hooks
More Query from same tag
- How to delete multiple url params
- Call a static function into the class React ES6
- TypeScript: What type do I set a value that is to be compared with a list of types?
- Disable a button when the input fields are empty in reactjs
- handing dynamic onchange event from array in reactjs
- Container props changing after state changes within children
- How to post every object using axios
- How to show different list of items when clicking on a category button? React/javascript
- How can I use the built in Object.assign in react?
- Dynamic transpile and serve React application on expressjs
- how to comment reactjs mark up code in visual code?
- react-http-request does not change loading state after second request
- REACT: How to use a variable defined inside .env file?
- How to send the Input Fields in React Function component to a function
- Are these all Higher Order Components?
- Why useEffect is not called, when props have changed, render is called?
- The action menu is not getting closed even if I click somewhere on page, the menu remains open until I explicitly click on the Action button again
- Binding this to nested functions in React
- Jest + React Testing Library: Portals are not being cleaned up
- Antd: how to make a SubMenu be a clickable link?
- React.js: How to render separated jsx modules from one app.jsx file?
- React Mobx Firebase.onAuthStateChanged listener
- Programmatically fill reactjs form
- Does React renders Component due to props?
- Translating div to behave like odometer
- How to get and output a value from the select tag
- Isomorphic flux render on server after all requests
- React - What is meant by 'Do not use HOC’s in the render method of a component. Access the HOC outside the component definition.'?
- How do I test that a child component is rendered?
- React router dom dynamic routing