Fetch is triggered twice

Question

I have a function that sends two requests to the server when called, but only needs one.

function Welcome() { var styles = { backgroundColor: "#eee" }; const [isLoaded, setIsLoaded] = useState(false); const [cats, setCats] = useState([]); if(!isLoaded) { setIsLoaded(true); fetch('http://localhost:3001/api/categoryList') .then((response) => response.json()) .then((response) => { setCats(response); }); } return ( <div style={{textAlgin:"center"}} className="Welcome"> <title>{gloArray.titleProject}</title> <div id="546" className="prevTypePlace" > { cats.map((value) => <Typepreview image={value.workImage} id={value.workId} key={value.workId} name={value.workName} />) } </div> </div> ); }

I suspect that the component is drawn twice, but I don't know how to fix it

Giang Le · Accepted Answer · 2021-05-12 14:48:24Z

useEffect is used when you need some side effect, so put this condition inside one:

useEffect(() => { if(!isLoaded) { setIsLoaded(true); fetch('http://localhost:3001/api/categoryList') .then((response) => response.json()) .then((response) => { setCats(response); }); } }, [isLoaded])

currenty, this if condition is being called on every render, but we don't want that, we want it to be called, only when isLoaded changes

Collectives™ on Stack Overflow

Fetch is triggered twice

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related