title: How to Prevent Child Component Re-Render when Parent state changes
body: <p>I have two stateless components and one stateful component. In my stateful component, I have a list of people and when I click one of them, it opens a modal. I basically store modal's state in stateful component and send the values as props to modal. So it changes states anytime it opens a model and re-renders everything.</p>
  
  <p>How can I prevent my stateless classes to be re-rendered after I change state? </p>
  
  <p>I have tried memo in my stateless components but no luck</p>
  
  <p>Modal component</p>
  
  <pre><code>const modal = React.memo((props) =&gt; {
  
      return (
      &lt;Modal show={props.show} onHide={props.handleClose} aria-labelledby="contained-modal-title-vcenter"
             centered&gt;
          &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title&gt;Modal heading&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;Woohoo, you're reading this text in a modal!&lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
              &lt;Button variant="secondary" onClick={props.handleClose}&gt;
                  Close
              &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
      &lt;/Modal&gt;
      )
  });
  
  export default modal
  </code></pre>
  
  <p>Person Component</p>
  
  <pre><code>const person = React.memo((props) =&gt; {
      console.log("render");
      return (
          &lt;article className="Person" onClick={props.clicked}&gt;
              &lt;Container&gt;
                  &lt;Row&gt;
                      &lt;Col&gt;
                          &lt;p style={{marginBottom: 0 + 'px', marginTop: 1 + 'rem'}}&gt;&lt;b&gt;{props.name}&lt;/b&gt;&lt;/p&gt;
                          &lt;div className="Organization-wrapper"&gt;
                              &lt;FontAwesomeIcon className="Organization-icon" icon={faBuilding}/&gt;&lt;p&gt;{props.company}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/Col&gt;
                      &lt;Col&gt;
                          &lt;div&gt;
                              {
                                  props.image ?
                                      &lt;img src={props.image} height="50" width="50" className="Person-image"
                                           alt="avatar"/&gt;
                                      : &lt;svg height="50" width="50" className="Person-image"&gt;
                                          &lt;rect fill="cornflowerblue" x="0" y="0" height="50" width="50"/&gt;
                                          &lt;text
                                              fill="#ffffff"
                                              fontSize="20"
                                              textAnchor="middle"
                                              x="25"
                                              y="30"&gt;{props.first_char.toUpperCase()}&lt;/text&gt;
                                      &lt;/svg&gt;
                              }
                          &lt;/div&gt;
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container&gt;
          &lt;/article&gt;
      );
  });
  </code></pre>
  
  <p>Stateful Component</p>
  
  <pre><code>class PersonList extends Component {
  
      state = {
          persons: [],
          show: false
      };
  
  
      componentDidMount() {
          axios.get('')
              .then(response =&gt; {
                  const result = response.data.data.slice(0, 5);
                  this.setState({persons: result});
              });
      }
  
      personSelectedHandler = (id) =&gt; {
          this.showModal();
      };
  
      showModal = () =&gt; {
          this.setState({ show: true });
      };
  
      hideModal = () =&gt; {
          this.setState({ show: false });
      };
  
      render() {
          const persons = this.state.persons.map(person =&gt; {
  
              let avatar;
              if (person.picture_id != null) {
                  avatar = person.picture_id.pictures["128"];
              }
              return &lt;ListGroup&gt;
                  &lt;ListGroup.Item&gt;
                      &lt;Person
                          key={person.id}
                          name={person.name}
                          company={person.org_id.name}
                          first_char={person.first_char}
                          image={avatar}
                          clicked={() =&gt; this.personSelectedHandler(person.id)}
                      /&gt;
                  &lt;/ListGroup.Item&gt;
              &lt;/ListGroup&gt;
          });
  
          return (
  
              &lt;div className="Wrapper"&gt;
                  &lt;Modal show = {this.state.show} handleClose = {this.hideModal}/&gt;
                  &lt;Header/&gt;
                  &lt;div className="Breadcrumb"&gt;
                      &lt;h4 className="Breadcrumb-text"&gt;&lt;b&gt;People's List&lt;/b&gt;&lt;/h4&gt;
                      &lt;hr/&gt;
                  &lt;/div&gt;
                  {persons}
              &lt;/div&gt;
          );
      }
  
  }
  
  export default PersonList;
  </code></pre>