title: How to get value of useState variable in function that passed to another component
body: <p>The best way to describe question is my code:</p>
  
  <pre><code>function EstateParamsList({ estateType, category }) {
    const [isLoading, setIsLoading] = useState(true)
    const [params, setParams] = useState({})
    const [showPopUp, setShowPopUp] = useState(false)
  
    useEffect(() =&gt; {
      if (category &amp;&amp; typeof category.id !== undefined) {
        return db.collection(`dictionaries/ESTATE_PARAMS/${estateType}/${category.id}/params`).onSnapshot(response =&gt; {
          const paramsObject = {}
          response.forEach(param =&gt; {
            paramsObject[param.id] = {
              ...convertParamObjetcToFieldsConfig(param.data()),
              change: fieldChangedHandler
            }
          })
          setParams(paramsObject)
          setIsLoading(false)
        })
      } else {
        setIsLoading(false)
      }
    }, [category])
   console.log(params)
    const fieldChangedHandler = (event, fieldIdentifier) =&gt; {
      if(params)
        console.log(params)
    }
  </code></pre>
  
  <p>So i have <strong>params</strong> variable, that im init with object, that i'm getting async from firebase. Implementation of initializing you can see in <strong>useEffect method</strong>. For every object i want to pass ref for the function "fieldChangedHandler", for managing value of inputs. </p>
  
  <p><strong>fieldChangedHandler</strong> is a method of my <strong>EstateParamsList</strong>. But there i cant get value of <strong>params!</strong></p>
  
  <p>Question is WHY? I'm calling fieldChangedHandler only after everything was rendered, and async request was done. </p>
  
  <p>Below is console log of params. Why in func is empty <strong>params</strong>?</p>
  
  <p><a href="https://i.stack.imgur.com/t1OQm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t1OQm.png" alt="enter image description here"></a></p>
  
  <p>Calling:</p>
  
  <pre><code>const renderParamsAsFields = params =&gt; {
    const fields = []
    for (const key in params) {
      fields.push(&lt;Field {...params[key]} changed={event =&gt; params[key].change(event, key)} /&gt;)
    }
    return fields.length ? fields : &lt;div className='EstateParamsManager-EmptyValues'&gt;Нет параметров&lt;/div&gt;
  }
  </code></pre>