[Question] - use-context-selector / Zustand / react-tracked - which is best for performance?

[ItaiYosephi]

My use case is a vary big UserPreference object that's provided globally, and a hook that accept a key and returns value, and setValue.
a simplified version of that looks like this (in reality user preferences comes from the server)

const useUserPreference = (key: keyof UserPreferences) => {
  const { userPreferences, setUserPreferences } = useContext(
    UserPreferencesContext
  );

  return {
    value: userPreferences[key],
    setValue: useCallback(
      nextValue =>
        setUserPreferences(prevUserPreferences => ({
          ...prevUserPreferences,
          [key]: nextValue,
        })),
      [key, setUserPreferences]
    ),
  };
};

const UserPreferencesProvider = ({ children }) => {
  const [userPreferences, setUserPreferences] = useState(INITIAL_VALUE);

  return (
    <UserPreferencesContext.Provider
      value={{ userPreferences, setUserPreferences }}
    >
      {children}
    </UserPreferencesContext.Provider>
  );
};

When setting value of a preference, I want to avoid rendering components that use useUserPreference if the value hasn't changed.
I tried using all three packages mentioned above, but rendering still occurs for every component that uses that hook...
any thoughts?

[dai-shi]

All three packages should solve extra rerendering issue. You probably want to debug with useEffect(() => console.log('rendered')).

[ItaiYosephi]

@dai-shi thanks! I was wondering what are the disadvantages of using the simple solution mentioned here #109 (comment) .
Does it support concurrency?

[dai-shi]

I would actually recommend the simple solution.
Its drawback is when used with useTransition, but it still works.

use-context-selector is primarily developed for React Tracked and to pass my tests in https://github.com/dai-shi/will-this-react-global-state-work-in-concurrent-rendering.