Блог

Мне интересно, какой из этих двух подходов лучше всего подходит для обработки состояния при использовании пользовательских крючков в react.

Прочитав эту статью о написании тестируемых крючков реакции, я начал создавать пользовательский крючок, связанный с компонентом, который будет выступать в качестве единой точки входа для состояния и бизнес-логики.

Однако это заставило меня задуматься, какой подход лучше всего подходит для обработки состояния. Должен ли я сохранить множество значений состояния и передать действие setState другим пользовательским крючкам или я должен вернуть значение и позволить более конкретному крючку обрабатывать более конкретное состояние? Я привел простой пример, чтобы проиллюстрировать то, что я пытаюсь сформулировать!

 // useMyComponent.ts

// Approach 1

export default (): {
  foo: string;
} => {
  const [foo, setFoo] = useState < string | undefined>();

  // State contained within this custom hook
  const [authorisedInfo, setAuthorisedInfo] = useState<string | undefined>();
  const [googleToken, setGoogleToken] = useState<string | undefined>();
  useEffect(() => {
    // setState passed down and set within a different custom hook
    useSignInWithGoogle(setGoogleToken);
  }, []);
  useEffect(() => {
    if (!googleToken) return;
    usePerformAuthCall(setAuthorisedInfo);
  }, [googleToken]);

  useEffect(() => {
    if (!authorisedInfo || !googleToken) return;
    const { foo } = doSomethingHere(authorisedInfo, googleToken);
    setFoo(foo);
  }, [authorisedInfo, googleToken]);

  return { foo };
};

// Approach 2

export default (): {
  foo: string;
} => {
  const [foo, setFoo] = useState < string | undefined>();

  useEffect(() => {
    // state value passed back from the custom hook
    const { googleToken } = useSignInWithGoogle();
  }, []);
  useEffect(() => {
    if (!googleToken) return;
    const { authorisedInfo } = usePerformAuthCall(setAuthorisedInfo);
  }, [googleToken]);

  useEffect(() => {
    if (!authorisedInfo || !googleToken) return;
    const { foo } = doSomethingHere(authorisedInfo, googleToken);
    setFoo(foo);
  }, [authorisedInfo, googleToken]);

  return { foo };
};
 

Спасибо за помощь!