React Hooks – Modified state not reflecting immediately

by

Much like setState, the state update behaviour using hooks will also require a re-render and update and hence the change will not be immedialtely visible. If however you try to log state outside of the handleVisibleChange method, you will see the update state

export const NodeMenu: React.SFC<NodeMenuProps> = props => {
  const [isVisible, setIsVisible] = useState(false)      

  const hide = () => {
    setIsVisible(false)
  }

  const handleVisibleChange = (visible: boolean) => {
    console.log(visible) // visible is `true` when user clicks. It works
    setIsVisible(visible) // This does not set isVisible to `true`.
  }      

  console.log({ isVisible });
  return (
    <div className={props.className}>
      <div className={styles.requestNodeMenuIcon}>
        <Popover
          content={props.content}              
          title={props.title}
          trigger="click"
          placement="bottom"
          visible={isVisible}
          onVisibleChange={handleVisibleChange}
        >
          {props.button}
        </Popover>
      </div>
    </div>
  )
}

Any action that you need to take on the basis of whether the state was update can be done using the useEffect hook like

useEffect(() => {
   // take action when isVisible Changed
}, [isVisible])

More Related Contents:

  1. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  2. Set types on useState React Hook with TypeScript
  3. React Hooks – Modified state not reflecting immediately
  4. is it possible to React.useState(() => {}) in React?
  5. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  6. Infinite loop in useEffect
  7. React useState cause double rendering
  8. Typescript input onchange event.target.value
  9. Property ‘value’ does not exist on type ‘Readonly’
  10. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  11. mobx-react observer don’t fires when I set observable
  12. React useReducer async data fetch
  13. Importing images in TypeScript React – “Cannot find module”
  14. useNavigate() may be used only in the context of a component
  15. Testing React components that fetches data using Hooks
  16. Why React useState with functional update form is needed?
  17. How to type a page component with props in Next.js?
  18. How do react hooks determine the component that they are for?
  19. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  20. React Hooks – How do I implement shouldComponentUpdate?
  21. useMemo vs. useEffect + useState
  22. How to assign the correct typing to React.cloneElement when giving properties to children?
  23. Disable ESLint that create-react-app provides
  24. How to test a react component that is dependent on useContext hook?
  25. What is the expected return of `useEffect` used for?
  26. ReactJS – prevState in the new useState React hook?
  27. Webpack & Typescript image import
  28. How to create dynamic refs in functional component- Using useRef Hook
  29. Put A Warning If Page Refresh in ReactJS
  30. React – Is useState ‘s setter function able to change?

Leave a Comment