title: Does state persist upon rerender of components?
body: <p>I wanna know why will my state remain the same upon rerender of the components. </p>
  
  <p>Here is my parent component </p>
  
  <pre><code>import React, {useEffect} from 'react';
  import {connect} from "react-redux"
  import NoteList from '../Components/NoteList';
  import NoteDetail from '../Components/NoteDetail';
  
  import "./NotePage.scss"
  
  const NotePage = ({note}) =&gt; {
  
      const selectNote = (item) =&gt; {
          if (!item){
              return &lt;div className="emptySection"/&gt;
          }
          console.log("return a new component")
          return &lt;NoteDetail/&gt;
      }
  
      return (
          &lt;div className="NotePage"&gt;
              &lt;div className="noteList"&gt;
                  &lt;NoteList/&gt;
              &lt;/div&gt;
              &lt;div className="noteDetail"&gt;
                  {selectNote(note)}
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  const mapState = (state) =&gt; (
      {
          note: state.notesReducer.note
      }
  )
  
  export default connect(mapState)(NotePage);
  </code></pre>
  
  <p>I have already checked that this component rerender when the note in redux store changed. The selectNote is executed proper as well. <strong>But does it return a brand new component of NoteDetail?</strong></p>
  
  <p>Here is my child component:</p>
  
  <pre><code>import React, {useState, useRef, useEffect} from 'react';
  import {connect} from "react-redux";
  import Editor from 'draft-js-plugins-editor';
  import {EditorState, ContentState} from "draft-js";
  import CreateInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
  import CustomInlineToolbar from "./CustomInlineToolbar";
  import {updateNote} from "../redux/action"
  
  import "./NoteDetail.scss";
  import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
  
  const InlineToolbarPlugin = CreateInlineToolbarPlugin();
  const {InlineToolbar} = InlineToolbarPlugin;
  
  const NoteDetail = ({updateNote, title, note, date, _id}) =&gt; { 
      let initContentState = ContentState.createFromText(note);
      let [editorState, setEditorState] = useState(EditorState.createWithContent(initContentState));
      let [titleState, setTitleState] = useState(title)
      let editorRef = useRef(React.createRef());
  
      useEffect(()=&gt;{
          updateNote(_id, titleState, editorState)
      },[editorState, titleState, _id])
  
      const focus = () =&gt; {
          editorRef.current.focus()
      }
  
      return(
          &lt;div&gt;
              &lt;div className="NoteDetail-container"&gt;
                  &lt;input type="text" id="title" 
                      value={titleState === "Untitled Page"? "":titleState} 
                      onChange={(e)=&gt;setTitleState(e.target.value)}
                  /&gt;
                  &lt;div id="content" onClick={focus}&gt;
                      &lt;Editor 
                          plugins={[InlineToolbarPlugin]} 
                          onChange={(e)=&gt;setEditorState(e)}
                          editorState={editorState}
                          ref={ele =&gt; editorRef.current = ele}
                      /&gt;
                      &lt;CustomInlineToolbar InlineToolbar={InlineToolbar} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  };
  
  const mapProps = (state) =&gt; {
      const {title, _id, note, date} = state.notesReducer.note
      return {
          title,
          _id,
          note,
          date
      }
  }
  export default connect (mapProps, {updateNote})(NoteDetail)
  </code></pre>
  
  <p>It rerenders when the note state changed, but the state remain the same. I checked that the title did change, but the titleState didn't. So how does state and component comparison behave in React?</p>
  
  <p>my reducer:</p>
  
  <pre><code>import {
      GET_NOTE,
      UPDATE_NOTE,
      DEL_NOTE,
      CREATE_NOTE,
      SELECT_NOTE,
      GET_NOTES,
      } from "../action/types";
  import {
      api_getNote,
      api_delNote,
      api_updateNote,
      api_postNote
      } from "../../api/noteService"
  
  
  //TODOS: finish update_title part
  
  const notesReducer = ( state={}, action) =&gt; {
  
      switch (action.type){ 
  
          case GET_NOTES:
              return{notes: action.payload}
  
          case UPDATE_NOTE:
              const {id, content} = action.payload
              api_updateNote(id,content)
              return state
  
          case DEL_NOTE:
              api_delNote(action.payload)
              return state
  
          case CREATE_NOTE:
              api_postNote(action.payload, (res)=&gt; {
                  return {notes: res}
              })
              return state
  
          case SELECT_NOTE:
              return {...state, note: action.payload}
  
          default:
              return state
      }
  }
  
  export default notesReducer
  </code></pre>