useEffect - Conditional run of effect.

notes.txt

@@ -657,4 +657,30 @@ Just like useState, useEffect is also a function. We simply have to call it. To
 This parameter is a function which gets executed after every render of the component. When we specify useEffect, we're
 basically requesting React to execute the function that is passed as an argument every time the component renders. 
 
-`useEffect RUNS AFTER EVERY RENDER OF THE COMPONENT`. We can ofcourse customize that.
+`useEffect RUNS AFTER EVERY SINGLE RENDER OF THE COMPONENT`. We can ofcourse customize that.
+
+In some cases, applying the effect after every render might create a performance problem. So, we need a way to conditionally 
+run an effect from a functional component.
+
+Video - 51
+-----------
+
+In ClassCounterOne.js, we've a class component with a state variable count initialized to zero. In the render function, we've a 
+button and on click of that button, we increment the count value by one. When the value increments, the state changes which
+causes the component to re-render and `componentDidUpdate` will execute setting the document title to the updated counter value.
+
+We must add a condition to conditionally update the title only when the appropriate variable changes. i.e only when the count value 
+changes. 
+
+We'll have to do the same in the useEffect hook example (HookCounterOne.js file)
+Because there's no necesssity to update the title if it is not even changing between renders.
+
+We've do the changes such that React conditionally runs useEffect only when the count value changes.
+> As we already know that the first parameter to useEffect is a function. 
+> NOW, to conditionally execute an effect we pass in a second parameter. This parameter is an array. 
+> Within this array, we need to specify either props or state that we need to watch for. 
+> Only if those props or states specified in this array were to change, the effect would be executed.
+
+> Therefore, in order to conditionally run an effect specify the second parameter to `useEffect`. The 
+  second parameter is the array of values that the effect depends on. If the values don't change 
+  between renders, the effect is simply not run.

state-hook/src/components/ClassCounterOne.js

@@ -5,7 +5,8 @@ class ClassCounterOne extends Component {
     super(props)
 
     this.state = {
-       count: 0
+       count: 0,
+       name: ''
     }
   }
 
@@ -14,12 +15,18 @@ class ClassCounterOne extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    document.title = `Clicked ${this.state.count} times`
+    if (prevState.count !== this.state.count){
+      console.log('Updating document title')
+      document.title = `Clicked ${this.state.count} times`
+    }
   }
 
   render() {
     return (
       <div>
+        <input type="text" value={this.state.name} onChange={ e => {
+          this.setState( { name: e.target.value } )
+        }} />
         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Click {this.state.count} times
         </button>

state-hook/src/components/HookCounterOne.js

@@ -3,13 +3,16 @@ import React, {useState, useEffect} from 'react'
 function HookCounterOne() {
 
   const [count, setCount] = useState(0)
+  const [name, setName] = useState('')
 
   useEffect(() => {
+    console.log('useEffect - Updating document title')
     document.title = `You clicked ${count} times`
-  })
+  }, [count])
 
   return (
     <div>
+      <input type="text" value={name} onChange={ e => setName(e.target.value)} />
       <button onClick={() => setCount(count + 1)}>Click {count} times</button>
     </div>
   )