title: React hooks: Parent component not re-rendering
body: <p>I'm trying to update the state of a parent component from a child using a callback. The state and call back are passed to a text input. The callback is being called, the state of the parent is changed, but it doesn't rerender. The value of the input field stays the same. If force rendering is used, the text field updates every time a new character is added (As desired). I'm not sure what could be causing this, from my understanding the setState hooks provided are supposed to rerender unless the state is unchanged.</p>
  
  <p><strong>EDIT</strong>: (Added the parent component not just the callback)
  Below is the parent component</p>
  
  <pre><code>import Card from './Card'
  import Instructions from './instructions'
  import Title from './title'
  
  import React, { useRef, useState, useCallback, useEffect } from 'react'
  import { DropTarget } from 'react-dnd'
  import ItemTypes from './ItemTypes'
  import update from 'immutability-helper'
  
  const Container = ({ connectDropTarget }) =&gt; {
        const ref = useRef(null)
            const titleRef = useRef()
        const instructionsRef = useRef()
        const appRef = useRef()
  
        useEffect(() =&gt; {
              // add when mounted
              document.addEventListener("mousedown", handleClick); 
            // return function to be called when unmounted
              return () =&gt; { document.removeEventListener("mousedown", handleClick);};
                       }, []);
  
      const handleClick = e =&gt; {
            if (titleRef.current.contains(e.target)) {
                    setFocus("Title");
                     return;
                       }  // outside click 
          else if(instructionsRef.current.contains(e.target)){
              setFocus("Instructions");
              return;
          }
          setFocus(null);
                         };
  
      const [, updateState] = useState();
        const forceUpdate = useCallback(() =&gt; updateState({}), []);
        const [focus,setFocus] = useState(null);
        const [title, setTitle] = useState({id: "Title", text: "Default",type: "Title", data:[]});
        const [instructions, setInstructions] = useState({id: "Instructions",type:"Instructions", text: "Instructions", data:[]});
        const [cards, setCards] = useState([
                {
                          id: 1,
                          text: 'Write a cool JS library',
                        },
                {
                          id: 2,
                          text: 'Make it generic enough',
                        },
                {
                          id: 3,
                          text: 'Write README',
                        },
                {
                          id: 4,
                          text: 'Create some examples',
                        },
                {
                          id: 5,
                          text: 'Spam in Twitter and IRC to promote it',
                        },
                {
                          id: 6,
                          text: '???',
                        },
                {
                          id: 7,
                          text: 'PROFIT',
                        },
              ])
        const moveCard = useCallback(
                (id, atIndex) =&gt; {
                          const { card, index } = findCard(id)
                          setCards(
                                  update(cards, {
                                            $splice: [[index, 1], [atIndex, 0, card]],
                                          }),
                                )
                        },
                [cards],
              )
        const findCard = useCallback(
                id =&gt; {
                          const card = cards.filter(c =&gt; `${c.id}` === id)[0]
                          return {
                                  card,
                                  index: cards.indexOf(card),
                                }
                        },
                [cards],
              )
      const updateItem = useCallback(
          (id,field,additionalData,value) =&gt; {
  
          return;     
          },
          [cards], //WHat does this do?
      )
  
      const updateTitle = text =&gt; {
              console.log("Updating title")
              let tempTitle = title;
              tempTitle['text'] = text;
              //console.log(text);
              //console.log(title);
              //console.log(tempTitle);
              setTitle(tempTitle);
              //console.log(title);
              //console.log("done");
              forceUpdate(null);  
      }
  
        connectDropTarget(ref)
        return (
            &lt;div ref={appRef}&gt;
            &lt;div ref={titleRef} &gt;
            &lt;Title item={title} focus={focus} updateFunction={updateTitle}/&gt;
            &lt;/div&gt;
            &lt;div ref={instructionsRef} &gt;
            &lt;Instructions item={instructions} focus={focus}/&gt;
            &lt;/div&gt;
            &lt;div className="Card-list" ref={ref}&gt;
                  {cards.map(card =&gt; (
                          &lt;Card
                            key={card.id}
                            id={`${card.id}`}
                            text={card.text}
                            moveCard={moveCard}
                            findCard={findCard}
                        item={card}
                        focus={focus}
                          /&gt;
                        ))}
                &lt;/div&gt;
            &lt;/div&gt;
              )
  }
  export default DropTarget(ItemTypes.CARD, {}, connect =&gt; ({
        connectDropTarget: connect.dropTarget(),
  }))(Container)
  </code></pre>
  
  <p>The code of the component calling this function is:</p>
  
  <pre><code>import React from 'react'
  
  function Title(props) {
          if(props.focus === "Title")
                  return(
                          &lt;input
                          id="Title"
                          class="Title"
                          type="text"
                          value={props.item['text']}
                          onChange = { e =&gt; props.updateFunction(e.target.value)}
                          /&gt;
                  );
          else
                  return (
                  &lt;h1&gt; {props.item['text']} &lt;/h1&gt;
                  );
  }
  
  export default Title
  </code></pre>