title: React Hook delayed useEffect firing?
body: <p>I am trying to use useEffect() in my react hook to update the state when my props change. but there is a delay and the useEffect is only firing after I click again on an element in my hook. Im fairly new to using hooks and any help would be appreciated. Thanks</p>
  
  <pre><code>function ImageOrderSelect (props) {
    const [clicked, setClicked] = useState(false)
    const [options, setOptions] = useState(props.options)
    const [current, setCurrent] = useState(props.current)
  
    useEffect(() =&gt; {
        setCurrent(props.current)
      }, [props.current])
  
  
    if(!clicked){
      return (
          &lt;div className="image-order-select-icon" onClick={() =&gt; setClicked(!clicked)}&gt;
              &lt;FontAwesomeIcon size="lg" icon={faCircle} /&gt;
              &lt;p&gt;{current}&lt;/p&gt;
          &lt;/div&gt;
      )
    } else if(clicked){
        return (
            &lt;div className="image-order-select"&gt;
                {optionsList}
            &lt;/div&gt;
        )
    }
  
  
  }
  </code></pre>