title: How to stop re render child component when any state changed in react js?
body: <p>I have a parent componenet, Inside this I have included a child component with props. 
  but When any state is changed in parent component (that doesn't related to child component) then child component re-render. I don't want this re render 
  on every state change. Can we stop?</p>
  
  <p><a href="https://codesandbox.io/s/clever-oskar-fpxm3?fontsize=14" rel="noreferrer">
    
  </a></p>
  
  <pre><code>import React, { useState } from "react";
  import ReactDOM from "react-dom";
  import Child from "./child";
  import "./styles.css";
  
  function App() {
    const [any_state, setAnyState] = useState(false);
  
    const handleClick = () =&gt; {
      setAnyState(!any_state);
    };
    return (
      &lt;div className="App"&gt;
        Parent Page ({any_state ? "true" : "false"})
        &lt;br /&gt;
        &lt;button onClick={handleClick}&gt;Click me&lt;/button&gt;
        &lt;Child data={"any data"} /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>
  
  <p>child.js</p>
  
  <pre><code>import React from "react";
  
  function Child(props) {
    console.log("child component");
    return &lt;div className="App"&gt;child Page&lt;/div&gt;;
  }
  
  export default Child;
  
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/clever-oskar-fpxm3?fontsize=14" rel="noreferrer">https://codesandbox.io/s/clever-oskar-fpxm3?fontsize=14</a></p>
  
  <p>I don't want "child component" to be displayed in console on every state change.</p>