title: react functional component let variable doesn't changed
body: <p>I wrote functional component with react native.
  but I'm in trouble because of a strange problem that seems to be a bug.</p>
  <p>My purpose is changing variable in react functional component,
  but variable not changed.</p>
  <p>--I know It will be solved with change
  <code>let isDirty </code>
  to
  <code>cosnt [isDirty,setIsDirty] = useState(false)</code></p>
  <p>Why doesn't &quot;isDirty&quot; change when the handleTitleChange event occurs?</p>
  <p>In pure js, it works very well</p>
  <h1>update.tsx</h1>
  <pre><code>import React, { useState } from 'react';
  import { View, TextInput, CheckBox, Button } from 'react-native';
  import { NavigationInjectedProps } from 'react-navigation';
  import TodoItem from '../models/todoItem';
  import { updateItem } from '../DataProvider';
  
  interface UpdateProps extends NavigationInjectedProps {
  }
  
  const Update: React.FC&lt;UpdateProps&gt; = (props) =&gt; {
    const [item, setItem] = useState(props.navigation.getParam(&quot;item&quot;) as TodoItem)
    let isDirty=false
  
    const handleSave=()=&gt;{
      updateItem(item)
      
      if(isDirty&amp;&amp;props.navigation.state.params)
      {
        props.navigation.state.params.onUpdated(item);
      }
      props.navigation.goBack();
    }
  
    const handleCompleteChange= (value:boolean)=&gt;{
      isDirty=true
      setItem({...item,isComplete:value})
    }
  
    const handleTitleChange=(txt:string)=&gt;{
      isDirty=true
      setItem({...item,title:txt})
    }
  
    const handleContentChange=(txt:string)=&gt;{
      isDirty=true
      setItem({...item,contents:txt})
    }
    
    return &lt;View&gt;
      &lt;CheckBox value={item.isComplete} onValueChange={handleCompleteChange}&gt;&lt;/CheckBox&gt;
      &lt;TextInput defaultValue={item.title} onChangeText={handleTitleChange}&gt;&lt;/TextInput&gt;
      &lt;TextInput defaultValue={item.contents} onChangeText={handleContentChange}&gt;&lt;/TextInput&gt;
      &lt;Button title=&quot;Save&quot; onPress={handleSave}&gt;&lt;/Button&gt;
    &lt;/View&gt;;
  };
  
  export default Update
  </code></pre>
  <h1>pure js</h1>
  <pre><code>const Update = () =&gt; {
    let isDirty=false;
  
    const handleTitleChange=(txt)=&gt;{
      console.log(isDirty);
      isDirty=true;
      console.log(isDirty);
    }
    handleTitleChange(&quot;a&quot;);
    handleTitleChange(&quot;b&quot;);
  };
  
  
  Update();
  </code></pre>