title: React Hooks - Modified state not reflecting immediately
body: <p>I'm trying to refactor a class into a stateless component using <code>React</code> hooks.</p>
  
  <p>The component itself is very simple and I don't see where I'm making a mistake, as it's almost a copy paste from the react docs.</p>
  
  <p>The component is showing a popup when the user clicks on a button (button is passed through props to my component). I'm using <code>typescript</code>.</p>
  
  <p><strong>I commented the line that fails to do what I want in the <code>hooks</code> version</strong> </p>
  
  <p>Here's my original class:</p>
  
  <pre><code>export interface NodeMenuProps extends PropsNodeButton {
    title?: string
    content?: JSX.Element
    button?: JSX.Element
  }
  export interface NodeMenuState {
    visible: boolean
  }
  export class NodeMenu extends React.Component&lt;NodeMenuProps, NodeMenuState&gt; {
    state = {
      visible: false
    }
  
    hide = () =&gt; {
      this.setState({
        visible: false
      })
    }
  
    handleVisibleChange = (visible: boolean) =&gt; {
      this.setState({ visible })
    }
  
    render() {        
      return (
        &lt;div className={this.props.className}&gt;
          &lt;div className={styles.requestNodeMenuIcon}&gt;
            &lt;Popover
              content={this.props.content}
              title={this.props.title}
              trigger="click"
              placement="bottom"
              visible={this.state.visible}
              onVisibleChange={this.handleVisibleChange}
            &gt;
              {this.props.button}
            &lt;/Popover&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Here's the <code>React hooks</code> version:</p>
  
  <pre><code>export interface NodeMenuProps extends PropsNodeButton {
    title?: string
    content?: JSX.Element
    button?: JSX.Element
  }    
  export const NodeMenu: React.SFC&lt;NodeMenuProps&gt; = props =&gt; {
    const [isVisible, setIsVisible] = useState(false)      
  
    const hide = () =&gt; {
      setIsVisible(false)
    }
  
    const handleVisibleChange = (visible: boolean) =&gt; {
      console.log(visible) // visible is `true` when user clicks. It works
      setIsVisible(visible) // This does not set isVisible to `true`.
      console.log(isVisible) // is always `false` despite `visible` being true.
    }      
  
    return (
      &lt;div className={props.className}&gt;
        &lt;div className={styles.requestNodeMenuIcon}&gt;
          &lt;Popover
            content={props.content}              
            title={props.title}
            trigger="click"
            placement="bottom"
            visible={isVisible}
            onVisibleChange={handleVisibleChange}
          &gt;
            {props.button}
          &lt;/Popover&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>