Passing an empty array as the second argument to useEffect makes it only run on mount and unmount, thus stopping any infinite loops. useEffect(() => { setIngredients({}); }, []); This was clarified to me in the blog post on React hooks at https://www.robinwieruch.de/react-hooks/
useEffect(callback); // Example useEffect(() => { console.log(“executed after render phase”); return () => { console.log(“cleanup function after render”); }; }); Runs on every component render. Typically used for debugging, analogous to function’s body execution on every render: const Component = () => { callback() return <></>; }; Note: There is still a difference, in execution … Read more
As you cannot use hooks inside loops, here is a solution in order to make it work when the array changes over the time. I suppose the array comes from the props : const App = props => { const itemsRef = useRef([]); // you can access the elements with itemsRef.current[n] useEffect(() => { itemsRef.current … Read more
You need to use useEffect hook to achieve this. const [counter, setCounter] = useState(0); const doSomething = () => { setCounter(123); } useEffect(() => { console.log(‘Do something after counter has changed’, counter); }, [counter]); If you want the useEffect callback to be ignored during the first initial render, then modify the code accordingly: import React, … Read more
The reason is because the callback passed into setInterval‘s closure only accesses the time variable in the first render, it doesn’t have access to the new time value in the subsequent render because the useEffect() is not invoked the second time. time always has the value of 0 within the setInterval callback. Like the setState … Read more
I suggest to look at Dan Abramov (one of the React core maintainers) answer here: I think you’re making it more complicated than it needs to be. function Example() { const [data, dataSet] = useState<any>(null) useEffect(() => { async function fetchMyAPI() { let response = await fetch(‘api/data’) response = await response.json() dataSet(response) } fetchMyAPI() }, … Read more
If you aren’t using fetchBusinesses method anywhere apart from the effect, you could simply move it into the effect and avoid the warning useEffect(() => { const fetchBusinesses = () => { return fetch(“theURL”, {method: “GET”} ) .then(res => normalizeResponseErrors(res)) .then(res => { return res.json(); }) .then(rcvdBusinesses => { // some stuff }) .catch(err => … Read more
Much like setState in Class components created by extending React.Component or React.PureComponent, the state update using the updater provided by useState hook is also asynchronous, and will not be reflected immediately. Also, the main issue here is not just the asynchronous nature but the fact that state values are used by functions based on their … Read more