How to update a React component when mutating an object?

Question

I'm using react-localization for i18n that uses an object with a setLanguage method. I'm trying to build a language switcher for it, but when I change the language, the component doesn't re-render with the updated object.

I've tried with useEffect, useCallback, useRef. The only thing that works is useCallback, and exporting the callback from my custom hook, then calling it when the component renders, which I think is very ugly and incorrect.

What's the proper way to mutate an object from a hook and have the component that uses it be re-rendered?

Here's the CodeSandbox I created to test this: https://codesandbox.io/s/react-localization-context-wfo2p2

translation.js

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState
} from "react";

const TranslationContext = createContext({
  language: "fr",
  setLanguage: () => null
});

const TranslationProvider = ({ children }) => {
  const [language, setLanguage] = useState("fr");

  return (
    <TranslationContext.Provider value={{ language, setLanguage }}>
      {children}
    </TranslationContext.Provider>
  );
};

const useTranslation = (_strings, key) => {
  const { language, setLanguage } = useContext(TranslationContext);

  const ref = useRef(_strings);
  const cb = useCallback(() => _strings.setLanguage(language), [
    language,
    _strings
  ]);

  useEffect(() => {
    ref?.current?.setLanguage(language);
  }, [language]);

  return { language, cb, setLanguage };
};

export { useTranslation, TranslationProvider, TranslationContext };

Answer 1

The language state is in the parent context provider component, so it'll re-render affected child components, so you don't need extra logic like useEffect.

I'll be honest, I tried to call the method directly in the custom hook and it worked ;P.

// translation.js
const useTranslation = (_strings, key) => {
  const { language, setLanguage } = useContext(TranslationContext);
  _strings?.setLanguage(language);
  return { language, setLanguage };
};

// Test.js
const Test = () => {
  useTranslation(strings, "Test");
  return <div>{strings.message}</div>;
};

If you want to run the localization only on language state updates, we'll need useEffect, and to make sure the components update after useEffect, which runs after the component's rendered, runs, so we create a state that we update in the component/custom hook.

You can use a boolean state that you flip each update, but you can also save the properties of the localized object to the state by destructuring it. Then use that state for the rendering.

const useTranslation = (_strings, key) => {
  const { language } = useContext(TranslationContext);
  const [fields, setFields] = useState({..._strings});
  
  useEffect(() => {
    _strings.setLanguage(language)
    setFields({..._strings});
  }, [language]);

  return fields;
};

const Test = () => {
  const fields = useTranslation(_strings, "Test");
  return <div>{fields.message}</div>;
};

Answer 2

You are actually closer than you realize. Instead of returning a callback cb to the UI to call as an unintentional side-effect, create/move some state into the hook.

The TranslationProvider stores the current global language state, but the useTranslation hook should/could store it's own reference to a LocalizedStrings object and store the translated messages in a local state that is updated via a useEffect hook.

Example:

const useTranslation = (_strings, key) => {
  // Access global language state and setter
  const { language, setLanguage } = useContext(TranslationContext);

  // Local message state for translations
  const [message, setMessage] = useState();

  // LocalizedStrings instance ref
  const stringsRef = useRef(_strings && new LocalizedStrings(_strings));

  // Side-effect to translate to current language
  // Update message state to trigger rerender
  useEffect(() => {
    stringsRef.current?.setLanguage(language);
    setMessage(stringsRef.current?.message);
  }, [language]);

  // Expose context value and current translated message
  return { language, message, setLanguage };
};

Usage:

const strings = {
  en: { message: "Test message in English" },
  fr: { message: "Message de test en Français" }
};

const Test = () => {
  const { message } = useTranslation(strings, "Test");

  useEffect(() => {
    console.log("[RENDER <Test/>", strings);
  });

  return <div>{message}</div>;
};

...

const _strings = {
  en: { message: "Test message #2 in English" },
  fr: { message: "Message de test #2 en Français" }
};

const Test2 = () => {
  const { language, message } = useTranslation(_strings, "Test2");

  useEffect(() => {
    console.log("[RENDER] <Test2/>", _strings);
  })

  return (
    <div>
      {message} {language}
    </div>
  );
};