try fixing ready algo in hooks

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 8.3.9
+
+- try fixing hooks ready algorithm [642](https://github.com/i18next/react-i18next/issues/642)
+
 ### 8.3.8
 
 - try fixing edge case of unset state: [615](https://github.com/i18next/react-i18next/issues/615)

example/react-hooks/package.json

@@ -8,7 +8,7 @@
     "i18next-xhr-backend": "1.5.1",
     "react": "^16.7.0-alpha.2",
     "react-dom": "^16.7.0-alpha.2",
-    "react-i18next": "8.3.3",
+    "react-i18next": "8.3.9",
     "react-scripts": "^2.0.0"
   },
   "scripts": {

example/react-hooks/src/App.js

@@ -1,5 +1,5 @@
 import React, { Component, Suspense } from 'react';
-import { useT, withT, Trans } from 'react-i18next/hooks';
+import { useTranslation, withTranslation, Trans } from 'react-i18next/hooks';
 import logo from './logo.svg';
 import './App.css';
 
@@ -13,7 +13,7 @@ class LegacyWelcomeClass extends Component {
     return <h2>{t('title')}</h2>;
   }
 }
-const Welcome = withT()(LegacyWelcomeClass);
+const Welcome = withTranslation()(LegacyWelcomeClass);
 
 // Component using the Trans component
 function MyComponent() {
@@ -26,7 +26,7 @@ function MyComponent() {
 
 // page uses the hook
 function Page() {
-  const [t, i18n] = useT();
+  const [t, i18n] = useTranslation();
 
   const changeLanguage = lng => {
     i18n.changeLanguage(lng);

example/react-hooks/src/i18n.js

@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import Backend from 'i18next-xhr-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18n } from 'react-i18next/hooks';
+import { initReactI18next } from 'react-i18next/hooks';
 
 i18n
   // load translation using xhr -> see /public/locales
@@ -11,7 +11,7 @@ i18n
   // learn more: https://github.com/i18next/i18next-browser-languageDetector
   .use(LanguageDetector)
   // pass the i18n instance to react-i18next.
-  .use(initReactI18n)
+  .use(initReactI18next)
   // init i18next
   // for all options read: https://www.i18next.com/overview/configuration-options
   .init({

hooks.js

@@ -4,7 +4,7 @@ export {
   useSSR,
   withSSR,
   Trans,
-  initReactI18n,
+  initReactI18next,
   setDefaults,
   getDefaults,
   setI18n,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-i18next",
-  "version": "8.3.8",
+  "version": "8.3.9",
   "description": "Internationalization for react done right. Using the i18next i18n ecosystem.",
   "main": "dist/commonjs/index.js",
   "types": "index.d.ts",

src/hooks/context.js

@@ -32,7 +32,7 @@ export function getI18n() {
   return i18nInstance;
 }
 
-export const initReactI18n = {
+export const initReactI18next = {
   type: '3rdParty',
 
   init(instance) {

src/hooks/index.js

@@ -5,7 +5,7 @@ export { withSSR } from './withSSR';
 export { useSSR } from './useSSR';
 
 export {
-  initReactI18n,
+  initReactI18next,
   setDefaults,
   getDefaults,
   setI18n,

src/hooks/useTranslation.js

@@ -39,7 +39,19 @@ export function useTranslation(ns) {
 
   // are we ready? yes if all namespaces in first language are loaded already (either with data or empty objedt on failed load)
   const ready =
-    i18n.isInitialized && namespaces.every(n => i18n.hasResourceBundle(i18n.languages[0], n));
+    i18n.isInitialized &&
+    namespaces.every(n => {
+      const ret =
+        i18n.hasResourceBundle(i18n.languages[0], n) || // we have the ns loaded for the favorite lng (chances are we do not have that lng so check for fallback or has tried to load that)
+        (!i18n.services.backendConnector.backend &&
+          i18n.hasResourceBundle(i18n.languages[i18n.languages.length - 1], n)) || // we have no backend (translation via init) but fallbackLng
+        (i18n.services.backendConnector.backend &&
+          i18n.services.backendConnector.state[`${i18n.languages[0]}|${n}`] &&
+          i18n.services.backendConnector.state[`${i18n.languages[0]}|${n}`] !== 1 &&
+          i18n.hasResourceBundle(i18n.languages[i18n.languages.length - 1], n)); // we have at least tried to load it and have a fallback
+
+      return ret;
+    });
 
   // set states
   const [t, setT] = useState({ t: i18n.getFixedT(null, namespaces[0]) }); // seems we can't have functions as value -> wrap it in obj