Merge pull request #56 from arvish-codal/26_May

Added notes containing the explanations for incorrect dependency.

Author: arvish-codal

notes.txt

@@ -773,16 +773,39 @@ NOTE - When strict mode is on, in development, React runs setup and cleanup on e
        Read more here --> https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts
                           https://stackoverflow.com/questions/53183362/what-is-strictmode-in-react
 
+ Some helpful resources :- 
+* https://developer.mozilla.org/en-US/docs/Web/API/setInterval
+* https://developer.mozilla.org/en-US/docs/Web/API/clearInterval
+* https://www.htmlallthethings.com/blog-posts/why-do-we-use-const-to-declare-arrow-functions-in-javascript#:~:text=Declaring%20Arrow%20Functions%20with%20Const&text=Constant%20variables%20are%20read%2Donly,from%20accidental%20deletion%20or%20manipulation.
 
-Remember :- 
- 
+
+################ IMP ################
+
+VIDEO 54 - FROM 3:20 MIN ;
+*****************************
+> We need to call the tick method every second.
+
+> This effect is going to fire after every render. If we only want the interval to be set up once on initial render (i.e similar to componentDidMount), we simply pass an empty array 
+  ( i.e [] ) as the dependency list.
+
+> If we now take a look at the browser, we can see that the class counter is working as expected but the hook counter is displaying the value of `1` and not incrementing every second.
+> In our mind, the problem statement is simple. Create an interval once and destroy it once.
+
+> The empty depndency list ensures that the timer is set only once and return function to destroy the timer that we've created. Why then our counter doesn't work as expected ?
+
+REMEMBER --> 
  If you think dependency array is a way to specify when you want to rerun the effect, you are going to run into problems. 
 
  Instead, dependency array should be thought of as a way to let react know about everything that the effect 
  must watch for changes.
 
- Some helpful links :- 
-* https://developer.mozilla.org/en-US/docs/Web/API/setInterval
-* https://developer.mozilla.org/en-US/docs/Web/API/clearInterval
-* https://www.htmlallthethings.com/blog-posts/why-do-we-use-const-to-declare-arrow-functions-in-javascript#:~:text=Declaring%20Arrow%20Functions%20with%20Const&text=Constant%20variables%20are%20read%2Donly,from%20accidental%20deletion%20or%20manipulation.
-* https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state
+Therefore, the problem is --> By specifying an empty array, we've basically told React to ignore watching for changes in the count variable.
+So, React goes like -> On initial render, the count value is 0 which implies setCount will set it to 0 + 1 = 1 and that'll be rendered in the 
+browser. Now because the dependency array is set to [], we're telling React that it doesn't have to watch for changes in the count value. Count 
+value is equal to 1 right now and React will just render that value through the different re-render cycles. If we want React (i.e the `useEffect` hook) 
+to keep an eye on a variable, we just have to add it to the dependency array (i.e [count]). And our problem will be solved.
+
+BTW, for this example there is another way to get it working without the dependency list. In the tick function, we use the second form of setCount.
+We get access to previous count and we set previous count + 1. (Read this to understand more --> https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state)
+
+Now since setCount keeps track of the previous count value, we don't have to specify count as a dependency and that array can again be set to [].

state-hook/src/components/IntervalHookCounter.js

@@ -9,6 +9,7 @@ function IntervalHookCounter() {
   }
 
   useEffect( () => {
+    console.log('called useEffect here')
     const interval = setInterval(tick, 1000)
 
     return () => {