Expansion.md

Представим компонент, написанный какое-то время назад, используется в приложении, работает без проблем

function MyComponent({ input }) {
  let [something, setSomething] = useState();
  let data = useSomeFetchLibrary(input);
  return (
    <section>
      <ContentA input={something} />
      <ContentB input={data} />
    </section>
  );
}

Нам нужно его расширить, добавив данные которые используют библиотеку N. Сколько кода добавится, изменится, удалится?

Recoil

Данные которые нужно использовать в компоненте:

let userProfile = atom({
  key: "userProfile",
  default: { name: "Anon" },
});

Изменения:

function MyComponent({ input }) {
  let [something, setSomething] = useState();
  let data = useSomeFetchLibrary(input);
+ let profile = useRecoilValue(userProfile);
  return (
    <section>
      <ContentA input={something} />
      <ContentB input={data} />
+     <ContentC profile={profile.name} />
    </section>
  );
}

MobX

Данные которые нужно использовать в компоненте:

let userProfile = observable({ name: "Anon" });

Изменения:

function MyComponent({ input }) {
  let [something, setSomething] = useState();
  let data = useSomeFetchLibrary(input);
+ let profile = userProfile;
-  return (
+  return useObserver(() => (
    <section>
      <ContentA input={something} />
      <ContentB input={data} />
+     <ContentC profile={profile.name} />
    </section>
-  );
+  ));
}