title: Why my React Hook doesn't work? It reloads with wrong value
body: <p>Here is live example code <a href="https://codesandbox.io/embed/wonderful-moon-sc9o2" rel="nofollow noreferrer">https://codesandbox.io/embed/wonderful-moon-sc9o2</a></p>
  
  <p>I want to implement sort of i18n (like <a href="https://react.i18next.com" rel="nofollow noreferrer">react-i18next</a>)</p>
  
  <p>When I click "Change Language" button, I expect all my translations in different components are updated:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Example.js
  // t.ui.btn - is a path to string token
  // { ui: { btn: 'Change Language' } }
  
  &lt;button&gt;{t.ui.btn}&lt;/button&gt;
  </code></pre>
  
  <p>The <code>lang</code> variable in my hook is changed all right, but the hook doesn't propagate changes to the app. Instead it renders initial <code>lang</code> value. </p>
  
  <p>You can notice how <code>lang</code> receives initial value in console.</p>
  
  <p>What is wrong with my hook? How to fix it?</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { Example } from "./Example";
  import { Header } from "./Header";
  import { useTranslation } from "./useTranslation";
  import "./styles.css";
  
  function App() {
    const { t } = useTranslation();
  
    return (
      &lt;div className="App"&gt;
        &lt;Header /&gt;
        &lt;h3&gt;{t.app.title}&lt;/h3&gt;
        &lt;div&gt;
          &lt;Example /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p><strong>Example.js</strong></p>
  
  <pre><code>import React, { useState } from "react";
  import { useTranslation } from "./useTranslation";
  
  function Example() {
    const [count, setCount] = useState({ count: 1 });
    const { t } = useTranslation();
  
    function onClick(ev) {
      setCount(prevState =&gt; ({
        count: ++prevState.count
      }));
    }
  
    return (
      &lt;div&gt;
        &lt;p&gt;Clicks state: {JSON.stringify(count)}&lt;/p&gt;
        &lt;button onClick={onClick}&gt;{t.ui.btn}&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export { Example };
  </code></pre>
  
  <p><strong>useTranslation.js</strong> hook</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import { dict as en } from "./en";
  import { dict as de } from "./de";
  
  const useTranslation = () =&gt; {
    const [lang, setLang] = useState("en");
    const dict = {
      en,
      de
    };
  
    function changeLang(lang) {
      console.log("[useTranslation][changeLang] lang", lang);
      setLang(lang);
    }
  
    console.log("[useTranslation] lang", lang);
  
    return {
      t: dict[lang],
      changeLang: changeLang,
      lang
    };
  };
  
  export { useTranslation };
  </code></pre>
  
  <p><strong>Header.js</strong></p>
  
  <pre><code>import React, { useState } from "react";
  import { useTranslation } from "./useTranslation";
  
  function Header() {
    const { changeLang, lang, t } = useTranslation();
  
    function onChangeLang(ev) {
      console.log("[index][onChangeLang] lang", lang);
      changeLang(lang === "en" ? "de" : "en");
    }
  
    return (
      &lt;div&gt;
        &lt;button onClick={onChangeLang}&gt;{t.ui.changeLang}&lt;/button&gt;&amp;nbsp;
        &lt;span&gt;{lang}&lt;/span&gt;
      &lt;/div&gt;
    );
  }
  
  export { Header };
  </code></pre>
  
  <p><strong>en.js</strong> translations</p>
  
  <pre><code>const dict = {
    ui: {
      btn: "COUNT",
      changeLang: "CHANGE LANGUAGE"
    },
    app: {
      title: "Hook Example"
    }
  };
  
  export { dict };
  </code></pre>
  
  <p><strong>de.js</strong> translations</p>
  
  <pre><code>const dict = {
    ui: {
      btn: "Anzahl",
      changeLang: "SPRACHE ÄNDERN"
    },
    app: {
      title: "Hook-Beispiel"
    }
  };
  
  export { dict };
  </code></pre>