Не популярні корисні хуки в React (3/3)

const userName = useSyncExternalStore(
userStore.subscribe,
() => userStore.userName
);

❤️Можливість мати стор окремо від компоненту без зайвих бібліотек (топ штука, але вже пізно)❤️

function UserEditor() {
  const userName = useSyncExternalStore(
    userStore.subscribe,
    () => userStore.userName
  );
  return (
    <>
      <h1>Hello {userName}</h1>
      <input onChange={(e) => userStore.setUserName(e.target.value)} />
    </>
  );
}

class ExternalStore {
  private _listeners: (() => void)[] = [];
  constructor(private readonly _user: User) {}

  get userName() {
    return this._user.name;
  }

  setUserName = (name: string) => {
    this._user.name = name;
    this._listeners.forEach((l) => l());
  };

  subscribe = (listener: () => void) => {
    this._listeners.push(listener);
    return () => (this._listeners = this._listeners.filter(listener));
  };
}

Деталі: Хук дозволяє підписатися на зміни в об'єктах, які знаходиться поза межами React. Два важливі моменти: 1) Функція subscribe зобов'язана повертати функцію відписки. 2) Функція, яка отримує дані, має повертати нові значення виключно якщо ті були змінені. Повернення НОВОГО об'єкту на кожен виклик призведе до помилки.

Сторонній ефект: На вас будуть дивно дивитися, бо це ж не канонічно.
Документація

@reactbeginners