Put the console.log inside the useEffect Probably you have other side effects that cause the component to rerender but the useEffect itself will only be called once. You can see this for sure with the following code. useEffect(()=>{ /* Query logic */ console.log(‘i fire once’); },[]); If the log “i fire once” is triggered more … Read more
We can use the useRef hook to store any mutable value we like, so we could use that to keep track of if it’s the first time the useEffect function is being run. If we want the effect to run in the same phase that componentDidUpdate does, we can use useLayoutEffect instead. Example const { … Read more
When you use useState, you can get an update method for the state item: const [theArray, setTheArray] = useState(initialArray); then, when you want to add a new element, you use that function and pass in the new array or a function that will create the new array. Normally the latter, since state updates are asynchronous … 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
You cannot use any of the existing lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a hook. They can only be used in class components. And with Hooks you can only use in functional components. The line below comes from the React doc: If you’re familiar with React class lifecycle methods, you can think of useEffect … 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 only want to run the function given to useEffect after the initial render, you can give it an empty array as second argument. function MyComponent() { useEffect(() => { loadDataOnlyOnce(); }, []); return <div> {/* … */} </div>; }
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
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