diff --git a/notes.txt b/notes.txt
index ff63787..6936e17 100644
--- a/notes.txt
+++ b/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.
\ No newline at end of file
+`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.
\ No newline at end of file
diff --git a/state-hook/src/components/ClassCounterOne.js b/state-hook/src/components/ClassCounterOne.js
index 9db1f49..2d93a1a 100644
--- a/state-hook/src/components/ClassCounterOne.js
+++ b/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>
diff --git a/state-hook/src/components/HookCounterOne.js b/state-hook/src/components/HookCounterOne.js
index 1bfecac..bcb8bb0 100644
--- a/state-hook/src/components/HookCounterOne.js
+++ b/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>
   )