title: How to prevent child re-render on every parent state update done though input field in React?
body: <p>I am building a basic chat application. I have a parent component (<code>Console.js</code>) that contains three child components</p>
  <ul>
  <li>QuestionCard.js</li>
  <li>AnswerCard.js</li>
  <li>InputCard.js</li>
  </ul>
  <p>This is how the basic layout looks like</p>
  <pre><code>const Console = () =&gt; {
      // initial state for input field
      const [userInput, setUserInput] = useState(&quot;&quot;);
  
      // fetch previous conversation history
      const conversationHistory = useSelector(state=&gt; state.conversationHistory.data)
  
      conversationHistory.map((info, idx) =&gt; (
          
      info.type == &quot;statement&quot; ? 
          &lt;span key={idx}&gt;
              &lt;QuestionCard    
                  data={info}
                  
              /&gt;
           
          &lt;/span&gt;
  
      : info.type == &quot;answer&quot; ?
          &lt;span key={idx}&gt;
              &lt;AnswerCard 
                  userInput={userInput}
                  setUserInput={setUserInput}
                  data={info}
              /&gt;
          &lt;/span&gt;
      :
          &lt;span&gt;&lt;/span&gt;
  
      ))
  
      &lt;InputCard
          userInput={userInput}
          setUserInput={setUserInput}
      /&gt;
  }
  </code></pre>
  <p>Specifically in the <strong>InputCard.js</strong> child component, there resides the <code>input</code> field where the user types</p>
  <pre><code>const InputCard = ({userInput, setUserInput}) =&gt; {
      const handleTextBoxInput = e =&gt; {   
          setUserInput(e.target.value)
      
      }
  
      return (
          &lt;input
               type=&quot;text&quot; 
               value={userInput || &quot;&quot;}
               onChange={handleInput}
               id=&quot;userQuery&quot;        
           /&gt;           
      )
  }
  </code></pre>
  <p>The problem here is that every time I press a key, all the child components (<strong>QuestionCard.js</strong>, <strong>AnswerCard.js</strong>, <strong>InputCard.js</strong>) re-renders.</p>
  <p>I read about <code>memo</code> and it is one way to ensure components don't re-render but needs something to compare against. So I understand I need to compare the <code>userInput</code> state before and after and check if indeed something changed. But I just don't know where do I do this comparison or whether to even use <code>memo</code></p>
  <p>Can anybody help me with this?</p>
  <p><strong>Note:</strong> I understand I can put the <code>setState</code> inside the <code>InputCard</code> component and re-rendering will stop but as you can see, I need the <code>setState</code> variables inside the <code>AnswerCard</code> too for some processing.</p>