title: How to access current state in react navigation listener?
body: <p>I'm creating a react-native app using react-navigation 5.</p>
  
  <p>Let's say I have a screen component like this:</p>
  
  <pre><code>import {View, Text} from 'react-native';
  
  function TextScreen({navigation}) {
    const [text, setText] = useState(null);
  
    useEffect(() =&gt; {
      setText('Some text.');
      navigation.addListener('focus', () =&gt; {
        console.log('focus');
        console.log(text); // this is always null :/
      });
    }, []);
  
    return (
      &lt;View&gt;
        &lt;Text&gt;{text || 'No text'}&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>I have no idea why every <code>console.log(text)</code> displays <code>null</code> value on every focus. I expect text to be <code>null</code> only in the first focus but it happens all the time.</p>
  
  <p>But when I changed this component into class component, everything worked as expected:</p>
  
  <pre><code>import {View, Text} from 'react-native';
  
  class TextScreen extends React.Component {
    state = {
      text: null
    }
  
    componentDidMount() {
      this.setState({text: 'Some text'});
      this.props.navigation.addListener('focus', () =&gt; {
        console.log('focus');
        console.log(this.state.text); // this is null only in the first focus
      });
    }
  
    render() {
      return (
        &lt;View&gt;
          &lt;Text&gt;{this.state.text || 'No text'}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>Is there something I'm doing wrong in the first version?</p>