title: How to prevent re-rendering of components that have not changed?
body: <p>I have a component that consists of several other components such as text fields, and when an input is made to the text field, all other components are re-rendered.</p>
  <p>I would like to prevent the re-rendering and only re-render the component that actually changes.</p>
  <p>I have seen that <code>useCallback</code> is the right way to do this and I have already seen how to use it. However, I'm having some trouble getting <code>useCallBack</code> to work correctly for my case.</p>
  <p>Even if I set it up in a simple manner as below, each new character entered into the text field causes the button to be rendered again.</p>
  <p>I don't see my mistake.</p>
  <p><a href="https://codesandbox.io/s/suspicious-meadow-1dkxw?file=/src/App.js" rel="nofollow noreferrer">See working example in sandbox.</a></p>
  <pre><code>const Button = () =&gt; {
    console.log(&quot;Button Rendered!&quot;);
    window.alert(&quot;Button Rendered&quot;);
    return &lt;button onClick=&quot;&quot;&gt;Press me&lt;/button&gt;;
  };
  
  export default function App() {
    const [textInput, setTextInput] = useState(&quot;Hallo&quot;);
  
    const onChangeInput = useCallback(
      (e) =&gt; {
        setTextInput(e.target.value);
      },
      [textInput]
    );
  
    return (
      &lt;div&gt;
        &lt;input
          type=&quot;text&quot;
          onChange={onChangeInput}
          value={textInput}
        /&gt;
        &lt;Button /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I am happy for any calrification.</p>