React Hooks useEffect Tutorial
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about useEffect, such as fetching data on mount, dependency arrays and why effects re-run or loop.
Recommended by 3 people across 3 different months, 2019 to 2021.
What it is
A 20-minute screen-recorded tutorial by developer Ben Awad on the React useEffect hook. He codes live, covering the dependency array, running an effect once on mount, and fetching data inside an effect, using a trivia API as the example.
What people said
Recommends Mehmet N. Yarar · 2019-11 · Stack Overflow · on “React - How do I get fetched data outside of an async function?”
Use useEffect [LINK] async function fetchUserData () { try { const result = await fetch(`/usermanagement/getdocent`, { method: "GET" }) return await result.json() } catch (err) { console.log(err) return null } } const FunctionalComponent = () => { const [userData, setUserData] = useState() useEffect(() => { fetchUserData().then(data => { data && setUserData(data) }) }, []) // componentDidMount return <div /> } Ben Awad's awesome tutorial [this video] Example: [LINK]
Recommends Ahmed Magdy · 2020-07 · Stack Overflow · on “React Why won't my app render the updated state for google maps?”
you are not using useEffect() correctly your useEffect function are updating userLang and userLat , right ? and userLang and userLat are states can only be changed by setUserLang so if you need to trigger your useEffect you need to give it something that has changed in order to set the new userLat useEffect(()=>{myfunction(){} myFuncion(); },[thisVarActuallyChanges]) thisVarActuallyChanges is a variable that changes in order to re-trigger useEffect for more clarfication watch Ben Awad 's video about useEffect link [this video]
Recommends Shivam Jha · 2021-08 · Stack Overflow · on “converting componentDidMount, componentDidUpdate into hooks”
See React Documentation [LINK] A great video about useEffect - Youtube [this video] and inDepth stackOverflow answer on using useEffect [LINK]
Cites Jairo Diaz · 2019-11 · Stack Overflow · on “Infinite Loop - React Native useState useEffect”
when you use reactHooks and useEffect the second depends on what you need for example if you need something run as soon as the page load the second argument in the array is 'empty' [], in the other hand if you <script src=" [LINK] "></script> <script src=" [LINK] "></script> enter code here need something to run as soon as the page load and keep 'listening' that for some changes for example you declare a const [hello,setHello] = React.useState('hello'); and with useEffect(() => { console.log(hello); },[hello]); as soon as the page load you can see in the console 'hello' but somewhere you do setHello('bye'); hello is listening for changes and you will see in the console 'bye' thats what means