title: shouldComponentUpdate is not working when added an extra check?
body: <p>I' am beginner in react and i was trying to make a memo application and finally the time came where i applied the weird shouldComponentUpdate method to check if the value of previous props and state are not the same and if the memo is not defined as empty.</p>
  
  <p>Everything works fine but when i added that if the note is not empty the save btn stops working!</p>
  
  <p>Here's my note component</p>
  
  <pre><code>class Note extends React.Component {
      constructor(props){
          super(props)
          this.edit = this.edit.bind(this)
          this.remove = this.remove.bind(this)
          this.save   = this.save.bind(this)
          this.randomBetween = this.randomBetween.bind(this)
          this.state    = {editing:false}
  
      }
  
  
      shouldComponentUpdate (newProps,newState){
          return (newProps.children !== this.props.children || newState !== this.state)
  
      }
  
      edit(e){
          this.setState({editing:true})
      }
      remove(e){
          e.preventDefault()
          this.props.remove(this.props.id)
      }
  
      save(e){
          e.preventDefault()
          var newText = this.NoteInput.value
          this.props.update(this.props.id,newText)
          this.setState({editing:false})
  
      }
  
      formDisplay(){
          return (
              &lt;div className='note' style={this.style}&gt;
                  &lt;form&gt;
                  &lt;input type="text" className="note-input" ref={input =&gt; this.NoteInput = input} defaultValue = {this.props.children}&gt;&lt;/input&gt;
                  &lt;button onClick={this.save}&gt;save&lt;/button&gt;
                  &lt;/form&gt; 
              &lt;/div&gt;
          )
      }
      noteDisplay(){
          return (
              &lt;div className="note" ref = {note =&gt; this.note = note} style={this.style}&gt;
                  &lt;p&gt;{this.props.children}&lt;/p&gt;
                  &lt;span&gt;
                      &lt;button className="edit" onClick={this.edit}&gt;edit&lt;/button&gt;
                      &lt;button className="remove" onClick={this.remove}&gt;remove&lt;/button&gt;
                  &lt;/span&gt;     
              &lt;/div&gt;
          )
      }
  
      render() {
          return this.state.editing ? this.formDisplay() : this.noteDisplay()
      }
  
  
  }
  </code></pre>
  
  <p>All of this code works fine but when  add this code to the "shouldComponentUpdate" it doesn't work</p>
  
  <pre><code>shouldComponentUpdate (newProps,newState){
          return ((newProps.children !== this.props.children || newState !== this.state) &amp;&amp; newProps.children !== "")
  
      }
  </code></pre>
  
  <p>This basically adds an additional check which says that if the newprop.children is "" that means if the new text is empty then don't update </p>
  
  <p>When i click the save button with this piece of code.Nothing happens it doesn't render the note with it's previous data like it did before.What's wrong here?</p>