title: Use a state from diferent functions
body: <p>This is my question. Can i do a global state in a file and use a function to render this state that is render in other function?</p>
  <p>Is it even possible to do something similar to this example?</p>
  <pre><code>import { useState, Fragment } from &quot;react&quot;
  
  export const globalState = () =&gt; {
   const [ state, setState ] = useState&lt;string&gt;()
   return { state, setState }
  }
  
  
  
  const Component = () =&gt; {
   const { state } = globalState()
  
   return (
    &lt;Fragment&gt;
     &lt;div onClick={() =&gt; setStateFunctions.setText('Hello World') }&gt;DisplayText&lt;/div&gt;
     &lt;div&gt;{state}&lt;/div&gt;
    &lt;/Fragment&gt;
   )
  }
  
  
  
  const setStateFunctions = {
   setText: (text: string) =&gt; {
    const { setState } = globalState()
    setState(text)
   }
  }
  
  
  
  export { Component, setStateFunctions }
  </code></pre>
  <p><strong>Note: This example throw error hook violation</strong></p>